youhua

少年

2024-03-05 d46ebfb71da0148dcc2724024cf7b053d784f299

 src/components/viewer2.vue

@@ -3,20 +3,12 @@
    <!-- openlayer -->
    <div id="openlayerContainer" @click="clicktoclose"></div>

    <div id="ponitPanel">
      <div class="title">点位详情</div>
      <div class="content">

      </div>

    </div>

    <!-- 页面标题 -->
    <div class="titleBg">
    <!-- <div class="titleBg">
      <img src="@/assets/img/title/title.png" />
    </div>
    </div> -->
    <!-- 历史影像 -->
    <!-- <my-history v-if="state.show"></my-history> -->
    <my-history v-if="state.show"></my-history>
    <!-- 历史影像关闭按钮 -->
    <!-- <div class="colseBtn" v-if="state.show" @click="closeHistory(false)">
      <img class="searchBtn" src="@/assets/closeinput1.png" />
@@ -32,7 +24,7 @@
    <!-- 原左下菜单 -->
    <!-- <my-menu v-on:getshowsta="datafromchild" ref="menu"></my-menu> -->
    <!-- 左下快捷区域（复位、指北等） -->
    <my-left-bottom :test="childrendata"></my-left-bottom>
    <!-- <my-left-bottom :test="childrendata"></my-left-bottom> -->
    <!-- 右下快捷区域（放大缩小） -->
    <my-right-bottom :test="childrendata"></my-right-bottom>

@@ -65,9 +57,9 @@
</template>
<script>
import store from "@/utils/store2.js";
import { setClick } from '@/utils/map2.js'
import { setClick, leftClick } from "@/utils/map2.js";
import _GLOBAL from "@/assets/GLOBAL2";
import { leftClick, loadLayer } from "@/utils/map.js";
// import { leftClick, loadLayer } from "@/utils/map.js";
import leftBottom from "@/components/leftMenu/bottom2.vue";
import rightBottom from "@/components/rightMenu/bottom2.vue";
import sousuo from "@/components/leftMenu/sousuo2.vue";
@@ -84,19 +76,29 @@
import layerPanel from "./sideMenu/layerMenu/main2.vue";
import roamPanel from "./sideMenu/roamPanel/main.vue";
import layerTreePanel from "./sideMenu/layerTreePanel/main2.vue";
import history from "./poplayer/history.vue";
import landAdminInfo from "./poplayer/landAdmin.vue";
import poplayer from "./poplayer/main.vue";
import sliderAlpha from "./sideMenu/sliderAlpha/main.vue";
import history from "./poplayer/history2.vue";
import landAdminInfo from "./poplayer/landAdmin2.vue";
import mainPoplayer from "./poplayer/poplayer2.vue";
import sliderAlpha from "./sideMenu/sliderAlpha/main2.vue";
import Axios from "axios";

import Map from "ol/Map.js";
import TileLayer from "ol/layer/Tile.js";
import View from "ol/View.js";
import { get as getProjection, getTransform } from "ol/proj";
import { getWidth, getTopLeft, applyTransform } from "ol/extent";
import WMTS from "ol/source/WMTS";
import WMTSTileGrid from "ol/tilegrid/WMTS";
import {
  addImageLayer,
  addAnnotationLayer,
  addHxLayer,
  addYzLayer,
  loadBaseMap,
  listenDirection,
  getCurrentPosition
} from "@/utils/tool";
// import Map from "ol/Map.js";
// import TileLayer from "ol/layer/Tile.js";
// import View from "ol/View.js";
// import { get as getProjection, getTransform } from "ol/proj";
// import { getWidth, getTopLeft, applyTransform } from "ol/extent";
// import WMTS from "ol/source/WMTS";
// import WMTSTileGrid from "ol/tilegrid/WMTS";
// import XYZ from "ol/source/XYZ";
// import {createXYZ} from "ol/tilegrid";

export default {
  name: "viewer2",
@@ -120,7 +122,7 @@
    "my-history": history,
    "my-land-admin-info": landAdminInfo,
    "my-slider": sliderAlpha,
    "my-poplayer": poplayer
    "my-poplayer": mainPoplayer,
  },
  data() {
    return {
@@ -143,12 +145,10 @@
      state: store.history,
    };
  },
  created() { },
  created() {},
  mounted() {
    this.$nextTick(function () {
      console.log("openlayer init");

      Map.prototype.getLayerByName = function (name) {
      ol.Map.prototype.getLayerByName = function (name) {
        var layer;
        this.getLayers().array_.forEach(function (lyr) {
          if (name == lyr.values_.name) {
@@ -168,13 +168,17 @@
      let _key = TDTKey;
      let _matrixSets = options.matrixSets;

      let projection = getProjection(_proj);
      let projection = ol.proj.get(_proj);
      let projectionExtent = projection.getExtent();
      let origin = projectionExtent ? getTopLeft(projectionExtent) : [-180, 90];
      let fromLonLat = getTransform("EPSG:4326", projection);
      let origin = projectionExtent
        ? ol.extent.getTopLeft(projectionExtent)
        : [-180, 90];
      let fromLonLat = ol.proj.getTransform("EPSG:4326", projection);
      let width = projectionExtent
        ? getWidth(projectionExtent)
        : getWidth(applyTransform([-180.0, -90.0, 180.0, 90.0], fromLonLat));
        ? ol.extent.getWidth(projectionExtent)
        : ol.extent.getWidth(
            ol.extent.applyTransform([-180.0, -90.0, 180.0, 90.0], fromLonLat)
          );

      let resolutions = [];
      let matrixIds = [];
@@ -182,7 +186,7 @@
        resolutions[z] = width / (256 * Math.pow(2, z));
        matrixIds[z] = z;
      }
      let wmtsTileGrid = new WMTSTileGrid({
      let wmtsTileGrid = new ol.tilegrid.WMTS({
        origin: origin,
        resolutions: resolutions,
        matrixIds: matrixIds,
@@ -191,7 +195,7 @@
        "url:",
        `${tiandituUrl}/${_layer}_${_matrixSets}/wmts?tk=${_key}`
      );
      let wmtsSource = new WMTS({
      let wmtsSource = new ol.source.WMTS({
        url: `${tiandituUrl}/${_layer}_${_matrixSets}/wmts?tk=${_key}`,
        layer: _layer,
        version: "1.0.0",
@@ -202,13 +206,13 @@
        style: "default",
        tileGrid: wmtsTileGrid,
      });
      let wmtsLayer = new TileLayer({
      let wmtsLayer = new ol.layer.Tile({
        name: "影像地图",
        id: _layer + "_" + _matrixSets,
        source: wmtsSource,
      });

      let wmtsSource1 = new WMTS({
      let wmtsSource1 = new ol.source.WMTS({
        url: `${tiandituUrl}/cia_${_matrixSets}/wmts?tk=${_key}`,
        layer: "cia",
        version: "1.0.0",
@@ -219,13 +223,13 @@
        style: "default",
        tileGrid: wmtsTileGrid,
      });
      let wmtsLayer1 = new TileLayer({
      let wmtsLayer1 = new ol.layer.Tile({
        name: "路网图层",
        id: "cia_c",
        source: wmtsSource1,
      });

      let wmtsSource2 = new WMTS({
      let wmtsSource2 = new ol.source.WMTS({
        url: `${tiandituUrl}/vec_c/wmts?tk=${_key}`,
        layer: "vec",
        version: "1.0.0",
@@ -236,31 +240,46 @@
        style: "default",
        tileGrid: wmtsTileGrid,
      });
      let wmtsLayer2 = new TileLayer({
      let wmtsLayer2 = new ol.layer.Tile({
        name: "二维地图",
        id: "cva_c",
        source: wmtsSource2,
      });
      wmtsLayer2.setVisible(false);
      ////卫星影像
      layers.push(wmtsLayer);
      // wmtsLayer2.setVisible(false);
      ////二维地图
      layers.push(wmtsLayer2);
      // layers.push(wmtsLayer2);
      ////卫星影像
      // layers.push(wmtsLayer);
      ////路网
      layers.push(wmtsLayer1);
      // layers.push(wmtsLayer1);

      const map = new Map({
      const map = new ol.Map({
        layers: layers,
        target: "openlayerContainer",
        view: new View({
        view: new ol.View({
          center: [116.505348, 39.795592],
          projection: "EPSG:4326",
          zoom: 12,
          minZoom: 9.5,
          enableRotation: false,
        }),
      });

      window.map = map;
      setClick(true)
      window.mapapi = map;

      addImageLayer();
      addAnnotationLayer();
      addHxLayer();
      addYzLayer();

      setClick(true);

      getCurrentPosition();
      listenDirection();


      // leftClick()

      window.layerOpen = function (name, options) {
        layuiLayer.close(SmartEarthPopupData.layerProp);

@@ -377,7 +396,7 @@
      console.log(window.gisBaseUrl);
      Axios.get(
        window.gisBaseUrl +
        "/gisserver/wfsserver/qiyelianqiye?version=1.3.0&request=GetFeature&format=json&typename=企业链企业"
          "/gisserver/wfsserver/qiyelianqiye?version=1.3.0&request=GetFeature&format=json&typename=企业链企业"
      ).then((res) => {
        console.log(res);
      });
@@ -391,7 +410,7 @@
  width: 100%;
  height: 100%;
  background: black;
  position: absolute !important;
  /* position: absolute !important; */
  z-index: 0;
}

@@ -427,23 +446,4 @@
.colseBtn img {
  width: 30px;
}

#ponitPanel {
  width: 80vw;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-image: url("./poplayer/img/bg.png");
  z-index: 999;
  color: #fff;
  font-family: SourceHanSansSC-R;
  padding: 10px 5px 10px 5px;
  box-sizing: border-box;
  font-size: 16px;
  pointer-events: all;
  position: absolute;
  bottom: 12px;
  left: -50px;
}


</style>