添加面状覆盖物

src/components/main.vue

@@ -7,6 +7,7 @@
       <div @click="move">Move</div>
       <div @click="addPoints">Point</div>
       <div @click="addLines">Line</div>
+      <div @click="addPolygon">Polygon</div>
       <div @click="removeLayers">Remove</div>
     </div>
   </div>
@@ -20,28 +21,29 @@ import { nextTick, onMounted } from 'vue'
 let map: MyMap
 let pointsLayer: any
 let linesLayer: any
+let polygonLayer: any
 
 onMounted(async () => {
   await nextTick()
 
-  // map = useMap('SMap').with({
-  //   el: 'container',
-  //   center: [0, 0],
-  //   zoom: 5,
-  //   style: 'smap://styles/dark',
-  //   appKey: 'ACF69EDK17LON63GHPF081',
-  //   netType: 'internet',
-  // })
-
-  map = useMap('AIMap').with({
+  map = useMap('SMap').with({
     el: 'container',
-    center: [121.612846, 31.205494],
-    zoom: 13,
-    style: 'aimap://styles/aimap/darkblue-v4',
-    appKey: 'gt8XidVe5upHf7cirkJwwXTCWj20zfu3',
-    baseApiUrl: 'https://location-dev.newayz.com',
+    center: [0, 0],
+    zoom: 5,
+    style: 'smap://styles/dark',
+    appKey: 'ACF69EDK17LON63GHPF081',
+    netType: 'internet',
   })
 
+  // map = useMap('AIMap').with({
+  //   el: 'container',
+  //   center: [121.612846, 31.205494],
+  //   zoom: 13,
+  //   style: 'aimap://styles/aimap/darkblue-v4',
+  //   appKey: 'gt8XidVe5upHf7cirkJwwXTCWj20zfu3',
+  //   baseApiUrl: 'https://location-dev.newayz.com',
+  // })
+
   map
     .on('load', addControls)
     .on('click', (a, b) => console.log(a, b))
@@ -112,11 +114,26 @@ function addLines() {
       ],
       text: 'test message',
     },
+    labelKey: 'text',
+  })
+}
+function addPolygon() {
+  polygonLayer = map.add('polygon', {
+    data: {
+      path: [
+        [0, 0],
+        [121.59751247938203, 29.835174764721145],
+        [21.59751247938203, 0.835174764721145],
+        [0, 0],
+      ],
+      text: 'test message',
+    },
   })
 }
 function removeLayers() {
   map.remove(pointsLayer)
   map.remove(linesLayer)
+  map.remove(polygonLayer)
 }
 </script>
 
@@ -136,7 +153,7 @@ function removeLayers() {
   margin: 10px;
   background: #fff;
   color: #000;
-  min-width: 40px;
+  min-width: 50px;
   text-align: center;
   cursor: pointer;
 }

src/my-map/ai-map/index.ts

@@ -13,7 +13,7 @@ import {
   Layers,
   LayerOption,
 } from '../types'
-import { toLines, toPoints } from './util'
+import { toLines, toPoints, toPolygons } from './util'
 
 export default class AI_Map extends MyMap {
   private _clickCb: ClickCallBack | null = null
@@ -119,43 +119,30 @@ export default class AI_Map extends MyMap {
 
   /** 设置覆盖物 */
   private _setLayers() {
-    const _markers: Partial<Layers> = {
-      point: (data: LayerOption) => {
-        const layer = new aimap.MassMarkerLayer(toPoints(this.map, data))
-        // 维智的覆盖物点击事件需特别定义
-        layer.on('click', (e: any) => {
-          const arg = {
-            type: e.type,
-            center: [e.lngLat.lng, e.lngLat.lat],
-            event: e.originalEvent,
-            clientX: e.point.x,
-            clientY: e.point.y,
-            originData: e,
-          }
-          // 点击覆盖物获取自定义数据
-          this._clickCb && this._clickCb(arg, e?.features?.[0]?.properties)
-        })
-        return layer
-      },
-      line: (data: LayerOption) => {
-        const layer = new aimap.MassMarkerLayer(toLines(this.map, data))
-        // 维智的覆盖物点击事件需特别定义
-        layer.on('click', (e: any) => {
-          const arg = {
-            type: e.type,
-            center: [e.lngLat.lng, e.lngLat.lat],
-            event: e.originalEvent,
-            clientX: e.point.x,
-            clientY: e.point.y,
-            originData: e,
-          }
-          // 点击覆盖物获取自定义数据
-          this._clickCb && this._clickCb(arg, e?.features?.[0]?.properties)
-        })
-        return layer
-      },
+    const makeLayer = (layer: any) => {
+      layer.on('click', (e: any) => {
+        const arg = {
+          type: e.type,
+          center: [e.lngLat.lng, e.lngLat.lat],
+          event: e.originalEvent,
+          clientX: e.point.x,
+          clientY: e.point.y,
+          originData: e,
+        }
+        // 点击覆盖物获取自定义数据
+        this._clickCb && this._clickCb(arg, e?.features?.[0]?.properties)
+      })
+      return layer
+    }
+    const _layers: Partial<Layers> = {
+      point: (data: LayerOption) =>
+        makeLayer(new aimap.MassMarkerLayer(toPoints(this.map, data))),
+      line: (data: LayerOption) =>
+        makeLayer(new aimap.LineString(toLines(this.map, data))),
+      polygon: (data: LayerOption) =>
+        makeLayer(new aimap.Polygon(toPolygons(this.map, data))),
     }
-    this._markers = Object.assign(this._markers, _markers)
+    this._layers = Object.assign(this._layers, _layers)
   }
 
   zoomIn(options: ZoomOptions) {

src/my-map/ai-map/util.ts

@@ -92,3 +92,41 @@ export function toLines(map: unknown, options: LayerOption) {
     },
   }
 }
+
+/** 转化面状覆盖物 */
+export function toPolygons(map: unknown, options: LayerOption) {
+  const {
+    data,
+    lineWidth = 3,
+    color = 'blue',
+    fillColor = 'rgba(135,206,235,0.5)',
+    labelKey,
+    spatialReference = 'gcj02',
+    labelOptions,
+    lineJoin = 'round',
+  } = options
+  const [horizontal, vertical] = labelOptions?.offset || []
+  return {
+    map,
+    spatialReference: spatialReference,
+    data: {
+      coordinates: Array.isArray(data)
+        ? data.map(({ path }) => path?.map((e) => e))
+        : data.path,
+      ...data,
+    },
+    style: {
+      'line-width': lineWidth,
+      'line-color': color,
+      'fill-color': fillColor,
+      'line-join': lineJoin,
+      'text-field': `{${labelKey}}`,
+      'text-color': labelOptions?.color,
+      // 偏移相比测绘院地图大概小了10倍，且竖直偏移相反
+      'text-offset': [
+        horizontal ? horizontal / 10 : 0,
+        vertical ? vertical / -10 : 0,
+      ],
+    },
+  }
+}

src/my-map/map.d.ts

@@ -6,6 +6,7 @@ declare const SMap: {
   Label: any
   Marker: any
   Polyline: any
+  Polygon: any
   OverlayGroup: any
   Network: any
   Home: any
@@ -32,4 +33,6 @@ declare const aimap: {
   CompassControl: any
   ScaleControl: any
   MassMarkerLayer: any
+  LineString: any
+  Polygon: any
 }

src/my-map/my-map.ts

@@ -14,7 +14,7 @@ export default abstract class MyMap {
   protected map
   protected _listeners: Listeners
   protected _controls: Controls
-  protected _markers: Layers
+  protected _layers: Layers
 
   constructor(instance: any) {
     this.map = instance
@@ -88,7 +88,7 @@ export default abstract class MyMap {
         console.error('set：此地图不存在 bMapGalleryexpand 控件！')
       },
     }
-    this._markers = {
+    this._layers = {
       point: () => console.error('add：此地图不存在 point 覆盖物！'),
       line: () => console.error('add：此地图不存在 line 覆盖物！'),
     }
@@ -130,7 +130,7 @@ export default abstract class MyMap {
    * @param data 覆盖物数据
    */
   add<K extends keyof Layers>(type: K, data: LayerOption) {
-    return this._markers[type](data)
+    return this._layers[type](data)
   }
 
   /**

src/my-map/s-map/index.ts

@@ -12,7 +12,7 @@ import {
   LayerOption,
   ClickCallBack,
 } from '../types'
-import { toLines, toPoints } from './util'
+import { toLines, toPoints, toPolygons } from './util'
 
 export default class S_Map extends MyMap {
   constructor(config: MapConfig<SMapConfig>) {
@@ -104,94 +104,47 @@ export default class S_Map extends MyMap {
 
   /** 设置控制器 */
   private _setControls() {
+    const makeControl = (constructorFn: any, options?: ControlOptions) => {
+      this.map.addControl(
+        new constructorFn({
+          visible: options?.show,
+          position: options?.position,
+        }),
+      )
+    }
     const _controls: Partial<Controls> = {
       home: (options?: ControlOptions) => {
-        this.map.addControl(
-          new SMap.Home({
-            visible: options?.show,
-            position: options?.position,
-          }),
-        )
+        makeControl(SMap.Home, options)
       },
       compass: (options?: ControlOptions) => {
-        this.map.addControl(
-          new SMap.Compass({
-            visible: options?.show,
-            position: options?.position,
-          }),
-        )
+        makeControl(SMap.Compass, options)
       },
       zoom: (options?: ControlOptions) => {
-        this.map.addControl(
-          new SMap.Zoom({
-            visible: options?.show,
-            position: options?.position,
-          }),
-        )
+        makeControl(SMap.Zoom, options)
       },
       fullScreen: (options?: ControlOptions) => {
-        this.map.addControl(
-          new SMap.Fullscreen({
-            visible: options?.show,
-            position: options?.position,
-          }),
-        )
+        makeControl(SMap.Fullscreen, options)
       },
       layerList: (options?: ControlOptions) => {
-        this.map.addControl(
-          new SMap.LayerListControl({
-            visible: options?.show,
-            position: options?.position,
-          }),
-        )
+        makeControl(SMap.LayerListControl, options)
       },
       measureLine: (options?: ControlOptions) => {
-        this.map.addControl(
-          new SMap.MeasureLine({
-            visible: options?.show,
-            position: options?.position,
-          }),
-        )
+        makeControl(SMap.MeasureLine, options)
       },
       measureArea: (options?: ControlOptions) => {
-        this.map.addControl(
-          new SMap.MeasureArea({
-            visible: options?.show,
-            position: options?.position,
-          }),
-        )
+        makeControl(SMap.MeasureArea, options)
       },
       basemapToggle: (options?: ControlOptions) => {
-        this.map.addControl(
-          new SMap.BasemapToggle({
-            visible: options?.show,
-            position: options?.position,
-          }),
-        )
+        makeControl(SMap.BasemapToggle, options)
       },
       underguroundSwitch: (options?: ControlOptions) => {
-        this.map.addControl(
-          new SMap.UndergroundSwitch({
-            visible: options?.show,
-            position: options?.position,
-          }),
-        )
+        makeControl(SMap.UndergroundSwitch, options)
       },
       bMapGallery: (options?: ControlOptions) => {
-        this.map.addControl(
-          new SMap.BMapGallery({
-            visible: options?.show,
-            position: options?.position,
-          }),
-        )
+        makeControl(SMap.BMapGallery, options)
       },
       bMapGalleryexpand: (options?: ControlOptions) => {
-        this.map.addControl(
-          new SMap.BMapGalleryExpand({
-            visible: options?.show,
-            position: options?.position,
-          }),
-        )
+        makeControl(SMap.BMapGalleryExpand, options)
       },
     }
     this._controls = Object.assign(this._controls, _controls)
@@ -199,19 +152,17 @@ export default class S_Map extends MyMap {
 
   /** 设置覆盖物 */
   private _setLayers() {
-    const _markers: Partial<Layers> = {
-      point: (data: LayerOption) => {
-        const layer = new SMap.OverlayGroup(toPoints(data), {})
-        this.map.add(layer)
-        return layer
-      },
-      line: (data: LayerOption) => {
-        const layer = new SMap.OverlayGroup(toLines(data), {})
-        this.map.add(layer)
-        return layer
-      },
+    const makeLayer = (group: unknown[]) => {
+      const layer = new SMap.OverlayGroup(group, {})
+      this.map.add(layer)
+      return layer
+    }
+    const _layers: Partial<Layers> = {
+      point: (data: LayerOption) => makeLayer(toPoints(data)),
+      line: (data: LayerOption) => makeLayer(toLines(data)),
+      polygon: (data: LayerOption) => makeLayer(toPolygons(data)),
     }
-    this._markers = Object.assign(this._markers, _markers)
+    this._layers = Object.assign(this._layers, _layers)
   }
 
   zoomIn() {

src/my-map/s-map/util.ts

@@ -83,3 +83,48 @@ export function toLines(options: LayerOption) {
     return [transData(data)]
   }
 }
+
+/** 转化面状覆盖物 */
+export function toPolygons(options: LayerOption) {
+  const {
+    data,
+    color = 'blue',
+    fillColor = 'rgba(135,206,235,0.5)',
+    labelKey,
+    labelOptions,
+    lineCap = 'square',
+    lineStyle = 'solid',
+    lineJoin = 'round',
+    lineWidth = 3,
+  } = options
+
+  const transData = (item: PointsData) => {
+    const result: any = {
+      paths: item.path?.map(([x, y]) => new SMap.LngLat(x, y)),
+      attributes: { ...item },
+      cap: lineCap,
+      strokeColor: color,
+      fillColor,
+      strokeWeight: lineWidth,
+      style: lineStyle,
+      lineJoin: lineJoin,
+    }
+    if (labelKey) {
+      result.label = new SMap.Label({
+        text: item[labelKey] + '',
+        size: labelOptions?.size,
+        color: labelOptions?.color,
+        xoffset: labelOptions?.offset?.[0],
+        yoffset: labelOptions?.offset?.[1],
+        verticalAlignment: 'middle',
+        horizontalAlignment: 'center',
+      })
+    }
+    return new SMap.Polygon(result)
+  }
+  if (Array.isArray(data)) {
+    return data.map(transData)
+  } else {
+    return [transData(data)]
+  }
+}

src/my-map/types.ts

@@ -130,21 +130,19 @@ export interface ControlOptions {
  * 控制器列表
  */
 export interface Controls {
-  home: (options?: ControlOptions) => unknown
-  compass: (options?: ControlOptions) => unknown
-  zoom: (options?: ControlOptions) => unknown
-  scale: (options?: ControlOptions) => unknown
-  fullScreen: (options?: ControlOptions) => unknown
-  layerList: (options?: ControlOptions) => unknown
-  measureLine: (options?: ControlOptions) => unknown
-  measureArea: (options?: ControlOptions) => unknown
-  basemapToggle: (options?: ControlOptions) => unknown
-  underguroundSwitch: (options?: ControlOptions) => unknown
-  bMapGallery: (options?: ControlOptions) => unknown
-  bMapGalleryexpand: (options?: ControlOptions) => unknown
+  home: (options?: ControlOptions) => void
+  compass: (options?: ControlOptions) => void
+  zoom: (options?: ControlOptions) => void
+  scale: (options?: ControlOptions) => void
+  fullScreen: (options?: ControlOptions) => void
+  layerList: (options?: ControlOptions) => void
+  measureLine: (options?: ControlOptions) => void
+  measureArea: (options?: ControlOptions) => void
+  basemapToggle: (options?: ControlOptions) => void
+  underguroundSwitch: (options?: ControlOptions) => void
+  bMapGallery: (options?: ControlOptions) => void
+  bMapGalleryexpand: (options?: ControlOptions) => void
 }
-
-
 export interface ZoomOptions {
   /** 如果 false ，则没有动画效果（默认true） */
   animate?: boolean
@@ -179,6 +177,7 @@ export interface FocusOptions {
 export interface Layers {
   point: (data: LayerOption) => unknown
   line: (data: LayerOption) => unknown
+  polygon: (data: LayerOption) => unknown
 }
 
 /** 覆盖物点位数据 */
@@ -215,6 +214,7 @@ export interface LayerOption {
     color?: string
   }
   color?: string
+  fillColor?: string
   lineCap?: string
   lineStyle?: string
   lineJoin?: 'bevel' | 'round' | 'miter'