切换底图组件

src/components/static_map_change/Layers.js

@@ -12,7 +12,20 @@ import {unByKey} from 'ol/Observable';
 import ImageLayer from 'ol/layer/Image';
 import ImageStatic from 'ol/source/ImageStatic';
 import XYZLayer from "../../utils/ol-map/XYZLayer";
+import GeoJsonLayer from "../../utils/ol-map/GeoJsonLayer";
 import eventBus from "@/api/eventBus";
+import {VectorStyle} from "../../utils/ol-map/KMap";
+import StaticImgLayer from "../../utils/ol-map/StaticImgLayer";
+
+function getColorByVal(val, legendData) {
+    for (let i = 0; i < legendData.level.length; i++) {
+        let [min, max] = legendData.level[i];
+        if (val >= min && val <= max) {
+            return legendData.colors[i];
+        }
+    }
+    return undefined; // 如果 val 不在任何区间内，返回 undefined
+}
 
 /**
  * @description 全景化地图层对象
@@ -20,7 +33,9 @@ import eventBus from "@/api/eventBus";
 class StaticMapLayers {
     constructor(map){
         this.initStaticMapLayers(map)
+        this.vectorStyle = new VectorStyle()
         this.layerData = {}
+        this.cacheStyle = {}
     }
     initStaticMapLayers(map){
         let that = this
@@ -32,6 +47,10 @@ class StaticMapLayers {
                 let item = data[key]
                 if(item.type === "xyz"){
                     that.layerData[key] = {legend:item.legend, layer:that.addXyzLayer(map, item)}
+                }else if(item.type === "geojson"){
+                    that.layerData[key] = {legend:item.legend, legendData:item.legendData, layer:that.addGeoJsonLayer(map, item, key)}
+                }else if(item.type === "img"){
+                    that.layerData[key] = {legend:item.legend, layer:that.addStaticImgLayer(map, item)}
                 }
             }
             // that.autoTest()
@@ -50,12 +69,40 @@ class StaticMapLayers {
         }
     }
 
+    addStaticImgLayer(map, item){
+        let imgLayer = new StaticImgLayer(item.url, item, 3, map);
+        imgLayer.hide()
+        return imgLayer
+    }
+
     addXyzLayer(map, item){
         let xyz = new XYZLayer(item.url, item, 3, map);
         xyz.hide()
         return xyz
     }
 
+    addGeoJsonLayer(map, item, key){
+        let that = this
+        item["style"] = function(feature){
+            let val = feature.get(item.legendData.paramKey)
+            let cacheKey = `${key}_${item.legendData.paramKey}_${val}`
+            let style = that.cacheStyle[cacheKey]
+            if(!style){
+                let color = getColorByVal(val, item.legendData)
+                let fillColor = color
+                let strokeColor = color
+                style = that.vectorStyle.getPolygonStyle(fillColor, strokeColor, 1)
+                that.cacheStyle[cacheKey] = style
+            }
+            return style
+        }
+        let geoJsonLayer = new GeoJsonLayer(item.url, item, 3, map);
+        geoJsonLayer.hide()
+        return geoJsonLayer
+    }
+
+
+
     autoTest(){
         let that = this
         let keys = []

src/utils/ol-map/GeoJsonLayer.js

@@ -0,0 +1,113 @@
+
+import LTBaseObject from './KBaseObject'
+import XYZ from 'ol/source/XYZ'
+import Tile from 'ol/layer/Tile'
+import Common from './Common'
+import {GeoJSON} from "ol/format";
+import VectorSource from "ol/source/Vector.js";
+import VectorLayer from "ol/layer/Vector.js";
+/**
+ * @description LTMap.GeoJsonLayer GeoJsonLayer图层类
+*/
+class GeoJsonLayer extends LTBaseObject{
+	/**
+	 * @description 构造函数
+	 * @param {String} url XYZ图层服务地址
+	 * @param {LTMap.Map} [mapInstance=null] map对象，单地图的时候可不传，多地图时候需要传
+	 * @memberof XYZLayer
+	 */
+	constructor(url,options,zIndex,mapInstance = null){
+    super(mapInstance)
+		const vm = this
+		vm.initGeoJsonLayer(url,options,zIndex)
+  }
+	/**
+	 * @description 切片加载XYZ图层
+	 * @param {*} url
+	 * @param {*} layerName
+	 * @memberof XYZLayer
+	 */
+	 initGeoJsonLayer(url,options,zIndex){
+		var minZoom = Common.BaseLayerZoom[0];
+		var maxZoom = Common.BaseLayerZoom[1];
+		if(options && options.minZoom != undefined){
+			minZoom = options.minZoom
+		}
+		if(options && options.maxZoom != undefined){
+			maxZoom = options.maxZoom
+		}
+		const vm = this
+		vm.source = new VectorSource({
+			url, // 替换为你的GeoJSON文件URL
+			format: new GeoJSON()
+		});
+
+		vm.layer = new VectorLayer({
+			source:vm.source,
+			maxZoom:maxZoom,
+			minZoom:minZoom,
+			zIndex:zIndex,
+			style:options.style
+		})
+
+		vm.map.addLayer(vm.layer)
+	}
+	setProperty(properties){
+		const vm = this;
+		vm.properties = properties;
+	}
+	getProperty(){
+		const vm = this;
+		return vm.properties?vm.properties:null;
+	}
+  /**
+	* @description 添加XYZ图层到地图
+	* @memberof XYZLayer
+	*/
+  add(){
+		const vm = this
+		if(!vm.state) {
+			vm.map.addLayer(vm.layer)
+			vm.state = true
+		}
+	}
+
+	/**
+	 * @description 从当前地图中移除XYZ图层
+	 * @memberof XYZLayer
+	 */
+	remove() {
+		const vm = this
+		if(vm.state) {
+			vm.map.removeLayer(vm.layer)
+			vm.state = false
+		}
+	}
+
+	/**
+	 * @description 显示XYZ图层数据
+	 * @memberof XYZLayer
+	 */
+	show(){
+		const vm = this
+		vm.layer.setVisible(true)
+	}
+
+	/**
+	 * @description 隐藏XYZ图层数据
+	 * @memberof XYZLayer
+	 */
+	hide(){
+		const vm = this
+		vm.layer.setVisible(false)
+	}
+
+	/**
+	 * @description 缩放到过滤后的地图要素对应范围
+	 * @memberof XYZLayer
+	 */
+	zoomTo() {
+    const vm = this
+	}
+}
+export default GeoJsonLayer

src/utils/ol-map/StaticImgLayer.js

@@ -0,0 +1,112 @@
+
+import LTBaseObject from './KBaseObject'
+import XYZ from 'ol/source/XYZ'
+import Tile from 'ol/layer/Tile'
+import Common from './Common'
+import {GeoJSON} from "ol/format";
+import VectorSource from "ol/source/Vector.js";
+import VectorLayer from "ol/layer/Vector.js";
+import Static from "ol/source/ImageStatic";
+import ImageLayer from "ol/layer/Image";
+/**
+ * @description LTMap.GeoJsonLayer GeoJsonLayer图层类
+*/
+class StaticImgLayer extends LTBaseObject{
+	/**
+	 * @description 构造函数
+	 * @param {String} url XYZ图层服务地址
+	 * @param {LTMap.Map} [mapInstance=null] map对象，单地图的时候可不传，多地图时候需要传
+	 * @memberof XYZLayer
+	 */
+	constructor(url,options,zIndex,mapInstance = null){
+    super(mapInstance)
+		const vm = this
+		vm.initStaticImgLayer(url,options,zIndex)
+  }
+	/**
+	 * @description 初始化静态图片图层
+	 */
+	initStaticImgLayer(url,options,zIndex){
+		var minZoom = Common.BaseLayerZoom[0];
+		var maxZoom = Common.BaseLayerZoom[1];
+		if(options && options.minZoom != undefined){
+			minZoom = options.minZoom
+		}
+		if(options && options.maxZoom != undefined){
+			maxZoom = options.maxZoom
+		}
+		const vm = this
+		vm.source = new Static({
+			url, // 替换为你的GeoJSON文件URL
+			projection: 'EPSG:4326',
+			imageExtent: options.extent,
+		});
+
+		vm.layer = new ImageLayer({
+			source:vm.source,
+			maxZoom:maxZoom,
+			minZoom:minZoom,
+			zIndex:zIndex,
+		})
+
+		vm.map.addLayer(vm.layer)
+	}
+	setProperty(properties){
+		const vm = this;
+		vm.properties = properties;
+	}
+	getProperty(){
+		const vm = this;
+		return vm.properties?vm.properties:null;
+	}
+  /**
+	* @description 添加XYZ图层到地图
+	* @memberof XYZLayer
+	*/
+  add(){
+		const vm = this
+		if(!vm.state) {
+			vm.map.addLayer(vm.layer)
+			vm.state = true
+		}
+	}
+
+	/**
+	 * @description 从当前地图中移除XYZ图层
+	 * @memberof XYZLayer
+	 */
+	remove() {
+		const vm = this
+		if(vm.state) {
+			vm.map.removeLayer(vm.layer)
+			vm.state = false
+		}
+	}
+
+	/**
+	 * @description 显示XYZ图层数据
+	 * @memberof XYZLayer
+	 */
+	show(){
+		const vm = this
+		vm.layer.setVisible(true)
+	}
+
+	/**
+	 * @description 隐藏XYZ图层数据
+	 * @memberof XYZLayer
+	 */
+	hide(){
+		const vm = this
+		vm.layer.setVisible(false)
+	}
+
+	/**
+	 * @description 缩放到过滤后的地图要素对应范围
+	 * @memberof XYZLayer
+	 */
+	zoomTo() {
+    const vm = this
+	}
+}
+export default StaticImgLayer