Skip to content

M
my-map
Commit 65b0026b authored by 郭铭瑶's avatar 郭铭瑶 🤘
Browse files
Options

维智地图初始化

parent 656abed7
Hide whitespace changes
Inline Side-by-side
Showing with 108 additions and 18 deletions
index.html
View file @ 65b0026b
...@@ -11,6 +11,8 @@ ...@@ -11,6 +11,8 @@
<body> <body>
<div id="app"></div> <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/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> <script type="module" src="/src/main.ts"></script>
</body> </body>
......
src/components/main.vue
View file @ 65b0026b
...@@ -4,22 +4,41 @@ ...@@ -4,22 +4,41 @@
<script lang="ts" setup> <script lang="ts" setup>
import useMap from '@/map' import useMap from '@/map'
import { nextTick, onMounted } from '@vue/runtime-core' import { nextTick, onMounted } from 'vue'
let map let map
onMounted(async () => { onMounted(async () => {
await nextTick() await nextTick()
map = useMap('SMap') // map = useMap('SMap').with({
.with({ // el: 'container',
el: 'container', // mode: '2D',
mode: '2D', // center: [0, 0],
center: [0, 0], // zoom: 5,
zoom: 5, // style: 'smap://styles/dark',
style: 'smap://styles/dark', // appKey: 'ACF69EDK17LON63GHPF081',
appKey: 'ACF69EDK17LON63GHPF081', // netType: 'internet',
netType: 'internet', // })
}) map = useMap('AIMap').with({
.on('load', () => console.log('loaded!!!!!')) el: 'container',
.on('click', (a, b) => console.log(a, b)) 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',
})
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> </script>
......
src/map/ai-map.ts
View file @ 65b0026b
import MyMap from './my-map' 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 { export default class AI_Map extends MyMap {
test() { constructor(config: MapConfig) {
console.log('test') 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)
} }
} }
src/map/index.ts
View file @ 65b0026b
import { MapConfig, MapType } from './types' import { MapConfig } from './types'
import S_Map from './s-map' import S_Map from './s-map'
import AI_Map from './ai-map' import AI_Map from './ai-map'
......
src/map/s-map.ts
View file @ 65b0026b
...@@ -14,6 +14,8 @@ declare const Plugins: { ...@@ -14,6 +14,8 @@ declare const Plugins: {
MaskBoundary: any MaskBoundary: any
} }
type Fn = (cb: CallBack) => void
export default class S_Map extends MyMap { export default class S_Map extends MyMap {
constructor(config: MapConfig) { constructor(config: MapConfig) {
if (!config.netType) { if (!config.netType) {
......
src/map/types.ts
View file @ 65b0026b
...@@ -13,18 +13,25 @@ export interface MapOptions { ...@@ -13,18 +13,25 @@ export interface MapOptions {
netType: 'internet' | 'affairs' | 'local3D' | 'affairs3D' | 'njdl' netType: 'internet' | 'affairs' | 'local3D' | 'affairs3D' | 'njdl'
mode: '2D' | '3D' mode: '2D' | '3D'
center: [number, number] center: [number, number]
zooms: [number, number]
zoom: number zoom: number
zooms: [number, number]
bearing: number
pitch: number pitch: number
pitchs: [number, number]
style: string style: string
/**
* 在SMap中作为appKey使用
* 在AIMap中作为accessToken使用
*/
appKey: string appKey: string
showBuildingBlock: boolean showBuildingBlock: boolean
rotateEnable: boolean rotateEnable: boolean
baseApiUrl: string
} }
export type CallBack = (arg: unknown, oth?: unknown) => void export type CallBack = (arg: unknown, oth?: unknown) => void
export interface Listener { export type Listener = {
load: 'onLoad' load: 'onLoad'
zoom: 'onZoom' zoom: 'onZoom'
move: 'onMove' move: 'onMove'
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment