简版图加载

src/components/Map/YztMap/index.vue

@@ -69,7 +69,7 @@ const mapList = reactive({
     { layer: 'annotation', code: 'YZT1695608158269', zIndex: '-98', visible: true }
   ],
   imageMap2: [
-    { layer: 'map', code: 'YZT1640925052482', zIndex: '-99', visible: true },
+    { layer: 'map', code: 'gd', zIndex: '-99', visible: true },
     { layer: 'annotation', code: 'YZT1695608158269', zIndex: '-98', visible: true }
   ]
 });

src/utils/olMap/olMap.ts

@@ -22,12 +22,10 @@ import { defaults, ScaleLine } from 'ol/control';
 import Vector from 'ol/layer/Vector';
 import SourceVector from 'ol/source/Vector';
 import GeoJSON from 'ol/format/GeoJSON';
-import { fromLonLat } from 'ol/proj';
 import axios from 'axios';
 import { fromExtent } from 'ol/geom/Polygon';
 import { LinearRing, LineString, Polygon } from 'ol/geom';
 import { Graticule } from 'ol/layer';
-import { getPointsCenter, mergeGeoJsonPolygons } from '@/utils/gisUtils';
 import { Cluster } from 'ol/source';
 import CircleStyle from 'ol/style/Circle';
 import Overlay from 'ol/Overlay';
@@ -41,6 +39,7 @@ import { nanoid } from 'nanoid';
 import carImg from '@/assets/images/car.png';
 import { globalHeaders } from '@/utils/request';
 import { iconList } from '@/views/globalMap/data/mapData';
+import gdJson from '@/assets/json/gd.json';
 
 const tk = 'a8df87f1695d224d2679aa805c1268d9';
 const commonUrl = import.meta.env.VITE_APP_BASE_API2 + 'api/oneShare/proxyHandler/gd/';
@@ -208,7 +207,11 @@ export class olMap {
     // 添加新的图层
     if (Array.isArray(options.id)) {
       for (const layer of options.id) {
-        await this.formatXml(layer);
+        if (layer.code === 'gd') {
+          await this.initJsonLayer(layer);
+        } else {
+          await this.formatXml(layer);
+        }
       }
     } else if (options.id === 'tianditu') {
       await this.formatXml2();
@@ -324,6 +327,27 @@ export class olMap {
     this.map.addLayer(layer);
   }
 
+  // 加载json图层
+  initJsonLayer(layer) {
+    return new Promise((resolve, reject) => {
+      const geojsonParser = new GeoJSON();
+      console.log(this.map.getView().getProjection())
+      const features = geojsonParser.readFeatures(gdJson, {
+        dataProjection: 'EPSG:4326',
+        featureProjection: this.map.getView().getProjection()
+      });
+      const jsonLayer = new VectorLayer({
+        source: new VectorSource({features}),
+        style: new Style({ // 必须设置样式才能显示
+          fill: new Fill({ color: '#ffffff' }),
+          stroke: new Stroke({ color: 'rgba(0,0,0, 1)', width: 1 })
+        }),
+        zIndex: -100
+      });
+      this.map.addLayer(jsonLayer);
+      resolve({});
+    });
+  }
   // 初始化绘画工具
   initMouseTool(options) {
     this.drawOptions = {