tj

src/pages/ol/demo/index.vue

@@ -223,10 +223,10 @@ export default {
   methods: {
     // 初始化地图
     initMap() {
-      this.clearLayer()
-      this.resolutions = []
-      this.imgLayerList = []
-      this.controlList = []
+      // this.clearLayer()
+      // this.resolutions = []
+      // this.imgLayerList = []
+      // this.controlList = []
       let mapList = this.mapList
       // 计算静态地图映射到地图上的范围
       let extent = [-1100, 110, 1460, 820]
@@ -357,6 +357,157 @@ export default {
         }
       })
     },
+    initMap2() {
+      this.clearMap()
+      // this.controlList = []
+      // this.resolutions = []
+      // this.imgLayerList = []
+      // this.vectorLayer = []
+      // this.lineVectorLayer = []
+
+      let mapList = this.mapList
+      // 计算静态地图映射到地图上的范围
+      let extent = [-1100, 110, 1460, 820]
+
+      let projection = new Projection({
+        // 投影
+        code: 'xkcd-image',
+        units: 'pixels',
+        extent: extent
+      })
+      if (mapList.length > 0) {
+        for (var i = 0; i < mapList.length; i++) {
+          let layerItem = new ImageLayer({
+            id: mapList[i].id,
+            source: new ImageStatic({
+              url: mapList[i].readPath, //这里添加静态图片的地址
+              projection: projection,
+              imageExtent: extent
+            }),
+            visible: false
+          })
+          this.imgLayerList.push(layerItem)
+
+          let controlItem = new overviewmap({
+            className: 'ol-overviewmap myOverview', //鹰眼控件样式
+            // 在鹰眼中加载相同坐标系下不同数据源的图层
+            layers: [
+              new ImageLayer({
+                source: new ImageStatic({
+                  url: mapList[i].readPath, //这里添加静态图片的地址
+                  projection: projection,
+                  imageExtent: extent
+                })
+              })
+            ],
+            // layers:this.controlList,
+            collapseLabel: '\u00BB', //鹰眼控件展开时功能按钮上的标识
+            label: '\u00AB', //鹰眼控件折叠时功能按钮上的标识
+            collapsed: false //初始为展开方式
+          })
+          this.controlList.push(controlItem)
+
+          let resolutionItem = 1
+          this.resolutions.push(resolutionItem)
+        }
+      }
+      console.log('imgLayerList', this.imgLayerList)
+      let zoomControl = new Zoom({
+        delta: 0.2,
+        zoomInTipLabel: '',
+        zoomOutTipLabel: ''
+      })
+      // // 大图
+      this.map = new Map({
+        target: 'map',
+        layers: this.imgLayerList,
+        controls: [zoomControl],
+        resolutions: this.resolutions,
+        view: new View({
+          projection: projection,
+          center: getCenter([0, 0, 0, 0]), // 获取范围的中心坐标。
+          zoom: 2.5,
+          maxZoom: 5.0,
+          minZoom: 1.5,
+          // extent: [-1100, -200, 1500, 1000] //[minX, minY, maxX, maxY] 控制拖动
+          extent: [-1100, -100, 2000, 1000] //[minX, minY, maxX, maxY] 控制拖动
+
+          //   extent: extent//[minX, minY, maxX, maxY] 控制拖动
+        })
+      })
+      // 删除默认的双击事件
+      const dblClickInteraction = this.map
+        .getInteractions()
+        .getArray()
+        .find((interaction) => {
+          return interaction instanceof DoubleClickZoom
+        })
+      this.map.removeInteraction(dblClickInteraction)
+      //将鹰眼控件加载到map中
+      this.map.addControl(this.controlList[0])
+
+      //点击事件
+
+      this.changeVectorLayer(this.list)
+
+      this.map.on('click', function(evt) {
+        let feature = evt.map.forEachFeatureAtPixel(evt.pixel, function(
+          feature
+        ) {
+          return feature
+        })
+        if (feature) {
+          for (let i in that.list) {
+            let style = that.getPointStyle(
+              that.list[i].imageSrc + '.png',
+              that.list[i].name
+            )
+            let style2 = that.getPointStyle(
+              that.list[i].imageSrc + '2.png',
+              that.list[i].name,
+              0.3
+            )
+            //获取feature对象
+            let feature_ = that.vectorLayer
+              .getSource()
+              .getFeatureById(that.list[i].id)
+            //获取红外对射或者振动光纤第二个点的feature对象
+            let featureEnd = that.vectorLayer
+              .getSource()
+              .getFeatureById(that.list[i].key + 'end')
+            if (feature_) {
+              if (feature_ === feature || featureEnd === feature) {
+                //修改选中样式
+                feature_.setStyle(style2)
+                if (featureEnd) {
+                  featureEnd.setStyle(style2)
+                }
+                that.pointListClick(that.list[i])
+              } else {
+                //清除选中以外的样式
+                feature_.setStyle(style)
+                if (featureEnd) {
+                  featureEnd.setStyle(style)
+                }
+              }
+            }
+          }
+        }
+      })
+    },
+    clearMap() {
+      let srcIndex = this.imgLayerList.findIndex((e) => {
+        return e.values_.id === this.checkedData.tierId
+      })
+      this.map.removeControl(this.controlList[srcIndex])
+      this.map.removeLayer(this.vectorLayer)
+      this.map.removeLayer(this.lineVectorLayer)
+      // this.map.removeLayer(this.boxVectorLayer)
+      this.map.removeInteraction(this.modify)
+      this.controlList = []
+      this.resolutions = []
+      this.imgLayerList = []
+    },
     mapClick(feature, item, flag) {
       //默认样式
       let style = this.getPointStyle(item.imageSrc + '.png', item.name)
@@ -794,7 +945,7 @@ export default {
       this.changeVectorLayer(this.list)
     },
     initStation(id) {
-      this.clearLayer()
+      // this.clearLayer()
       console.log('22222222222222')
       this.$http({
         url: this.$http.adornUrl(`/liStation/getId/${id}`),
@@ -841,6 +992,10 @@ export default {
             this.initMap()
             this.imgLayerList[0].setVisible(true) //初始第一个显示
           } else {
+            if(id !== ){
+
+            }
+            this.initMap2()
             this.changeVectorLayer(this.list)
           }
           console.log('tierName:', this.checkedData.tierName)
@@ -959,7 +1114,7 @@ export default {
       console.log('选中节点的层级', node)
       if (node.level === 3) {
         //切换根节点
-          this.initStation(id)
+        this.initStation(id)
       } else if (node.level === 4) {
         this.map.removeLayer(this.boxVectorLayer)