图层切换叠压

lixuliang

2024-03-13 fa05dfcce55b8589d7f76175700a92fe196dcd9b

 src/components/viewer2.vue

@@ -4,19 +4,19 @@
    <div id="openlayerContainer" @click="clicktoclose"></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" />
    </div> -->
    <!-- 右侧导航框 -->
    <!-- <my-navigation-bar></my-navigation-bar> -->
    <my-navigation-bar></my-navigation-bar>
    <!-- 搜索框 -->
    <!-- <my-sousuo v-if="!state.show" v-show="childrendata.ssval"></my-sousuo> -->
    <my-sousuo v-if="!state.show" v-show="childrendata.ssval"></my-sousuo>
    <!-- 右上快捷区域（工程树、空间分析） -->
    <!-- <div class="right-top">
      <my-layertree :rightshowzy="childrendata"></my-layertree>
@@ -26,76 +26,80 @@
    <!-- 左下快捷区域（复位、指北等） -->
    <!-- <my-left-bottom :test="childrendata"></my-left-bottom> -->
    <!-- 右下快捷区域（放大缩小） -->
    <!-- <my-right-bottom :test="childrendata"></my-right-bottom> -->
    <my-right-bottom :test="childrendata"></my-right-bottom>

    <!-- 各种面板 -->
    <!-- 设置面板 -->
    <!-- <my-setting-panel></my-setting-panel> -->
    <my-setting-panel></my-setting-panel>
    <!-- 位置面板 -->
    <!-- <my-collection-panel></my-collection-panel> -->
    <my-collection-panel></my-collection-panel>
    <!-- 指北针面板 -->
    <!-- <my-direction-panel></my-direction-panel> -->
    <!-- 新增收藏面板 -->
    <!-- <my-add-collection-panel></my-add-collection-panel> -->
    <my-add-collection-panel></my-add-collection-panel>
    <!-- 窨井、摄像头统计面板 -->
    <!-- <my-statistics-panel></my-statistics-panel> -->
    <my-statistics-panel></my-statistics-panel>
    <!-- 窨井统计分析面板 -->
    <!-- <my-manhole-panel></my-manhole-panel> -->
    <my-manhole-panel></my-manhole-panel>
    <!-- 摄像头统计分析面板 -->
    <!-- <my-video-panel></my-video-panel> -->
    <my-video-panel></my-video-panel>
    <!-- 图层面板 -->
    <!-- <my-layer-panel></my-layer-panel> -->
    <my-layer-panel></my-layer-panel>
    <!-- 漫游面板 -->
    <!-- <my-roam-panel></my-roam-panel> -->
    <my-roam-panel></my-roam-panel>
    <!-- 图层树面板 -->
    <!-- <my-layer-tree-panel></my-layer-tree-panel> -->
    <my-layer-tree-panel></my-layer-tree-panel>
    <!-- 土地管理弹窗 -->
    <!-- <my-land-admin-info></my-land-admin-info>
    <my-slider></my-slider> -->
    <my-land-admin-info></my-land-admin-info>
    <my-slider></my-slider>
    <my-poplayer></my-poplayer>
  </div>
</template>
<script>
import store from "@/utils/store.js";

import _GLOBAL from "@/assets/GLOBAL";
import { leftClick, loadLayer } from "@/utils/map.js";
import leftBottom from "@/components/leftMenu/bottom.vue";
import rightBottom from "@/components/rightMenu/bottom.vue";
import sousuo from "@/components/leftMenu/sousuo.vue";
import store from "@/utils/store2.js";
import { setClick, leftClick, touchClick } from "@/utils/map2.js";
import _GLOBAL from "@/assets/GLOBAL2";
// 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";
import menu from "@/components/menu/menu.vue";
import NavigationBar from "./rightNavigation/NavigationBar.vue";
import layertree from "@/components/rightMenu/layerTree.vue";
import NavigationBar from "./rightNavigation/NavigationBar2.vue";
import layertree from "@/components/rightMenu/layerTree2.vue";
import settingPanel from "./sideMenu/settingMenu/main.vue";
import collectionPanel from "./sideMenu/collectionMenu/main.vue";
import collectionPanel from "./sideMenu/collectionMenu/main2.vue";
import directionPanel from "./sideMenu/directionMenu/main.vue";
import addCollectionPanel from "./sideMenu/addCollectionMenu/main.vue";
import addCollectionPanel from "./sideMenu/addCollectionMenu/main2.vue";
import statisticsPanel from "./sideMenu/statisticsMenu/main.vue";
import manholePanel from "./sideMenu/manholeStatistics/main.vue";
import videoPanel from "./sideMenu/videoStatistics/main.vue";
import layerPanel from "./sideMenu/layerMenu/main2.vue";
import roamPanel from "./sideMenu/roamPanel/main.vue";
import layerTreePanel from "./sideMenu/layerTreePanel/main.vue";
import history from "./poplayer/history.vue";
import landAdminInfo from "./poplayer/landAdmin.vue";
import sliderAlpha from "./sideMenu/sliderAlpha/main.vue";
import layerTreePanel from "./sideMenu/layerTreePanel/main2.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';
  addImageLayer,
  addAnnotationLayer,
  addHxLayer,
  addYzLayer,
  loadBaseMap,
  loadGeoMap,
  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",
@@ -119,6 +123,7 @@
    "my-history": history,
    "my-land-admin-info": landAdminInfo,
    "my-slider": sliderAlpha,
    "my-poplayer": mainPoplayer,
  },
  data() {
    return {
@@ -144,26 +149,37 @@
  created() {},
  mounted() {
    this.$nextTick(function () {
      
      console.log('openlayer init');
      ol.Map.prototype.getLayerByName = function (name) {
        var layer;
        this.getLayers().array_.forEach(function (lyr) {
          if (name == lyr.values_.name) {
            layer = lyr;
          }
        });
        return layer;
      };

      const layers = [];

      const TDTKey = 'f234b950740b8c2e0d9959a51c169d21';
      const tiandituUrl = 'http://t0.tianditu.gov.cn';
      let  options = {proj:'EPSG:4326',layer:'cia',matrixSets:"c"};
      const TDTKey = "f234b950740b8c2e0d9959a51c169d21";
      const tiandituUrl = "http://t0.tianditu.gov.cn";
      let options = { proj: "EPSG:3857", layer: "img", matrixSets: "c" };
      let _proj = options.proj;
      let _layer = options.layer;
      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:3857", 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 = [];
@@ -171,13 +187,16 @@
        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,
      });
      console.log('url:',`${tiandituUrl}/${_layer}_${_matrixSets}/wmts?tk=${_key}`);
      let wmtsSource = new WMTS({
      console.log(
        "url:",
        `${tiandituUrl}/${_layer}_${_matrixSets}/wmts?tk=${_key}`
      );
      let wmtsSource = new ol.source.WMTS({
        url: `${tiandituUrl}/${_layer}_${_matrixSets}/wmts?tk=${_key}`,
        layer: _layer,
        version: "1.0.0",
@@ -188,14 +207,15 @@
        style: "default",
        tileGrid: wmtsTileGrid,
      });
      let wmtsLayer = new TileLayer({
      let wmtsLayer = new ol.layer.Tile({
        name: "影像地图",
        id: _layer + "_" + _matrixSets,
        source: wmtsSource,
      });

      let wmtsSource1 = new WMTS({
        url: `${tiandituUrl}/img_${_matrixSets}/wmts?tk=${_key}`,
        layer: 'img',
      let wmtsSource1 = new ol.source.WMTS({
        url: `${tiandituUrl}/cia_${_matrixSets}/wmts?tk=${_key}`,
        layer: "cia",
        version: "1.0.0",
        matrixSet: _matrixSets,
        format: "tiles",
@@ -204,25 +224,67 @@
        style: "default",
        tileGrid: wmtsTileGrid,
      });
      let wmtsLayer1 = new TileLayer({
        id: _layer + "_" + _matrixSets,
      let wmtsLayer1 = new ol.layer.Tile({
        name: "路网图层",
        id: "cia_c",
        source: wmtsSource1,
      });
      layers.push(wmtsLayer1);
      layers.push(wmtsLayer);

      let wmtsSource2 = new ol.source.WMTS({
        url: `${tiandituUrl}/vec_c/wmts?tk=${_key}`,
        layer: "vec",
        version: "1.0.0",
        matrixSet: _matrixSets,
        format: "tiles",
        projection: projection,
        requestEncoding: "KVP",
        style: "default",
        tileGrid: wmtsTileGrid,
      });
      let wmtsLayer2 = new ol.layer.Tile({
        name: "二维地图",
        id: "cva_c",
        source: wmtsSource2,
      });
      // wmtsLayer2.setVisible(false);
      ////二维地图
      // layers.push(wmtsLayer2);
      ////卫星影像
      // layers.push(wmtsLayer);
      ////路网
      // layers.push(wmtsLayer1);


      const map = new Map({
      const map = new ol.Map({
        layers: layers,
        target: "openlayerContainer",
        view: new View({
          center: [-6655.5402445057125, 6709968.258934638],
          zoom: 12,
        view: new ol.View({
          center: ol.proj.fromLonLat([116.505348, 39.795592]),
          projection: "EPSG:3857",
          zoom: 11.5,
          minZoom: 7,
          maxZoom: 19.5,
          enableRotation: false,
          // constrainResolution: true,
          smoothResolutionConstraint: false,
        }),
      });

      window.mapapi = map;
      window.layersArray = window.mapapi.getLayers();
      // addImageLayer();
      // addAnnotationLayer();
      window.mapapi.getView().setZoom(14);
      loadGeoMap();
      loadBaseMap();
      addHxLayer();
      addYzLayer();

      setClick(true);
      touchClick();

      getCurrentPosition();
      listenDirection();
      // leftClick()

      window.layerOpen = function (name, options) {
        layuiLayer.close(SmartEarthPopupData.layerProp);
@@ -280,34 +342,34 @@
  },
  methods: {
    clicktoclose() {
      clearTimeout(this.timer);
      this.timer = setTimeout(() => {
        this.count++;
        if (this.count == 2) {
          // console.log("单击事件");
          // 关闭所有弹窗
          //this.$refs.menu.closeall();
          // 清除定位中的位置标记
          //this.$refs.menu.clearFlyPoint();
        } else {
          // 执行放大操作
          // console.log("双击");
          // Viewer.camera.zoomIn();
          // console.log(window.clickPOI);
          let p = sgworld.Navigate.getDegrees();
          // console.log(p);
          Viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(
              window.clickPOI.lon,
              window.clickPOI.lat,
              p.height / 1.8
            ),
            duration: 1.0,
          });
        }
        this.count = 0;
      }, 300);
      this.count++;
      // clearTimeout(this.timer);
      // this.timer = setTimeout(() => {
      //   this.count++;
      //   if (this.count == 2) {
      //     // console.log("单击事件");
      //     // 关闭所有弹窗
      //     //this.$refs.menu.closeall();
      //     // 清除定位中的位置标记
      //     //this.$refs.menu.clearFlyPoint();
      //   } else {
      //     // 执行放大操作
      //     // console.log("双击");
      //     // Viewer.camera.zoomIn();
      //     // console.log(window.clickPOI);
      //     // let p = sgworld.Navigate.getDegrees();
      //     // console.log(p);
      //     // Viewer.camera.flyTo({
      //     //   destination: Cesium.Cartesian3.fromDegrees(
      //     //     window.clickPOI.lon,
      //     //     window.clickPOI.lat,
      //     //     p.height / 1.8
      //     //   ),
      //     //   duration: 1.0,
      //     // });
      //   }
      //   this.count = 0;
      // }, 300);
      // this.count++;
    },
    datafromchild(data) {
      for (var i in data) {
@@ -354,7 +416,8 @@
  width: 100%;
  height: 100%;
  background: black;
  position: absolute !important;
  /* position: absolute !important; */
  z-index: 0;
}

.titleBg {
@@ -378,12 +441,14 @@
.bottomLeft {
  display: none;
}

.colseBtn {
  position: absolute;
  z-index: 2;
  top: 0.55rem;
  left: 0.2rem;
}

.colseBtn img {
  width: 30px;
}