addBoundary(测绘院专属)

0cee4abd · 郭铭瑶 · 66f7f325 · 0cee4abd · 0cee4abd · 0cee4abd
Commit 0cee4abd authored Aug 17, 2021 by 郭铭瑶 🤘
8 changed files
--- a/index.html
+++ b/index.html
@@ -11,6 +11,7 @@
 <body>
  <div id="app"></div>
  <script src="/shanghaiwuye_gis_map_api_3.2.210421/SMap.min.js"></script>
+  <script src="/shanghaiwuye_gis_map_api_3.2.210421/Plugins.min.js"></script>
  <link rel='stylesheet' href='https://location-dev.newayz.com/aimap-gl-js/v1.3.10/aimap-gl.css' />
  <script src="https://location-dev.newayz.com/aimap-gl-js/v1.3.10/aimap-gl.js"></script>
  <script type="module" src="/src/main.ts"></script>

--- a/public/shanghaiwuye_gis_map_api_3.2.210421/Plugins.min.js
+++ b/public/shanghaiwuye_gis_map_api_3.2.210421/Plugins.min.js
--- a/src/components/main.vue
+++ b/src/components/main.vue
@@ -9,6 +9,7 @@
      <div @click="addLines">Line</div>
      <div @click="addPolygon">Polygon</div>
      <div @click="removeLayers">Remove</div>
+      <div @click="addBounday">Boundary</div>
    </div>
  </div>
 </template>
@@ -22,28 +23,29 @@ let map: MyMap
 let pointsLayer: any
 let linesLayer: any
 let polygonLayer: any
+let boundary: any

 onMounted(async () => {
  await nextTick()

-  // map = MyMap.useMap('SMap').with({
-  //   el: 'container',
-  //   center: [0, 0],
-  //   zoom: 5,
-  //   style: 'smap://styles/dark',
-  //   appKey: 'ACF69EDK17LON63GHPF081',
-  //   netType: 'internet',
-  // })
-
-  map = MyMap.useMap('AIMap').with({
+  map = MyMap.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 = MyMap.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))
@@ -130,10 +132,17 @@ function addPolygon() {
    },
  })
 }
+function addBounday() {
+  boundary = map.addBoundary({
+    name: '新江湾',
+  })
+}
+
 function removeLayers() {
  map.remove(pointsLayer)
  map.remove(linesLayer)
  map.remove(polygonLayer)
+  boundary.remove()
 }
 </script>


--- a/src/my-map/ai-map/index.ts
+++ b/src/my-map/ai-map/index.ts
@@ -15,6 +15,7 @@ import {
 } from '../types'
 import { toLines, toPoints, toPolygons } from './util'

+/** 维智地图 */
 export default class AI_Map extends MyMap {
  private _clickCb: ClickCallBack | null = null
  constructor(config: MapConfig<AIMapConfig>) {
@@ -163,4 +164,9 @@ export default class AI_Map extends MyMap {
  remove(layer: any) {
    layer && layer.remove()
  }
+
+  addBoundary() {
+    console.error('此地图不存在 addBoundary 方法')
+    return { remove: () => null }
+  }
 }
--- a/src/my-map/map.d.ts
+++ b/src/my-map/map.d.ts
@@ -23,7 +23,10 @@ declare const SMap: {
  LngLat: any
 }
 declare const Plugins: {
-  MaskBoundary: any
+  MaskBoundary: new (view: any) => {
+    add: (options: any) => void
+    remove: () => void
+  }
 }
 declare const aimap: {
  Map: any

--- a/src/my-map/my-map.ts
+++ b/src/my-map/my-map.ts
@@ -8,6 +8,7 @@ import {
  Location,
  Layers,
  LayerOption,
+  BoundaryOption,
 } from './types'

 const defaultListeners = {
@@ -86,6 +87,7 @@ const defaultLayers = {
  point: () => console.error('add：此地图不存在 point 覆盖物！'),
  line: () => console.error('add：此地图不存在 line 覆盖物！'),
  polygon: () => console.error('add：此地图不存在 polygon 覆盖物！'),
+  boundary: () => console.error('add：此地图不存在 boundary 覆盖物！'),
 }

 export default abstract class MyMap {
@@ -165,4 +167,10 @@ export default abstract class MyMap {
   * @param layer 覆盖物
   */
  abstract remove(layer: unknown): void
+
+  /**
+   * 添加边界
+   * @param option 配置项
+   */
+  abstract addBoundary(option: BoundaryOption): { remove: () => void }
 }
--- a/src/my-map/s-map/index.ts
+++ b/src/my-map/s-map/index.ts
@@ -11,9 +11,11 @@ import {
  Layers,
  LayerOption,
  ClickCallBack,
+  BoundaryOption,
 } from '../types'
 import { toLines, toPoints, toPolygons } from './util'

+/** 测绘院地图 */
 export default class S_Map extends MyMap {
  constructor(config: MapConfig<SMapConfig>) {
    if (!config.netType) {
@@ -181,4 +183,25 @@ export default class S_Map extends MyMap {
  remove(layer: unknown) {
    layer && this.map.remove(layer)
  }
+
+  /** 添加边界 */
+  addBoundary({
+    name = '',
+    type = 'jd_boundary',
+    weight = 10,
+    count = 10,
+    color = 'rgba(51,145,255,.6)',
+    maskColor = [0, 17, 33, 0.9],
+  }: BoundaryOption) {
+    const boundary = new Plugins.MaskBoundary(this.map.view)
+    boundary.add({
+      boundaryType: type,
+      boundaryDefinition: `name like '%${name}%'`,
+      boundarydistance: weight,
+      bounarycount: count,
+      boundaryColor: color,
+      maskColor: maskColor,
+    })
+    return boundary
+  }
 }
--- a/src/my-map/types.ts
+++ b/src/my-map/types.ts
@@ -227,3 +227,20 @@ export interface LayerOption {
  lineJoin?: 'bevel' | 'round' | 'miter'
  lineWidth?: number
 }
+/** 边界选项 */
+export interface BoundaryOption {
+  /** 根据type模糊匹配名称  */
+  name: string
+  /**
+   *  边界类型
+   *
+   * 'jd_boundary' : 街道
+   *
+   * 'jwh_boundary' : 南东工作站
+   */
+  type?: string
+  weight?: number
+  count?: number
+  color?: string
+  maskColor?: number[]
+}