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.6039283, 31.25295567],
| 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 };
|
|
