youhua

少年

2024-02-27 c6df06bd690486739067ee1ee7124ac66da720fb

 src/components/sideMenu/layerMenu/layerPanel2.vue

@@ -178,19 +178,19 @@
  },
  mounted() {
    this.$nextTick(() => {
      setTimeout(() => {
        this.handleEMapClick(
          {
            id: "yxdt",
            name: "影像地图",
            active: true,
            type: "er",
            src: "/static/img/yxdt.cf4698e.png",
          },
          1
        );
        loadEnterprise();
      }, 2000);
      // setTimeout(() => {
      //   this.handleEMapClick(
      //     {
      //       id: "yxdt",
      //       name: "影像地图",
      //       active: true,
      //       type: "er",
      //       src: "/static/img/yxdt.cf4698e.png",
      //     },
      //     1
      //   );
      //   loadEnterprise();
      // }, 2000);
    });
  },
  methods: {
@@ -227,13 +227,14 @@
    // 二维底图选择
    handleEMapClick(result, index) {
      // 设置相机
      if (result.name == "二维地图") {
        window.mapapi.getLayerByName("二维地图").setVisible(true);
        window.mapapi.getLayerByName("影像地图").setVisible(false);
      } else if (result.name == "影像地图") {
        window.mapapi.getLayerByName("影像地图").setVisible(true);
        window.mapapi.getLayerByName("二维地图").setVisible(false);
      }
      // if (result.name == "二维地图") {
      //   window.mapapi.getLayerByName("二维地图").setVisible(true);
      //   window.mapapi.getLayerByName("影像地图").setVisible(false);
      // } else if (result.name == "影像地图") {
      //   window.mapapi.getLayerByName("影像地图").setVisible(true);
      //   window.mapapi.getLayerByName("二维地图").setVisible(false);
      // }

      // 切换图层
      const val = layers.filter((res) => {
        if (res.name == result.name) {
@@ -241,6 +242,73 @@
        }
      });
      const children = val[0].children;
      // console.log(children, '111')
      if (result.name == '影像地图') {
        //加载航拍影像
        window.ImageLayer = new ol.layer.Tile({
          id: 'C0698021',
          visible: true,
          source: new ol.source.XYZ({
            wrapX: true,
            url: `${'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'}/tile/{z}/{y}/{x}`,
          }),
          projection: new ol.proj.get('EPSG:4326')
        });
        window.mapapi.addLayer(window.ImageLayer);

        //加载高德标注
        window.annotation = new ol.layer.Tile({
          id: '69EB42A8',
          visible: true,
          source: new ol.source.XYZ({
            wrapX: true,
            url: `https://webst02.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}`,
          }),
          projection: new ol.proj.get('EPSG:4326')
        });
        window.mapapi.addLayer(window.annotation);


        window.hexin = new ol.layer.Tile({
          source: new ol.source.TileWMS({
            ratio: 3,
            url: 'https://skyzt.bda.gov.cn/gisserver/wmsserver/YZ_BJ60',//图层地址
            params: {
              'VERSION': '1.1.1',
              'SRS': 'EPSG:4326',
              'FORMAT': 'image/png',
              'TILED': true,
              "LAYERS": ''
            }
          })
        })
        window.mapapi.addLayer(window.hexin)


        //亦庄新城规划范围
        window.yizhuang = new ol.layer.Tile({
          source: new ol.source.TileWMS({
            ratio: 3,
            url: 'https://skyzt.bda.gov.cn/gisserver/wmsserver/YZ_BJ',//图层地址
            params: {
              'VERSION': '1.1.1',
              'SRS': 'EPSG:4326',
              'FORMAT': 'image/png',
              'TILED': true,
              "LAYERS": ''
            }
          })
        })
        window.mapapi.addLayer(window.yizhuang)
      } else {
        window.mapapi.removeLayer(window.ImageLayer);
        window.mapapi.removeLayer(window.annotation)
        window.mapapi.removeLayer(window.hexin);
        window.mapapi.removeLayer(window.yizhuang);
      }



      if (this.curEMapModelIndex == index) {
        // 再次点击选中的item时取消选择
        // clearLayerByTypeId(result.id);
@@ -248,14 +316,14 @@
      } else {
        this.curSMapModelIndex = -1;
        this.curEMapModelIndex = index;
        clearLayerByTypeIdArr(["ewdt", "yxdt"]);
        clearLayerByTypeIdArr(["3Dcs", "swmx"]);
        _GLOBAL.layers[result.id] = [];
        children.forEach((item) => {
          let itemLayer = loadLayer(item);
          _GLOBAL.layers[result.id].push(itemLayer);
          // console.log(_GLOBAL.layers[result.id]);
        });
        // clearLayerByTypeIdArr(["ewdt", "yxdt"]);
        // clearLayerByTypeIdArr(["3Dcs", "swmx"]);
        // _GLOBAL.layers[result.id] = [];
        // children.forEach((item) => {
        //   let itemLayer = loadLayer(item);
        //   _GLOBAL.layers[result.id].push(itemLayer);
        //   // console.log(_GLOBAL.layers[result.id]);
        // });
      }
    },
    // 三维模型选择
@@ -357,7 +425,7 @@
    },
    // 第二行 专题图 点击
    handleZTlick(result, index) {
      console.log(result, index);
      // console.log(result, index);
      const val = layers.filter((res) => {
        if (res.name == result.name) {
          return res;
@@ -378,75 +446,81 @@
      if (this.curFuncIndex == index) {
        store.setTdglFlag(false);
        store.setPoplayerListAction({});
        divPoint3 && divPoint3.deleteObject();
        store.setPoplayerShowAction(false);
        this.curFuncIndex = -1;
        // window.clusterLayer && window.clusterLayer.clear();
        if (window.tdglLine) {
          window.mapapi.removeLayer(window.tdglLine);
          window.tdglLine = null;
        }
        this.curFuncIndex = -1;
        window.clusterLayer && window.clusterLayer.clear();
        if (window.tdglLayer) {
        if (window.tdgllayer) {
          store.setSliderShow(false);
          window.mapapi.removeLayer(window.tdglLayer);
          window.mapapi.removeLayer(window.tdgllayer);
          window.tdgllayer = null;
        }
      } else {
        this.curFuncIndex = index;
        // 隐藏底部图层面版
        store.setLayerPanelShow(false);
        // 隐藏右上角菜单面板
        store.setMenuListShow(false);
        // 隐藏底部漫游面板
        store.setRoamPanelShow(false);
        this.curFuncIndex = index;
        switch (index) {
          case 0:
            if (window.tdgllayer) {
              window.mapapi.removeLayer(window.tdgllayer);
              store.setSliderShow(false);
              window.tdgllayer = null;
              window.mapapi.removeLayer(window.tdglLine);
              return;
            }
            store.setSliderShow(true);

            var url = layers[8].children[0].urls;
            //"https://skyzt.bda.gov.cn/gisserver/tmsserver/chengshiguihua_dikuaibianhao_tms/";

            window.mapapi.removeLayer(window.tdgllayer);
            window.tdgllayer = new ol.layer.Tile({
              source: new ol.source.XYZ({
                projection: "EPSG:4326",
                tileGrid: ol.tilegrid.createXYZ({
                  extent: [50.582, -90, 180, 70.1558],
                }),
                tileUrlFunction: function (tileCoord, pixelRatio, proj) {
                  // return url + (tileCoord[0] - 1) + '/' + tileCoord[1] + '/' + (Math.pow(2, tileCoord[0] - 1) + tileCoord[2]) + '.jpeg';
                  return (
                    url +
                    "/" +
                    (tileCoord[0] - 1) +
                    "/" +
                    tileCoord[1] +
                    "/" +
                    (Math.pow(2, tileCoord[0] - 1) + tileCoord[2]) +
                    ".jpeg"
                  );
                },
              }),
            });
            window.mapapi.addLayer(window.tdgllayer);
            //显示滑动条
            store.setSliderShow(true);
            store.setTdglFlag(true);
            var url = layers[8].children[0].urls;
            //加载地块模型
            window.tdgllayer = new ol.layer.Tile({
              source: new ol.source.TileWMS({
                ratio: 3,
                url: 'https://skyzt.bda.gov.cn//gisserver/wmsserver/chengshiguihua_dikuaibianhao',
                params: {
                  'VERSION': '1.1.1',
                  'SRS': 'EPSG:4326',
                  'FORMAT': 'image/png',
                  'TILED': true,
                  "LAYERS": ''
                }
              })
            })

            // window.tdgllayer = new ol.layer.Tile({
            //   source: new ol.source.XYZ({
            //     projection: "EPSG:4326",
            //     format: new ol.format.MVT(),
            //     tileGrid: ol.tilegrid.createXYZ({
            //       // extent: [-50.582, -90, 180, 70.1558],
            //       extent: [-180, -90, 180, 90]
            //     }),
            //     tilePixelRatio: 3,
            //     tileUrlFunction: function (tileCoord, pixelRatio, proj) {
            //       console.log(tileCoord, '参数')
            //       console.log(Math.pow(2, tileCoord[0]) + tileCoord[2] - 1)
            //       // return url + (tileCoord[0] - 1) + '/' + tileCoord[1] + '/' + (Math.pow(2, tileCoord[0] - 1) + tileCoord[2]) + '.jpeg';
            //       return (
            //         url +
            //         (tileCoord[0]) +
            //         "/" +
            //         tileCoord[1] +
            //         "/" +
            //         (Math.pow(2, tileCoord[0]) + tileCoord[2] - 1) +
            //         ".jpeg"
            //       );

            //     },
            //   }),
            // });

            window.mapapi.addLayer(window.tdgllayer);
            break;
          case 1:
            this.curFuncIndex = -1;
            store.setTdglFlag(false);
            store.setSliderShow(false);
            store.setHistoryShow(true);
            if (window.tdglLayer) {
              store.setSliderShow(false);
              window.mapapi.removeLayer(window.tdgllayer);
            }
            break;
        }
      }