测绘院地图初始化

656abed7 · 郭铭瑶 · b7a70d88 · 656abed7 · 656abed7 · 656abed7
Commit 656abed7 authored Aug 02, 2021 by 郭铭瑶 🤘
12 changed files
--- a/index.html
+++ b/index.html
@@ -10,6 +10,7 @@

 <body>
  <div id="app"></div>
+  <script src="/shanghaiwuye_gis_map_api_3.2.210421/SMap.min.js"></script>
  <script type="module" src="/src/main.ts"></script>
 </body>


--- a/public/shanghaiwuye_gis_map_api_3.2.210421/README.md
+++ b/public/shanghaiwuye_gis_map_api_3.2.210421/README.md
--- a/public/shanghaiwuye_gis_map_api_3.2.210421/SMap.min.js
+++ b/public/shanghaiwuye_gis_map_api_3.2.210421/SMap.min.js
--- a/public/shanghaiwuye_gis_map_api_3.2.210421/SMap.min.js.map
+++ b/public/shanghaiwuye_gis_map_api_3.2.210421/SMap.min.js.map
--- a/public/shanghaiwuye_gis_map_api_3.2.210421/网络参数说明.txt
+++ b/public/shanghaiwuye_gis_map_api_3.2.210421/网络参数说明.txt
+new SMap.Network().setNet(网络参数);
+网络参数包括以下几个值：
+'internet':表示互联网2D;
+'affairs':表示政务网2D;
+'local3D':表示局域网3D;
+'affairs3D':表示政务网3D;
+'njdl':表示南京东路政务网3D;
\ No newline at end of file
--- a/src/components/main.vue
+++ b/src/components/main.vue
 <template>
-  <div>My Map</div>
+  <div id="container" />
 </template>

-<script lang="ts" setup></script>
+<script lang="ts" setup>
+import useMap from '@/map'
+import { nextTick, onMounted } from '@vue/runtime-core'
+let map
+onMounted(async () => {
+  await nextTick()
+  map = useMap('SMap')
+    .with({
+      el: 'container',
+      mode: '2D',
+      center: [0, 0],
+      zoom: 5,
+      style: 'smap://styles/dark',
+      appKey: 'ACF69EDK17LON63GHPF081',
+      netType: 'internet',
+    })
+    .on('load', () => console.log('loaded!!!!!'))
+    .on('click', (a, b) => console.log(a, b))
+})
+</script>

-<style scoped></style>
+<style scoped>
+#container {
+  width: 100vw;
+  height: 100vh;
+}
+</style>
--- a/src/map/ai-map.ts
+++ b/src/map/ai-map.ts
+import MyMap from './my-map'
+
+export default class AI_Map extends MyMap {
+  test() {
+    console.log('test')
+  }
+}
--- a/src/map/index.ts
+++ b/src/map/index.ts
+import { MapConfig, MapType } from './types'
+import S_Map from './s-map'
+import AI_Map from './ai-map'
+
+const whichMap = {
+  SMap: {
+    with: (config: MapConfig) => new S_Map(config),
+  },
+  AIMap: {
+    with: (config: MapConfig) => new AI_Map(config),
+  },
+}
+
+export default function useMap<K extends keyof typeof whichMap>(key: K) {
+  return whichMap[key]
+}
--- a/src/map/my-map.ts
+++ b/src/map/my-map.ts
+export default class MyMap {
+  protected map
+  constructor(instance: any) {
+    this.map = instance
+  }
+
+  /**
+   *  原始地图实例
+   * （主要适用于调用原始地图的方法、功能）
+   */
+  get instance(): any {
+    return this.map
+  }
+}
--- a/src/map/s-map.ts
+++ b/src/map/s-map.ts
+import MyMap from './my-map'
+import { CallBack, MapConfig, Listener, EventName } from './types'
+
+declare const SMap: {
+  Map: any
+  MapEvent: any
+  Size: any
+  Icon: any
+  Label: any
+  Marker: any
+  Network: any
+}
+declare const Plugins: {
+  MaskBoundary: any
+}
+
+export default class S_Map extends MyMap {
+  constructor(config: MapConfig) {
+    if (!config.netType) {
+      throw new Error('SMap需要设置netType参数！')
+    }
+    new SMap.Network().setNet(config.netType)
+    const instance = new SMap.Map(config.el, {
+      appKey: config.appKey,
+      viewMode: config.mode,
+      center: config.center,
+      zoom: config.zoom,
+      zooms: config.zooms,
+      pitch: config.pitch,
+      mapStyle: config.style,
+      showBuildingBlock: config.showBuildingBlock,
+      rotateEnable: config.rotateEnable,
+    })
+    super(instance)
+    this.on('load', this.clearFooter)
+  }
+
+  private clearFooter() {
+    const footer = document.querySelector(
+      '.esri-ui-manual-container>.esri-component',
+    )
+    footer && ((footer as HTMLElement).style.display = 'none')
+  }
+
+  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](cb)
+    return this
+  }
+
+  private onLoad(cb: CallBack) {
+    this.map.on(SMap.MapEvent.maploaded, cb)
+  }
+  private onZoom(cb: CallBack) {
+    this.map.on(SMap.MapEvent.zoomchanged, cb)
+  }
+  private onMove(cb: CallBack) {
+    this.map.on(SMap.MapEvent.centerchanged, cb)
+  }
+  private onBlur(cb: CallBack) {
+    this.map.on(SMap.MapEvent.blur, cb)
+  }
+  private onFocus(cb: CallBack) {
+    this.map.on(SMap.MapEvent.focus, cb)
+  }
+  private onDrag(cb: CallBack) {
+    this.map.on(SMap.MapEvent.drag, cb)
+  }
+  private onResize(cb: CallBack) {
+    this.map.on(SMap.MapEvent.resize, cb)
+  }
+
+  private event(event: unknown, cb: CallBack) {
+    this.map.on(event, (view: any, eventParamter: any) => {
+      view.hitTest(eventParamter).then((res: any) => {
+        cb(res.results, eventParamter.mapPoint)
+      })
+    })
+  }
+
+  private onClick(cb: CallBack): void {
+    this.event(SMap.MapEvent.click, cb)
+  }
+  private onDblClick(cb: CallBack): void {
+    this.event(SMap.MapEvent.doubleclick, cb)
+  }
+  private onMouseWheel(cb: CallBack): void {
+    this.event(SMap.MapEvent.mousewheel, cb)
+  }
+}
--- a/src/map/types.ts
+++ b/src/map/types.ts
+export type MapConfig = Partial<MapOptions>
+
+export interface MapOptions {
+  el: string
+  /**
+   * SMap 地图专用
+   * @param internet 表示互联网2D
+   * @param affairs 表示政务网2D
+   * @param local3D 表示局域网3D
+   * @param affairs3D 表示政务网3D
+   * @param njdl 表示南京东路政务网3D
+   */
+  netType: 'internet' | 'affairs' | 'local3D' | 'affairs3D' | 'njdl'
+  mode: '2D' | '3D'
+  center: [number, number]
+  zooms: [number, number]
+  zoom: number
+  pitch: number
+  style: string
+  appKey: string
+  showBuildingBlock: boolean
+  rotateEnable: boolean
+}
+
+export type CallBack = (arg: unknown, oth?: unknown) => void
+
+export interface Listener {
+  load: 'onLoad'
+  zoom: 'onZoom'
+  move: 'onMove'
+  blur: 'onBlur'
+  focus: 'onFocus'
+  drag: 'onDrag'
+  resize: 'onResize'
+  click: 'onClick'
+  dblclick: 'onDblClick'
+  mousewheel: 'onMouseWheel'
+}
--- a/vetur.config.json
+++ b/vetur.config.json
+{
+  "settings": {
+    "vetur.experimental.templateInterpolationService": true
+  }
+}
\ No newline at end of file