切换底图组件

src/components/static_map_change/Layers.js

@@ -59,10 +59,16 @@ class StaticMapLayers {
     show(key,isFit = false){
         this.hideAll()
         let layer = this.layerData[key].layer
-        eventBus.emit("alarmList:changeMapLayer", {legendUrl:this.layerData[key].legend, colors:layer.layer.get("colors")});
+        eventBus.emit("alarmList:changeMapLayer", {legendUrl:this.layerData[key].legend,
+            colors:layer.layer.get("colors"), labels:layer.layer.get("labels")});
         layer.show()
-        if(isFit && layer.source.getExtent && layer.source.getExtent())
-            layer.mapInstance.fit(layer.source.getExtent(),{padding:[100,100,100,100]})
+        if(isFit && layer.layer.getExtent){
+            let extent = layer.layer.getExtent();
+            if(extent && extent[0] != Infinity){
+                console.log("show layer",extent)
+                layer.mapInstance.fit(extent,{padding:[100,100,100,100]})
+            }
+        }
     }
     hideAll(){
         for(let key in this.layerData){
@@ -100,6 +106,7 @@ class StaticMapLayers {
         }
         let geoJsonLayer = new GeoJsonLayer(item.url, item, 3, map);
         geoJsonLayer.layer.set("colors", item.legendData.colors)
+        geoJsonLayer.layer.set("labels", item.legendData.label)
         geoJsonLayer.hide()
         return geoJsonLayer
     }

src/components/static_map_change/legend.vue

@@ -1,5 +1,5 @@
 <template>
-  <div>
+  <div class="map-legend">
     <img v-if="legendImg" :src="legendImg" />
     <template v-else >
       <div class="color-bar" v-if="background"  :style="{ background: background }"></div>
@@ -35,7 +35,7 @@ function gradientListener() {
 
 }
 
-function updateColors({colors,name, legendUrl}) {
+function updateColors({colors,labels,name, legendUrl}) {
   if(legendUrl){
     legendImg.value = legendUrl
     return
@@ -44,7 +44,7 @@ function updateColors({colors,name, legendUrl}) {
   if(colors === undefined || colors.length === 0) return;
   colorsRef.value = colors;
   levels.value = colors.map((color, index) => {
-    return index + 1;
+    return labels[index];
   });
   gradientListener()
 }
@@ -56,12 +56,11 @@ eventBus.on("alarmList:changeMapLayer", updateColors)
 <style lang="scss" scoped>
 
 .map-legend {
-  position: absolute;
-  bottom: -33px;
-  left: -455px;
+  position: fixed;
+  bottom: 150px;
+  right: 550px;
   width: 340px;
   img {
-    width: 340px;
     opacity: 0.6;
   }
 }

src/utils/ol-map/GeoJsonLayer.js

@@ -47,7 +47,8 @@ class GeoJsonLayer extends LTBaseObject{
 			maxZoom:maxZoom,
 			minZoom:minZoom,
 			zIndex:zIndex,
-			style:options.style
+			style:options.style,
+			extent:options.extent || [Infinity, -Infinity, -Infinity, Infinity]
 		})
 
 		vm.map.addLayer(vm.layer)