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
| import AMapLoader from '@amap/amap-jsapi-loader';
|
| var mapInitDone = false;
| var onMapMountedEvents = [];
|
| var AMap;
| // 地图对象
| var map;
| // 卫星图层
| var satellite;
| // 鼠标绘图
| var mouseTool;
|
| // 地图加载完成触发
| 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: 0, // 地图俯仰角度，有效范围 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]);
|
| // const rPx = 100;
| // const tPx = 110;
| // 添加地图控制工具
| // map.addControl(
| // new AMap.ControlBar({
| // position: {
| // right: rPx + 'px',
| // top: tPx + 'px'
| // }
| // })
| // );
| // map.addControl(
| // new AMap.ToolBar({
| // position: {
| // right: rPx + 30 + 'px',
| // top: tPx + 90 + 'px'
| // }
| // })
| // );
|
| //
| mouseTool = new AMap.MouseTool(map);
| }
|
| export { createMap, onMapMounted, map, AMap, mouseTool };
|
|
