1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
| import AMapLoader from '@amap/amap-jsapi-loader'
|
| var mapInitDone = false
| var onMapMountedEvents = []
|
| var AMap
| // 地图对象
| var map
| // 卫星图层
| var satellite
| // 鼠标绘图
| var mouseTool
| // 3D图层
| var object3Dlayer
| // 地图拖动状态
| var isDragging = false
|
| // 地图加载完成触发
| function onMapMounted(...events) {
| if (mapInitDone) {
| events.forEach((e) => {
| e()
| })
| } else {
| onMapMountedEvents = onMapMountedEvents.concat(events)
| }
| }
|
| function createMap(id) {
| AMapLoader.load({
| key: '520c5e5cf44c7793104e500cbf0ed711', // 申请好的Web端开发者Key，首次调用 load 时必填
| version: '2.0', // 指定要加载的 JS API 的版本，缺省时默认为 1.4.15
| // 需要使用的的插件列表，如比例尺'AMap.Scale'等
| plugins: [
| 'AMap.ElasticMarker',
| 'AMap.ControlBar',
| 'AMap.ToolBar',
| 'AMap.Scale',
| 'AMap.DistrictSearch',
| // 'AMap.DragRoute',
| // 'AMap.MouseTool',
| // 'AMap.PolygonEditor'
| ],
| })
| .then((_AMap) => {
| AMap = _AMap
| _initMap(id)
| mapInitDone = true
| onMapMountedEvents.forEach((e) => {
| e()
| })
| onMapMountedEvents = []
| console.log('-------------------map init done')
| })
| .catch((e) => {
| console.log(e)
| })
| }
|
| function destroyMap() {
| map?.destroy()
| map = null
| mapInitDone = false
| }
|
| function _initMap(elementId) {
| map = new AMap.Map(elementId, {
| // mapStyle: 'amap://styles/e1e78509de64ddcd2efb4cb34c6fae2a',
| features: ['bg', 'road'],
| pitch: 0, // 地图俯仰角度，有效范围 0 度- 83 度
| viewMode: '3D', // 地图模式
| resizeEnable: true,
| center: [121.6039283, 31.25295567],
| zooms: [2, 26],
| zoom: 11,
| })
| // map = new AMap.Map(elementId);
|
| // 添加卫星地图
| satellite = new AMap.TileLayer.Satellite()
| // const roadNet = new AMap.TileLayer.RoadNet()
| satellite.hide()
| map.add([satellite])
|
| // _initMouseTool();
| // _init3DLayer();
| // _initDragEvent();
| }
|
| // 鼠标绘图初始化
| function _initMouseTool() {
| mouseTool = new AMap.MouseTool(map)
| }
|
| // 3D图层初始化
| function _init3DLayer() {
| object3Dlayer = new AMap.Object3DLayer()
| map.add(object3Dlayer)
| }
|
| // 设置地图拖拽监听事件
| function _initDragEvent() {
| let dragEndEvent
| map.on('dragstart', () => {
| clearTimeout(dragEndEvent)
| isDragging = true
| })
| map.on('dragend', function () {
| dragEndEvent = setTimeout(() => {
| isDragging = false
| }, 8000)
| })
| }
|
| export {
| createMap,
| destroyMap,
| onMapMounted,
| map,
| AMap,
| satellite,
| mouseTool,
| object3Dlayer,
| isDragging,
| }
|
|
