add

src/components/map/index.vue

@@ -35,12 +35,12 @@
       </el-checkbox-group>
    </div>
 
-   
+
     <div class='locationDiv' :style="locationStyle" v-show='isShow'>
           <div style="background:blue;height:4rem;width:100%;padding-top:0.8rem;padding-left:0.5rem">
                <span style='color:white;font-size:1.5rem;'>巡检点</span>
           </div>
-          <div style="text-align:center;margin-top:0.5rem"> 
+          <div style="text-align:center;margin-top:0.5rem">
               <img :src='clickObj.imgsrc' style="width:20rem;height:20rem"/>
               <div>{{clickObj.name}}</div>
           </div>
@@ -92,12 +92,12 @@ import Map from "ol/Map";
 import View from "ol/View";
 // import ol from "ol";
 
-// import {getTopLeft, getWidth} from "ol/extent";
+import {getTopLeft, getWidth} from "ol/extent";
 
 // import ImageWMS from "ol/source/ImageWMS";
-// import WMTS from "ol/source/WMTS";
+import WMTS from "ol/source/WMTS";
 // import TileWMS from "ol/source/TileWMS";
-// import WMTSTileGrid from "ol/tilegrid/WMTS";
+import WMTSTileGrid from "ol/tilegrid/WMTS";
 // ol.source.TileImage
 // ol.layer.Tile
 import {get as getProjection, transform} from "ol/proj";
@@ -211,7 +211,7 @@ export default {
             this.getResource();
     }
     this.map.on("click", function (e) {
-      // console.log(event.screenX+','+event.screenY)        
+      // console.log(event.screenX+','+event.screenY)
           //  that.addMarker(e.coordinate,'专家站点.png',0.2);
             var pixel = that.map.getEventPixel(e.originalEvent);
             var feature = that.map.forEachFeatureAtPixel(e.pixel, function (feature, layer) {
@@ -226,7 +226,7 @@ export default {
                     if (tadata.sectionId == "point") {
                          if(tadata.type == 'location'){
 
-                                var event = window.event; 
+                                var event = window.event;
                                 var x = event.screenX/10+5;
                                 var y = event.screenY/10-20;
                                 console.log(x+','+y);
@@ -262,7 +262,7 @@ export default {
                                         crossOrigin: "anonymous",
                                         src: require("../../assets/images/icons/location.png"), //本地的样式
                                         scale:0.6
-          
+
                                 })
                               })
                               tadata.type = 'location'
@@ -275,7 +275,7 @@ export default {
                                         crossOrigin: "anonymous",
                                         src: require("../../assets/images/icons/location2.png"), //本地的样式
                                         scale:0.6
-          
+
                                 })
                               })
                               tadata.data.sortNo = that.lineLocations.length + 1
@@ -356,7 +356,7 @@ export default {
     //                 //含有lnglat 参数的点标记触发事件
     //             }
     //         }
-              
+
     // })
   },
   methods: {
@@ -367,7 +367,7 @@ export default {
              }else if(this.lineLocations[index].sortNo > data.sortNo){
                     this.lineLocations[index].sortNo = this.lineLocations[index].sortNo-1
              }
-        }   
+        }
      },
       loadCkplayer(url){
         url = 'rtmp://39.104.22.45:30498/rtp/34020001001320000001_34020001001320000001'
@@ -401,7 +401,7 @@ export default {
                                     obj.fence = obj.lnglat
                                     obj.name = obj.locationName
                                     selectLocation.push(obj)
-                              }        
+                              }
                     }
                      for(var i in response.data.staticLocation){
                           var obj = response.data.staticLocation[i]
@@ -417,7 +417,7 @@ export default {
                           if(isSelected == 0){
                                  stationLocation.push(obj)
                           }
-                     }                  
+                     }
                     this.addPoints(stationLocation,'location.png',0.6,'location');
                     this.addPoints(selectLocation,'location2.png',0.6,'selected');
                })
@@ -441,7 +441,7 @@ export default {
                     for(var index in data.data){
                          var obj = data.data[index]
                          if(obj.configKey.indexOf('lined') > -1){
-                                var lineLocations ="["+obj.configValue+"]"                            
+                                var lineLocations ="["+obj.configValue+"]"
                                 var json = JSON.parse(lineLocations);
                                 this.addline(json,'nqtl');
                          }else if(obj.configKey.indexOf('lineun') > -1){
@@ -451,10 +451,60 @@ export default {
                          }
 
                     }
-              })   
+              })
          },
+    transpoints: function (points, type) {
+      if (type == 0) {
+        return points;
+      } else {
+        if (type == 1) {
+          var pp = [];
+          points.forEach(point => {
+            pp.push(transform([parseFloat(point[0]),parseFloat(point[1])], "EPSG:3857", "EPSG:4326"));
+          });
+          return pp;
+        } else {
+          var pp = [];
+          points.forEach(point => {
+            pp.push(transform([parseFloat(point[0]),parseFloat(point[1])], "EPSG:4326", "EPSG:3857"));
+          });
+          return pp;
+        }
+      }
+    },
     initdev: function () {
-      var projection = getProjection("EPSG:3857");
+      function getWMTSLayer(url, layer) {
+        let key = "98ec3e37b32974c2d58ea1a790640fe7"
+        let projection = getProjection("EPSG:4326");
+        let projectionExtent = projection.getExtent();
+        let size = getWidth(projectionExtent) / 256;
+
+        function getResolutions() {
+          let resolutions = [];
+          for (let z = 1; z < 19; ++z) {
+            resolutions[z] = size / Math.pow(2, z);
+          }
+          return resolutions
+        }
+
+        return new Tile({
+          source: new WMTS({
+            url: url,
+            layer: layer,
+            style: "default",
+            matrixSet: "c",
+            format: "tiles",
+            tileGrid: new WMTSTileGrid({
+              origin: getTopLeft(projectionExtent),
+              resolutions: getResolutions(),
+              matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19],
+            }),
+          }),
+
+        })
+
+      }
+      var projection = getProjection("EPSG:4326");
         const satellite = new Tile({ // 卫星地图
           visible: false, // 显示或隐藏（用于切换地图图层（卫星切换街道））
           source: new XYZ({
@@ -495,16 +545,30 @@ export default {
   const map = new Map({
     target: 'map',
     layers: [ // 图层放置（类似有卫星图层，街道图层等）
-      satellite,
-      street,
+      // satellite,
+
+
+
+      getWMTSLayer('https://t{0-7}.tianditu.gov.cn/img_c/wmts?tk=98ec3e37b32974c2d58ea1a790640fe7', 'img'),
+       getWMTSLayer('https://t{0-7}.tianditu.gov.cn/cia_c/wmts?tk=98ec3e37b32974c2d58ea1a790640fe7', 'cia'),
+      //  getWMTSLayer('https://gisserver.tianditu.gov.cn/TDTService/wfs?tk=98ec3e37b32974c2d58ea1a790640fe7', 'LRDL'),
+      // satellite,street,
+      //
+
+
       vector
     ],
     view: new View({
-      zoom: 11, // 当前缩放
-      maxZoom: 16, // 最大缩放
-      minZoom: 8, // 最小缩放
-      projection: 'EPSG:4326',
-      center: [121.65523,31.892831], // 中心坐标
+      zoom: 12, // 当前缩放
+      // maxZoom: 16, // 最大缩放
+      // minZoom: 8, // 最小缩放
+      // projection: projection,
+            projection: 'EPSG:4326',
+
+      // center:  this.transpoints([
+      //   [121.65523,31.892831]
+      // ], 0)[0], // 中心坐标
+      center:[121.65523,31.892831]
     })
   })
 
@@ -563,11 +627,12 @@ export default {
 
       },
       addMarker(lnglats,icon,size,id,data,type) {
+
             let tamarker = new Feature({
                 tadata: {
                     sectionId: "point",
                     towerNumber: 22,
-                    data: data,
+                    data: data ,
                     type: type
                 }, //这里是用来传值用的，在接下来的一章里（事件）中我会讲到。
                 geometry: new Point(lnglats) //这里是点坐标的位置，这里要注意fromLonLat
@@ -592,19 +657,23 @@ export default {
             this.map.addLayer(markerta); //这里是执行，执行之后点就出来了
       },
       addPoints(data,icon,size,type){
+
+
         var tamarkerArry =[]
         let tamarker = null
         for(var index in data){
           if(type === 'video'){
+
                  tamarker = new Feature({
                     tadata: {
                         sectionId: "point",
                         towerNumber: 22,
-                        data:data[index],
+                        data: data[index],
                         type:type
                     }, //这里是用来传值用的，在接下来的一章里（事件）中我会讲到。
                     geometry: new Point([data[index].longitude, data[index].latitude]) //这里是点坐标的位置，这里要注意fromLonLat
                 });
+
           }else {
                  tamarker = new Feature({
                     tadata: {
@@ -638,7 +707,7 @@ export default {
                 source: new SourceVec({
                     features: tamarkerArry //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
                 }),
-                zIndex:30
+                zIndex:300
             });
 //             markerta.on('mouseover', markerta, function(evt) {
 //                     console.log(evt);
@@ -674,7 +743,7 @@ export default {
                 },
                 geometry: new LineString(lnglats)
             }); //这里要注意写fromLonLat，很重要
-            
+
             var style =this.getStyle(type);
 
             line.setStyle(style);
@@ -747,7 +816,7 @@ export default {
           window.cameraid = this.ccode;
           startPreview(window.cameraid,-1);
         },
-        handleChange(value){  
+        handleChange(value){
             for(var key in this.mapHashMap){
                  this.mapHashMap[key].setVisible(false)
             }

src/views/qdtl/line/index.vue

@@ -377,7 +377,7 @@ export default {
     },
     tableRowClassName({ row, rowIndex }) {
         if ((rowIndex + 1) % 2 === 0) {
-             return "warning-row"; 
+             return "warning-row";
         } else {
              return "success-row";
         }
@@ -411,7 +411,7 @@ export default {
       // getLine(id).then(response => {
         // console.log(response)
         this.form = row;
-        this.locationsList = row.locations
+        this.locationsList = row.locations ?? []
         this.open = true;
         this.title = "修改巡检线路管理";
       // });
@@ -464,22 +464,22 @@ export default {
           for(var index in this.locationsList){
                if(this.locationsList[index].sortNo == data.sortNo-1){
                         this.locationsList[index].sortNo = data.sortNo
-               }     
+               }
         }
         data.sortNo =  data.sortNo-1;
-        this.locationsList.sort(function(a, b){return a.sortNo - b.sortNo}); 
+        this.locationsList.sort(function(a, b){return a.sortNo - b.sortNo});
       }
-        
+
     },
     handleDown(data){
         if(data.sortNo < this.locationsList){
            for(var index in this.locationsList){
                if(this.locationsList[index].sortNo == data.sortNo+1){
                         this.locationsList[index].sortNo = data.sortNo
-               }     
+               }
               }
               data.sortNo =  data.sortNo+1;
-              this.locationsList.sort(function(a, b){return a.sortNo - b.sortNo}); 
+              this.locationsList.sort(function(a, b){return a.sortNo - b.sortNo});
               }
     },
      locationDelete(data){
@@ -489,7 +489,7 @@ export default {
              }else if(this.locationsList[index].sortNo > data.sortNo){
                     this.selectUserList[index].sortNo = this.selectUserList[index].sortNo-1
              }
-        }   
+        }
     },
   }
 };