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
| 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: 'c55f27799afbfa69dc5a3fad90cafe51', // 申请好的Web端开发者Key，首次调用 load 时必填
| version: '2.0', // 指定要加载的 JS API 的版本，缺省时默认为 1.4.15
| plugins: [
| 'Map3D',
| 'ElasticMarker',
| 'AMap.ControlBar',
| 'AMap.ToolBar',
| 'AMap.Scale',
| 'AMap.DragRoute',
| 'AMap.MouseTool',
| 'AMap.PolygonEditor'
| ] // 需要使用的的插件列表，如比例尺'AMap.Scale'等
| })
| .then((_AMap) => {
| AMap = _AMap
| _initMap(id)
| mapInitDone = true
| onMapMountedEvents.forEach((e) => {
| e()
| })
| onMapMountedEvents = []
| })
| .catch((e) => {
| console.log(e)
| })
| }
|
| function _initMap(elementId) {
| map = new AMap.Map(elementId, {
| rotateEnable: true,
| pitchEnable: true,
| alwaysRender: false,
| showLabel: true,
| showBuildingBlock: true,
| mapStyle: 'amap://styles/e1e78509de64ddcd2efb4cb34c6fae2a',
| features: ['bg', 'road'],
| pitch: 45, // 地图俯仰角度，有效范围 0 度- 83 度
| viewMode: '3D', // 地图模式
| resizeEnable: true,
| center: [121.603928, 31.252955],
| zooms: [3, 18],
| zoom: 14
| })
|
| // 添加卫星地图
| satellite = new AMap.TileLayer.Satellite()
| 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, onMapMounted, map, AMap, mouseTool, object3Dlayer, isDragging }
|
|
