触摸弹窗

public/index.html

@@ -202,6 +202,9 @@
     <script src="./html/jsencrypt.min.js"></script>
     <!-- 用于RSA加密 -->
     <script src="./html/jsWebControl-1.0.0.min.js"></script>
+    <!-- <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> -->
+    <link rel="stylesheet" href="./html/bootstrap.min.css">
+    <script src="./html/bootstrap.bundle.min.js"></script>
     <!-- 用于前端与插件交互 -->
 
     <script type="text/javascript">

src/components/map/index.vue

@@ -1,7 +1,8 @@
 <template>
 <div style="width:100%;height:100%">
   <div style="width:100%;height:100%">
-    <div id="map" ref="rootmap"></div>
+    <div id="map" ref="rootmap"><div id="popup"></div></div>
+     <div id="textInfo">我是text文本信息</div>
   </div>
 
   <div class="iconSelect" v-if="iconSelect == 1">
@@ -76,6 +77,7 @@ import {TileImage} from "ol/source/TileImage";
 import {XYZ, Vector as SourceVec} from "ol/source";
 import {Tile,Vector as LayerVec} from "ol/layer";
 import { Polygon } from "ol/geom"
+import Overlay from 'ol/Overlay';
 
 import {Circle as CircleStyle, Fill, Stroke, Style, Icon, Text } from 'ol/style';
 import {Draw, Modify, Snap} from 'ol/interaction';
@@ -92,6 +94,7 @@ import videodiv from "@/components/Videoplayer/index.vue"
 import {LineString, Point} from "ol/geom";
 import { scale } from 'ol/coordinate';
 import { getLineData } from "@/api/qdtl/data";
+import {toStringHDMS} from 'ol/coordinate';
 // import {Icon, Stroke, Style} from "ol/style";
 // import {Vector as LayerVec} from "ol/layer";
 
@@ -137,6 +140,8 @@ export default {
             wrj:require('../../assets/images/icons/wrj.png'),
             yxjl:require('../../assets/images/icons/yxjl.png'),
       },
+      popup:null,
+      element:null
     };
   },
    components:{
@@ -163,9 +168,6 @@ export default {
     this.getLineList();
     window.videosize = "1x1";
     // this.addpoint(point);
-
-
-
     var that = this
     this.map.on("click", function (e) {
           //  that.addMarker(e.coordinate,'专家站点.png',0.2);
@@ -180,12 +182,14 @@ export default {
                         // alert("我是线：" + tadata.towerNumber)
                     }
                     if (tadata.sectionId == "point") {
-                         that.ccode = tadata.data.cameraIndexCode
-                         window.cameraid = that.ccode;
-                         that.dialogVisible = true
-                         setTimeout(() => {
-                           that.handleOpen()
-                         }, 1000);
+                         if(tadata.type == 'video'){
+                               that.ccode = tadata.data.cameraIndexCode
+                                window.cameraid = that.ccode;
+                                that.dialogVisible = true
+                                setTimeout(() => {
+                                  that.handleOpen()
+                                }, 1000);
+                         }
                     }
                     //含有lnglat 参数的点标记触发事件
                 }
@@ -204,23 +208,58 @@ export default {
     this.map.on('moveend', function (e) {
     });
 
-    this.map.on('pointermove', function(e) {
-            // var pixel=this.map.getEventPixel(e.originalEvent);
-            // var feature=this.map.forEachFeatureAtPixel(pixel,
-            //     function (feature) {
-            //         return feature;
-            //     },
-            //    {hitTolerance:10}
-            // ) 
-            // if(feature === undefined){
-            //     this.map.getTargetElement().style.cursor="auto"
-            // }else{
-            //     this.map.getTargetElement().style.cursor="pointer"
-            // }
-        });
-
+    this.map.on('pointermove', function (evt) {
+          if (evt.dragging) {
+            return;
+          }
+          const pixel = that.map.getEventPixel(evt.originalEvent);
+          var feature = that.map.forEachFeatureAtPixel(evt.pixel, function (feature, layer) {
+                return feature;
+              });
+           if (feature) { //这里说明我们点击的是点标记，
+                let tadata = feature.get("tadata"); //我们可以通过给点标记传不同的值，来判断点击不同的点标记触发的事件。
+                if (tadata) {
+                    if (tadata.sectionId == "line") {
+                        // alert("我是线：" + tadata.towerNumber)
+                    }
+                    if (tadata.sectionId == "point") {
+                        //  that.addText(evt.coordinate);
+                      console.log(tadata);
+                           that.popup.setPosition(evt.coordinate);
+                          $(that.element).popover({
+                            placement: 'top',
+                            html: true,
+                            content: tadata.data.name,
+                          });
+                          $(that.element).popover('show');
+                        // } else {
+                        //   $(element).popover('dispose');
+                        // }
+                                          // popup = new OpenLayers.Popup.FramedCloud("Popup",
+                    //     new OpenLayers.LonLat(5.6, 50.6),
+                    //     null,
+                    //     '<div>Hello World! Put your html here</div>',
+                    //     null,
+                    //     false);
+                    // this.map.addPopup(popup);
+                    }else{
+                       $(that.element).popover('dispose');
+                    }
+                    //含有lnglat 参数的点标记触发事件
+                }
+            }
+              
+    })
   },
   methods: {
+       addText(location) {
+            var textInfo = new Overlay({
+                position: fromLonLat(location),
+                offset: [20, -20],
+                element: document.getElementById("textInfo")
+            });
+            this.map.addOverlay(textInfo);
+        },
          getTrain(){
            var trainArry = [[121.645366,31.856052],[121.636002,32.02354],[121.530258,32.086391]];
            for(var index in trainArry){
@@ -246,41 +285,41 @@ export default {
          },
     initdev: function () {
       var projection = getProjection("EPSG:3857");
-   const satellite = new Tile({ // 卫星地图
-    visible: false, // 显示或隐藏（用于切换地图图层（卫星切换街道））
-    source: new XYZ({
-      attributions: '',
-      url: 'https://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}&scl=1&ltype=10'
-    })
-  })
-  const street = new Tile({ // 街道地图
-    visible: true, // 显示或隐藏（用于切换地图图层（卫星切换街道））
-    source: new XYZ({
-      attributions: '',
-      url: 'https://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
-    })
-  })
-
-this.source = new SourceVec();
-const vector = new LayerVec({
-  source: this.source,
-  style: new Style({
-    fill: new Fill({
-      color: 'rgba(255, 255, 255, 0.2)',
-    }),
-    stroke: new Stroke({
-      color: '#ffcc33',
-      width: 2,
-    }),
-    image: new CircleStyle({
-      radius: 7,
-      fill: new Fill({
-        color: '#ffcc33',
-      }),
-    }),
-  }),
-});
-  this.vector = vector;
+        const satellite = new Tile({ // 卫星地图
+          visible: false, // 显示或隐藏（用于切换地图图层（卫星切换街道））
+          source: new XYZ({
+            attributions: '',
+            url: 'https://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}&scl=1&ltype=10'
+          })
+        })
+        const street = new Tile({ // 街道地图
+          visible: true, // 显示或隐藏（用于切换地图图层（卫星切换街道））
+          source: new XYZ({
+            attributions: '',
+            url: 'https://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
+          })
+        })
+
+      this.source = new SourceVec();
+      const vector = new LayerVec({
+        source: this.source,
+        style: new Style({
+          fill: new Fill({
+            color: 'rgba(255, 255, 255, 0.2)',
+          }),
+          stroke: new Stroke({
+            color: '#ffcc33',
+            width: 2,
+          }),
+          image: new CircleStyle({
+            radius: 7,
+            fill: new Fill({
+              color: '#ffcc33',
+            }),
+          }),
+        }),
+      });
+        this.vector = vector;
 
   // 创建地图
   const map = new Map({
@@ -309,6 +348,13 @@ const vector = new LayerVec({
            this.addInteractions();
       }
       var that = this;
+       this.element = document.getElementById('popup');
+        this.popup = new Overlay({
+          element: this.element,
+          positioning: 'bottom-center',
+          stopEvent: false,
+        });
+        this.map.addOverlay(this.popup);
     },
     addInteractions() {
       var that = this
@@ -424,6 +470,18 @@ const vector = new LayerVec({
                 }),
                 zIndex:30
             });
+//             markerta.on('mouseover', markerta, function(evt) {
+//                     console.log(evt);
+//                     popup = new OpenLayers.Popup.FramedCloud("Popup",
+//                         new OpenLayers.LonLat(5.6, 50.6),
+//                         null,
+//                         '<div>Hello World! Put your html here</div>',
+//                         null,
+//                         false);
+//                     this.map.addPopup(popup);
+//                 });
+// //here add mouseout event
+//            markerta.on('mouseout', markerta, function(evt) {popup.hide();});
             // this.pointArry.set(id,markerta);
             this.map.addLayer(markerta); //这里是执行，执行之后点就出来了
             markerta.setVisible(false);

src/views/bigscreen/index.vue

@@ -69,7 +69,6 @@ export default {
          },
          getResource(){
                getResource({date:'2022-03-12'}).then(response =>{
-                     console.log(response.data);
                      var trainArry = [];
                      var bridgeArry = [];
                      var railArry = [];
@@ -78,6 +77,7 @@ export default {
                      for(var index in response.data.staticLocation){
                           var obj = response.data.staticLocation[index]
                           obj.fence = obj.lnglat
+                          obj.name = obj.locationName
                           stationLocation.push(obj)
                      }
                      for(var index in response.data.area){
@@ -85,17 +85,18 @@ export default {
                          if(obj.areaType == '1'){
                               areaList.push(obj);
                          }else if(obj.areaType == '2'){
+                             obj.name = obj.areaName
                              trainArry.push(obj);
                          }else if(obj.areaType == '3'){
+                             obj.name = obj.areaName
                              bridgeArry.push(obj);
                          }else if(obj.areaType == '4'){
+                             obj.name = obj.areaName
                              railArry.push(obj);   
                          }
                      }
                      for(var index in areaList){
-                             console.log(areaList[index].fence);
                              var json = JSON.parse(areaList[index].fence)
-                             console.log(json);
                              this.$refs.mapdiv.addPolygon(json);
                      }
                      for(var key in response.data.deviceTrail){
@@ -111,7 +112,6 @@ export default {
                               //  deviceArry.push(obj.fence.split(','));
                              }
                               jsonStr += ']'
-                              console.log(jsonStr);
                               var json = JSON.parse(jsonStr);
                              this.$refs.mapdiv.addPoints(response.data.deviceTrail[key],'device.png',0.6,'device');
                              this.$refs.mapdiv.addline(json,'device');
@@ -123,10 +123,8 @@ export default {
                })
          },
          getvideoList(){
-                  console.log(1111);
                   httpRequest(this.videoParams).then(data =>{
                         var json = JSON.parse(data.data);
-                        console.log(json);
                          this.$refs.mapdiv.addPoints(json.data.list,'video.png',0.6,'video');
                   });