维智地图初始化

65b0026b · 郭铭瑶 · 656abed7 · 65b0026b · 65b0026b · 65b0026b
Commit 65b0026b authored Aug 02, 2021 by 郭铭瑶 🤘
Showing with 108 additions and 18 deletions

index.html index.html +2 -0

main.vue src/components/main.vue +32 -13

ai-map.ts src/map/ai-map.ts +62 -2

index.ts src/map/index.ts +1 -1

s-map.ts src/map/s-map.ts +2 -0

types.ts src/map/types.ts +9 -2

No files found.
--- a/index.html
+++ b/index.html
@@ -11,6 +11,8 @@
 <body>
  <div id="app"></div>
  <script src="/shanghaiwuye_gis_map_api_3.2.210421/SMap.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>
 </body>


--- a/src/components/main.vue
+++ b/src/components/main.vue
@@ -4,22 +4,41 @@

 <script lang="ts" setup>
 import useMap from '@/map'
-import { nextTick, onMounted } from '@vue/runtime-core'
+import { nextTick, onMounted } from 'vue'
 let map
 onMounted(async () => {
  await nextTick()
-  map = useMap('SMap')
-    .with({
+  // map = useMap('SMap').with({
+  //   el: 'container',
+  //   mode: '2D',
+  //   center: [0, 0],
+  //   zoom: 5,
+  //   style: 'smap://styles/dark',
+  //   appKey: 'ACF69EDK17LON63GHPF081',
+  //   netType: 'internet',
+  // })
+  map = useMap('AIMap').with({
    el: 'container',
-      mode: '2D',
-      center: [0, 0],
-      zoom: 5,
-      style: 'smap://styles/dark',
-      appKey: 'ACF69EDK17LON63GHPF081',
-      netType: 'internet',
+    center: [121.612846, 31.205494],
+    zoom: 13,
+    zooms: [3, 20],
+    pitch: 0,
+    bearing: 0,
+    style: 'aimap://styles/aimap/darkblue-v4',
+    appKey: 'gt8XidVe5upHf7cirkJwwXTCWj20zfu3',
+    baseApiUrl: 'https://location-dev.newayz.com',
  })
-    .on('load', () => console.log('loaded!!!!!'))
-    .on('click', (a, b) => console.log(a, b))
+  map
+    .on('click', (a, b) => console.log('click', a, b))
+    .on('load', (e) => console.log('load: ', e))
+    .on('zoom', (e) => console.log('zoom: ', e))
+    .on('move', (e) => console.log('move: ', e))
+    .on('blur', (e) => console.log('blur: ', e))
+    .on('focus', (e) => console.log('focus: ', e))
+    .on('drag', (e) => console.log('drag: ', e))
+    .on('resize', (e) => console.log('resize: ', e))
+    .on('dblclick', (e) => console.log('dblclick: ', e))
+    .on('mousewheel', (e) => console.log('mousewheel: ', e))
 })
 </script>


--- a/src/map/ai-map.ts
+++ b/src/map/ai-map.ts
 import MyMap from './my-map'
+import { CallBack, Listener, MapConfig } from './types'

+declare const aimap: {
+  Map: any
+  accessToken?: string
+  baseApiUrl?: string
+}
 export default class AI_Map extends MyMap {
-  test() {
-    console.log('test')
+  constructor(config: MapConfig) {
+    aimap.accessToken = config.appKey
+    aimap.accessToken = config.appKey
+
+    const instance = new aimap.Map({
+      container: config.el,
+      center: config.center,
+      zoom: config.zoom,
+      minZoom: config.zooms?.[0],
+      maxZoom: config.zooms?.[1],
+      pitch: config.pitch,
+      minPitch: config.pitchs?.[0],
+      maxPitch: config.pitchs?.[1],
+      bearing: config.bearing,
+      style: config.style,
+    })
+    super(instance)
+  }
+
+  on<K extends keyof Listener>(name: K, cb: CallBack) {
+    const eventName = `on${name.slice(0, 1).toUpperCase()}${name
+      .slice(1)
+      .toLowerCase()}` as Listener[K]
+    ;(this[eventName] as Function)(cb)
+    return this
+  }
+
+  private onClick(cb: CallBack) {
+    this.map.on('click', cb)
+  }
+  private onLoad(cb: CallBack) {
+    this.map.on('load', cb)
+  }
+  private onZoom(cb: CallBack) {
+    this.map.on('zoom', cb)
+  }
+  private onMove(cb: CallBack) {
+    this.map.on('move', cb)
+  }
+  private onBlur(cb: CallBack) {
+    this.map.on('blur', cb)
+  }
+  private onFocus(cb: CallBack) {
+    this.map.on('focus', cb)
+  }
+  private onDrag(cb: CallBack) {
+    this.map.on('drag', cb)
+  }
+  private onResize(cb: CallBack) {
+    this.map.on('resize', cb)
+  }
+  private onDblClick(cb: CallBack) {
+    this.map.on('dblclick', cb)
+  }
+  private onMouseWheel(cb: CallBack) {
+    this.map.on('mousewheel', cb)
  }
 }
--- a/src/map/index.ts
+++ b/src/map/index.ts
-import { MapConfig, MapType } from './types'
+import { MapConfig } from './types'
 import S_Map from './s-map'
 import AI_Map from './ai-map'


--- a/src/map/s-map.ts
+++ b/src/map/s-map.ts
@@ -14,6 +14,8 @@ declare const Plugins: {
  MaskBoundary: any
 }

+type Fn = (cb: CallBack) => void
+
 export default class S_Map extends MyMap {
  constructor(config: MapConfig) {
    if (!config.netType) {

--- a/src/map/types.ts
+++ b/src/map/types.ts
@@ -13,18 +13,25 @@ export interface MapOptions {
  netType: 'internet' | 'affairs' | 'local3D' | 'affairs3D' | 'njdl'
  mode: '2D' | '3D'
  center: [number, number]
-  zooms: [number, number]
  zoom: number
+  zooms: [number, number]
+  bearing: number
  pitch: number
+  pitchs: [number, number]
  style: string
+  /**
+   * 在SMap中作为appKey使用
+   * 在AIMap中作为accessToken使用
+   */
  appKey: string
  showBuildingBlock: boolean
  rotateEnable: boolean
+  baseApiUrl: string
 }

 export type CallBack = (arg: unknown, oth?: unknown) => void

-export interface Listener {
+export type Listener = {
  load: 'onLoad'
  zoom: 'onZoom'
  move: 'onMove'