地图事件

ruoyi-ui/src/components/map/index.vue

@@ -9,9 +9,15 @@ import TileLayer from "ol/layer/Tile";
 import View from "ol/View";
 import WMTS from "ol/source/WMTS";
 import WMTSTileGrid from "ol/tilegrid/WMTS";
-import { fromLonLat, get as getProjection } from "ol/proj";
+import { fromLonLat, get as getProjection, transform } from "ol/proj";
 import { getWidth } from "ol/extent";
 
+import { Vector as SourceVec, OSM } from "ol/source";
+import { Feature } from "ol";
+import { Point,LineString } from "ol/geom";
+import { Style, Icon,Stroke } from "ol/style";
+import { Vector as LayerVec } from "ol/layer";
+
 export default {
   props: {
     src: {
@@ -21,19 +27,62 @@ export default {
   },
   data() {
     return {
-      map: null
+      map: null,
+      drawLayer: null,
+      draw: null
     };
   },
   mounted() {
-    if(process.env.NODE_ENV === "production"){
-        this.initprod();
-    }else{
-       this.initdev();
+    var that = this;
+    if (process.env.NODE_ENV === "production") {
+      this.initprod();
+    } else {
+      this.initdev();
     }
 
+    this.map.on("click", function(e) {
+      var feature = that.map.forEachFeatureAtPixel(e.pixel,
+          function(feature) {
+            return feature;
+          });
+        if (feature) { //这里说明我们点击的是点标记，
+          let tadata = feature.get("tadata");//我们可以通过给点标记传不同的值，来判断点击不同的点标记触发的事件。
+           if (tadata) {
+             if(tadata.sectionId=="line"){
+               alert("我是线："+tadata.towerNumber)
+             }
+             if(tadata.sectionId=="point"){
+               alert("我是点："+tadata.towerNumber)
+             }
+          //含有lnglat 参数的点标记触发事件
+          }
+        }
+    });
 
+    this.addpoint();
+    this.addline();
   },
   methods: {
+    //[[1111,1111]]
+    transpoints: function(points, type) {
+      if (process.env.NODE_ENV === "production") {
+        return points;
+      } else {
+        if (type == 1) {
+          var pp = [];
+          points.forEach(point => {
+            pp.push(transform(point, "EPSG:3857", "EPSG:4326"));
+          });
+          return pp;
+        } else {
+          var pp = [];
+          points.forEach(point => {
+            pp.push(transform(point, "EPSG:4326", "EPSG:3857"));
+          });
+          return pp;
+        }
+      }
+    },
     initdev: function() {
       const proj3857 = getProjection("EPSG:3857");
       const tileGrid = new WMTSTileGrid({
@@ -87,19 +136,67 @@ export default {
           ],
           map.getSize()
         );
+      this.map = map;
     },
     initprod: function() {
       const proj3857 = getProjection("EPSG:4326");
       const tileGrid = new WMTSTileGrid({
         tileSize: [256, 256],
         origin: [-180.0, 90.0],
-        extent: [-180.0,-90.0,180.0,90.0],
-        resolutions: [0.703125, 0.3515625, 0.17578125, 0.087890625, 0.0439453125, 0.02197265625, 0.010986328125, 0.0054931640625, 0.00274658203125, 0.001373291015625, 6.866455078125E-4, 3.4332275390625E-4, 1.71661376953125E-4, 8.58306884765625E-5, 4.291534423828125E-5, 2.1457672119140625E-5, 1.0728836059570312E-5, 5.364418029785156E-6, 2.682209014892578E-6, 1.341104507446289E-6, 6.705522537231445E-7, 3.3527612686157227E-7],
-        matrixIds: ['EPSG:4326:0', 'EPSG:4326:1', 'EPSG:4326:2', 'EPSG:4326:3', 'EPSG:4326:4', 'EPSG:4326:5', 'EPSG:4326:6', 'EPSG:4326:7', 'EPSG:4326:8', 'EPSG:4326:9', 'EPSG:4326:10', 'EPSG:4326:11', 'EPSG:4326:12', 'EPSG:4326:13', 'EPSG:4326:14', 'EPSG:4326:15', 'EPSG:4326:16', 'EPSG:4326:17', 'EPSG:4326:18', 'EPSG:4326:19', 'EPSG:4326:20', 'EPSG:4326:21']
+        extent: [-180.0, -90.0, 180.0, 90.0],
+        resolutions: [
+          0.703125,
+          0.3515625,
+          0.17578125,
+          0.087890625,
+          0.0439453125,
+          0.02197265625,
+          0.010986328125,
+          0.0054931640625,
+          0.00274658203125,
+          0.001373291015625,
+          6.866455078125e-4,
+          3.4332275390625e-4,
+          1.71661376953125e-4,
+          8.58306884765625e-5,
+          4.291534423828125e-5,
+          2.1457672119140625e-5,
+          1.0728836059570312e-5,
+          5.364418029785156e-6,
+          2.682209014892578e-6,
+          1.341104507446289e-6,
+          6.705522537231445e-7,
+          3.3527612686157227e-7
+        ],
+        matrixIds: [
+          "EPSG:4326:0",
+          "EPSG:4326:1",
+          "EPSG:4326:2",
+          "EPSG:4326:3",
+          "EPSG:4326:4",
+          "EPSG:4326:5",
+          "EPSG:4326:6",
+          "EPSG:4326:7",
+          "EPSG:4326:8",
+          "EPSG:4326:9",
+          "EPSG:4326:10",
+          "EPSG:4326:11",
+          "EPSG:4326:12",
+          "EPSG:4326:13",
+          "EPSG:4326:14",
+          "EPSG:4326:15",
+          "EPSG:4326:16",
+          "EPSG:4326:17",
+          "EPSG:4326:18",
+          "EPSG:4326:19",
+          "EPSG:4326:20",
+          "EPSG:4326:21"
+        ]
       });
 
       const ign_source = new WMTS({
-        url: "http://198.17.1.146:9999/geoserver/gwc/service/wmts?CJAUTH=CJUSER",
+        url:
+          "http://198.17.1.146:9999/geoserver/gwc/service/wmts?CJAUTH=CJUSER",
         layer: "CJ:G_CJ",
         matrixSet: "EPSG:4326",
         format: "image/png",
@@ -118,12 +215,60 @@ export default {
           zoom: 10
         })
       });
-      map
-        .getView()
-        .fit(
-          [75.0,20.0,135.0,50.0],
-          map.getSize()
-        );
+      map.getView().fit([75.0, 20.0, 135.0, 50.0], map.getSize());
+      this.map = map;
+    },
+
+    addline:function(){
+
+      var points = this.transpoints([[118.78, 32.04],[118.88, 32.14]], 0)
+
+      let line= new Feature({
+        tadata: {
+          sectionId: "line",
+          towerNumber: 22
+        },
+        geometry:new LineString(points)});//这里要注意写fromLonLat，很重要
+      line.setStyle(new Style({
+             stroke: new Stroke({
+              width: 3,
+               color: "#008000"
+             })
+       }));
+        this.linevectorLayer = new LayerVec({
+            source: new SourceVec({
+              features: [line] //要绘制多段线，直接push到这里面就行了
+            })
+          });
+          this.map.addLayer(this.linevectorLayer);//这里是执行，执行之后点就出来了
+
+    },
+
+    addpoint: function() {
+      var lnglat = this.transpoints([[118.78, 32.04]], 0)[0];
+
+      let tamarker = new Feature({
+        tadata: {
+          sectionId: "point",
+          towerNumber: 22
+        }, //这里是用来传值用的，在接下来的一章里（事件）中我会讲到。
+        geometry: new Point(lnglat) //这里是点坐标的位置，这里要注意fromLonLat
+      });
+      tamarker.setStyle(
+        new Style({
+          image: new Icon({
+            color: "#eee",
+            crossOrigin: "anonymous",
+            src: require("../../assets/images/icon/qiaoliang_1@2x.png") //本地的样式
+          })
+        })
+      ); //这里是样式
+      var markerta = new LayerVec({
+        source: new SourceVec({
+          features: [tamarker] //这里放的就是之前的那个点，如果要放置多个点直接push到这里面就行了
+        })
+      });
+      this.map.addLayer(markerta); //这里是执行，执行之后点就出来了
     }
   }
 };