up

src/views/bigScreen/home/components/Map/index.vue

@@ -93,7 +93,7 @@ export default {
       this.map = L.map('vmap', {
         crs: L.CRS.Simple, // 一个简单的CRS，可将经度和纬度直接映射到x其中y。可用于平面地图（例如游戏地图）
         minZoom: 0,
-        maxZoom: 1,
+        maxZoom: 2,
         zoom: 1,
         maxBounds: bounds, // 地图拖动到边界后自动弹回
         maxBoundsViscosity: 0.2,
@@ -195,7 +195,7 @@ export default {
           pointToLayer: function(_feature, latlng) {
             const sensorLocationId = _feature.properties.sensorLocationId
             const goafSensorName = _feature.properties.goafSensorName
-            const html = `<div data-layer="${sensorLocationId}-${goafSensorName}" class="goaf-icon-box" style="width:100%;height:100%;position: relative;"></div>`
+            const html = `<div data-layer="${sensorLocationId}-${goafSensorName}" title="${goafSensorName}" class="goaf-icon-box" style="width:100%;height:100%;position: relative;"></div>`
             var icon = L.divIcon({
               html,
               iconSize
@@ -238,6 +238,7 @@ export default {
       return geojson
     },
     showLayerDetail(item) {
+      debugger
       getNewSensorData({
         map: item.mapId,
         goafSensorId: item.goafSensorId
@@ -268,6 +269,11 @@ export default {
   }
 }
 </script>
+<style>
+.leaflet-control-attribution.leaflet-control{
+  display: none;
+}
+</style>
       <style lang="scss" scoped>
       .map-container{
         height: 100%;
@@ -336,53 +342,8 @@ export default {
     background-color: transparent;
     border-color: transparent;
   }
-  .goaf-fill-v{
-      width:100%;
-      position: absolute;
-      bottom: 0;
-      left: 0;
-      background-image: url("./goaf/stone.png");
-      background-size: 7px;
-      &.fill{
-        background-image: url("./goaf/stone.png");
-      }
-  }
-  .goaf-icon-tag{
-    width: 100%;
-    display: inline-block;
-    background: linear-gradient(90deg, #21649c 0.21%, #060F1E 100%);
-    overflow:hidden;
-    text-overflow:ellipsis;
-    white-space:nowrap;
-    color: #fff;
-    text-align: center;
-    z-index: 99999;
-    position: absolute;
-    top: -18px;
+  .layout-map .goaf-icon-box:hover{
+    border: 1px dashed rgb(133, 131, 131);
+    border-radius: 50%;
   }
-  /*动画*/
-.ico-warning {
-  position: relative;
-  &::after{
-    display: block;
-    content: "";
-    height: 60%;
-    width: 60%;
-    background-image: radial-gradient(yellow,red);
-    border-radius: 50% 50% 10% 10%;
-    animation: twinkle 0.5s infinite alternate;
-    position: absolute;
-    transform: translate(-50%,-50%);
-    left: 50%;
-    top: 50%;
-    box-shadow: 0 0 20px red;
-    z-index: 9999;
-  }
-}
-
-@keyframes twinkle {
-    0% {opacity: 0.9;}
-    50% {opacity: 0.5;}
-    100% {opacity: 0;}
-}
 </style>

src/views/bigScreen/home/index.vue

@@ -126,7 +126,7 @@ export default {
 }
 </script>
 <style>
-.leaflet-control-container{
+.leaflet-control-attribution.leaflet-control{
   display: none;
 }
 </style>