粤政图调整

src/utils/olMap/olMap.ts

@@ -26,17 +26,22 @@ import axios from 'axios';
 import { fromExtent } from 'ol/geom/Polygon';
 import { LinearRing, Polygon } from 'ol/geom';
 import { Tile } from 'ol';
+import {Graticule} from "ol/layer";
 // import olPlot from 'ol-plot';
 // import { activate } from '../ol-plot/ol-plot'
 
-proj4.defs('EPSG:4490', '+proj=longlat +ellps=GRS80 +no_defs +type=crs');
-proj4.defs('EPSG:4525', '+proj=tmerc +lat_0=0 +lon_0=111 +k=1 +x_0=37500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs');
-register(proj4);
 const commonUrl = import.meta.env.VITE_APP_BASE_API2 + 'api/oneShare/proxyHandler/gd/';
+// proj4.defs('EPSG:4490', '+proj=longlat +ellps=GRS80 +no_defs +type=crs');
+proj4.defs('EPSG:4490', 'GEOGCS["China Geodetic Coordinate System 2000",DATUM["China_2000",SPHEROID["CGCS2000",6378137,298.257222101,AUTHORITY["EPSG","1024"]],AUTHORITY["EPSG","1043"]],PRIMEM["Greenwich",0,AUTHORITY["EPSG","8901"]],UNIT["degree",0.0174532925199433,AUTHORITY["EPSG","9122"]],AUTHORITY["EPSG","4490"]]');
+// proj4.defs('EPSG:4525', '+proj=tmerc +lat_0=0 +lon_0=111 +k=1 +x_0=37500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs');
+register(proj4);
 const projection = new Projection({
   code: 'EPSG:4490',
-  units: 'degrees'
+  units: 'degrees',
+  axisOrientation: 'neu'
 });
+projection.setExtent([-180, -90, 180, 90])
+projection.setWorldExtent([-180, -90, 180, 90])
 const projectionExtent = [-180, -90, 180, 90];
 const size = getWidth(projectionExtent) / 256;
 const resolutions = [];
@@ -84,7 +89,7 @@ export class olMap {
     });
     // 初始化比例尺
     if (options.showScale) {
-      // map.addControl(new AMap.Scale());
+      // this.map.addControl(new AMap.Scale());
     }
     if (options.drawTool?.use) {
       this.initMouseTool(options.drawTool);
@@ -95,13 +100,16 @@ export class olMap {
     // 添加新的图层
     if (Array.isArray(options.id)) {
       for (const layer of options.id) {
-        await this.formatXml(layer); // 等待当前 layer 处理完成
+        if (typeof layer === "string") {
+          await this.formatXml(layer); // 等待当前 layer 处理完成
+        } else {
+          await this.formatXml(layer.id, layer.minZoom, layer.maxZoom, layer.zIndex, layer.visible); // 等待当前 layer 处理完成
+        }
       }
     } else if (options.id) {
       // 如果 options.id 不是数组，但确实是一个图层，则直接处理
-      await this.formatXml(options.id);
+      await this.formatXml(options.id, options.minZoom, options.maxZoom, options.zIndex, options.visible);
     }
-    console.log('wan');
     // 创建Vector层并添加到地图上
     this.vectorLayer = new VectorLayer({
       source: new VectorSource({
@@ -114,11 +122,8 @@ export class olMap {
     }
   }
 
-  formatXml(code, minZoom, maxZoom, zIndex, visible) {
+  formatXml(code: string, minZoom?: number, maxZoom?: number, zIndex?: number, visible?: boolean) {
     const xml = new WMTSCapabilities();
-    // axios.post(commonUrl + 'YZT1723547712680', '<wfs:GetFeature xmlns:wfs="http://www.opengis.net/wfs"service="WFS"version="1.0.0"outputFormat="GeoJson"maxFeatures="99999"xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"xsi:schemaLocation="http://www.opengis.net/wfshttp://schemas.opengis.net/wfs/1.0.0/WFS-transaction.xsd">\n' +
-    //   '<wfs:QuerytypeName="GDSMMSZJGZDTJX_2023"userecent="true"/>\n' +
-    //   '</wfs:GetFeature>');
     return this.getCapabilities(code).then((lists) => {
       const geojson = xml.read(lists.data);
       const data = geojson.Contents.Layer[0];
@@ -154,6 +159,7 @@ export class olMap {
       })
     });
     const layer = new TileLayer({
+      name: code,
       source: source,
       zIndex: zIndex,
       minZoom: minZoom,
@@ -163,7 +169,6 @@ export class olMap {
     layer.set('layerName', code);
 
     this.map.addLayer(layer);
-    console.log(code);
   }
 
   // 初始化绘画工具
@@ -215,20 +220,23 @@ export class olMap {
   }
 
   // 切换图层
-  async replaceLayers(newLayers) {
+  async replaceLayers(newLayers, loadendFunc) {
     // 遍历当前的所有图层并移除它们
     this.map.getLayers().forEach((layer) => {
       this.map.removeLayer(layer);
     });
 
-    // 添加新的图层
     if (Array.isArray(newLayers)) {
       for (const layer of newLayers) {
-        await this.formatXml(layer); // 等待当前 layer 处理完成
+        if (typeof layer === "string") {
+          await this.formatXml(layer); // 等待当前 layer 处理完成
+        } else {
+          await this.formatXml(layer.id, layer.minZoom, layer.maxZoom, layer.zIndex, layer.visible); // 等待当前 layer 处理完成
+        }
       }
-    } else if (newLayers) {
+    } else {
       // 如果 options.id 不是数组，但确实是一个图层，则直接处理
-      await this.formatXml(newLayers);
+      await this.formatXml(newLayers.id, newLayers.minZoom, newLayers.maxZoom, newLayers.zIndex, newLayers.visible);
     }
     // 创建Vector层并添加到地图上
     this.vectorLayer = new VectorLayer({
@@ -240,6 +248,9 @@ export class olMap {
     const point = JSON.parse(JSON.stringify(this.markers));
     this.markers = [];
     this.addMarker(point);
+    if (loadendFunc) {
+      loadendFunc();
+    }
   }
 
   addMarker(points) {
@@ -290,7 +301,7 @@ export class olMap {
   createVecByJson(json, options) {
     const format = new GeoJSON();
     const fs = format.readFeatures(json);
-    const converLayer = new VectorLayer({
+    this.maskLayer = new VectorLayer({
       source: new VectorSource(),
       style: new Style({
         fill: new Fill({
@@ -320,11 +331,29 @@ export class olMap {
     this.maskLayer.getSource().addFeature(convertFt);
   }
 
+  /**
+   * @description 创建矢量图层
+   * @param {String} layerName 图层名称
+   * @param {Number} zIndex 地图层级默认是0
+   * @returns
+   */
+  createVecLayer(layerName = '', zIndex = 0) {
+    const source = new SourceVector({
+      crossOrigin: 'anonymous'
+    });
+    const layer = new Vector({
+      source,
+      zIndex
+    });
+    layer.set('layerName', layerName);
+    return layer;
+  }
   // 分布图遮罩层
   createMask(data) {
     this.removeMask();
     if (!data || data.length === 0) return;
     data.forEach((item) => {
+      if (!item.points || item.points.length === 0) return;
       // 遮罩图层的样式
       const maskStyle = new Style({
         fill: new Fill({
@@ -370,4 +399,56 @@ export class olMap {
       this.maskLayer = null;
     }
   }
+  /**
+   * 绘制经纬线
+   * visible: boolean 是否可见
+   */
+  handleLngLatLine(visible: boolean) {
+    // 创建经纬网图层
+    const graticule = new Graticule({
+      name: 'Graticule',
+      showLabels: true, // 为每条刻度线绘制一个带有各自纬度/经度的标签
+      wrapX: false,     // 是否水平重复经纬网
+      targetSize: 230,
+      zIndex: 99999,
+      strokeStyle: new Stroke({ // 用于绘制刻度线的样式
+        color: '#dcdcdc', // 线条颜色
+        width: 1,       // 线条宽度
+      }),
+      lonLabelStyle: new Text({
+        font: '12px Calibri,sans-serif',
+        textBaseline: 'bottom',
+        fill: new Fill({
+          color: '#9d9d9d'
+        })
+      }),
+      latLabelPosition: 0,
+      latLabelStyle: new Text({
+        font: '12px Calibri,sans-serif',
+        textAlign: 'left',
+        textBaseline: 'end',
+        fill: new Fill({
+          color: '#9d9d9d'
+        })
+      })
+    });
+    if (visible) {
+      this.map.addLayer(graticule)
+    } else {
+      this.removeLayer('Graticule')
+    }
+  }
+  /**
+   * 移除指定name的layer
+   * layerName: string
+   * */
+  removeLayer(layerName: string) {
+    const layers = this.map.getLayers();
+    layers.forEach((element) => {
+      if (!!element && element.get('name') === layerName) {
+        //移除
+        this.map.removeLayer(element);
+      }
+    });
+  }
 }