gdmap-utils 1.1.8 → 1.1.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/.husky/pre-commit +1 -1
- package/.prettierrc.json +17 -17
- package/README.md +50 -50
- package/dist/index.js +1 -1
- package/dist/index.js.map +1 -1
- package/examples/1_init.html +23 -23
- package/examples/2_mapInit.html +48 -48
- package/examples/3_MarkerLayer.html +565 -565
- package/examples/4_LabelMarkerLayer.html +574 -574
- package/index.html +134 -134
- package/package.json +48 -45
- package/src/LayerManager.ts +49 -49
- package/src/MapSourceImport.ts +23 -23
- package/src/MapUtils.ts +154 -150
- package/src/gdMap/gdHelper.js +194 -194
- package/src/gdMap/gdHelper.ts +85 -85
- package/src/gdMapUtils.js +377 -377
- package/src/index.ts +1 -1
- package/src/layers/MarkerClusterLayer.ts +30 -30
- package/src/layers/baseMarkerLayer/LabelMarkerLayer.ts +238 -238
- package/src/layers/baseMarkerLayer/MarkerLayer.ts +206 -206
- package/src/layers/baseMarkerLayer/index.ts +354 -354
- package/src/layers/index.ts +5 -5
- package/src/layers copy/LabelMarkerLayer.js +122 -122
- package/src/layers copy/MarkerClusterLayer.js +155 -155
- package/src/layers copy/MarkerLayer.js +267 -267
- package/src/layers copy/OverlayGroupManager.js +254 -254
- package/src/types/BaseMarkerLayer.d.ts +87 -87
- package/src/types/MapUtils.d.ts +53 -53
- package/src/types/amap.d.ts +11 -11
- package/src/types/index.d.ts +12 -12
- package/tsconfig.json +26 -26
- package/webpack.config.js +104 -98
package/index.html
CHANGED
|
@@ -1,135 +1,135 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8">
|
|
5
|
-
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
6
|
-
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
|
7
|
-
<title>点聚合</title>
|
|
8
|
-
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
|
|
9
|
-
<style>
|
|
10
|
-
html, body, #container {
|
|
11
|
-
height: 100%;
|
|
12
|
-
width: 100%;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
.input-card {
|
|
16
|
-
width: 25rem;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
.input-card .btn {
|
|
20
|
-
width: 7rem;
|
|
21
|
-
margin-right: .7rem;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
.input-card .btn:last-child {
|
|
25
|
-
margin-right: 0;
|
|
26
|
-
}
|
|
27
|
-
</style>
|
|
28
|
-
</head>
|
|
29
|
-
<body>
|
|
30
|
-
<div id="container" class="map" tabindex="0"></div>
|
|
31
|
-
<div class="input-card">
|
|
32
|
-
<h4>聚合点效果切换</h4>
|
|
33
|
-
<div class="input-item">
|
|
34
|
-
<input type="button" class="btn" value="默认样式" id="add0" onclick='addCluster(0)'/>
|
|
35
|
-
<input type="button" class="btn" value="自定义图标" id="add1" onclick='addCluster(1)'/>
|
|
36
|
-
<input type="button" class="btn" value="完全自定义" id="add2" onclick='addCluster(2)'/>
|
|
37
|
-
</div>
|
|
38
|
-
</div>
|
|
39
|
-
<script src="//a.amap.com/jsapi_demos/static/china.js"></script>
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
<script src="https://webapi.amap.com/maps?v=2.0&key=9506c73ed67acb0a09f1aabf88df4819&plugin=AMap.MarkerCluster"></script>
|
|
43
|
-
|
|
44
|
-
<script type="text/javascript">
|
|
45
|
-
var cluster;
|
|
46
|
-
|
|
47
|
-
var map = new AMap.Map("container", {
|
|
48
|
-
center: [104.937478,35.439575],
|
|
49
|
-
zoom: 5
|
|
50
|
-
});
|
|
51
|
-
|
|
52
|
-
var gridSize = 60
|
|
53
|
-
// 数据中需包含经纬度信息字段 lnglat
|
|
54
|
-
// var points = [
|
|
55
|
-
// { lnglat: ["108.939621", "34.343147"] },
|
|
56
|
-
// { lnglat: ["112.985037", "23.15046"] },
|
|
57
|
-
// ...
|
|
58
|
-
// ...
|
|
59
|
-
// ]
|
|
60
|
-
var count = points.length;
|
|
61
|
-
|
|
62
|
-
var _renderClusterMarker = function (context) {
|
|
63
|
-
var factor = Math.pow(context.count / count, 1 / 18);
|
|
64
|
-
var div = document.createElement('div');
|
|
65
|
-
var Hue = 180 - factor * 180;
|
|
66
|
-
var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
|
|
67
|
-
var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
|
|
68
|
-
var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
|
|
69
|
-
var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
|
|
70
|
-
div.style.backgroundColor = bgColor;
|
|
71
|
-
var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
|
|
72
|
-
div.style.width = div.style.height = size + 'px';
|
|
73
|
-
div.style.border = 'solid 1px ' + borderColor;
|
|
74
|
-
div.style.borderRadius = size / 2 + 'px';
|
|
75
|
-
div.style.boxShadow = '0 0 5px ' + shadowColor;
|
|
76
|
-
div.innerHTML = context.count;
|
|
77
|
-
div.style.lineHeight = size + 'px';
|
|
78
|
-
div.style.color = fontColor;
|
|
79
|
-
div.style.fontSize = '14px';
|
|
80
|
-
div.style.textAlign = 'center';
|
|
81
|
-
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
|
|
82
|
-
context.marker.setContent(div)
|
|
83
|
-
};
|
|
84
|
-
var _renderMarker = function(context) {
|
|
85
|
-
var content = '<div style="background-color: hsla(180, 100%, 50%, 0.3); height: 18px; width: 18px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 3px;"></div>';
|
|
86
|
-
var offset = new AMap.Pixel(-9, -9);
|
|
87
|
-
context.marker.setContent(content)
|
|
88
|
-
context.marker.setOffset(offset)
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
addCluster(2);
|
|
92
|
-
|
|
93
|
-
function addCluster(tag) {
|
|
94
|
-
if (cluster) {
|
|
95
|
-
cluster.setMap(null);
|
|
96
|
-
}
|
|
97
|
-
if (tag == 2) {//完全自定义
|
|
98
|
-
cluster = new AMap.MarkerCluster(map, points, {
|
|
99
|
-
gridSize: gridSize, // 设置网格像素大小
|
|
100
|
-
renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
|
|
101
|
-
renderMarker: _renderMarker, // 自定义非聚合点样式
|
|
102
|
-
});
|
|
103
|
-
} else if (tag == 1) {//自定义图标
|
|
104
|
-
var sts = [{
|
|
105
|
-
url: "//a.amap.com/jsapi_demos/static/images/blue.png",
|
|
106
|
-
size: new AMap.Size(32, 32),
|
|
107
|
-
offset: new AMap.Pixel(-16, -16)
|
|
108
|
-
}, {
|
|
109
|
-
url: "//a.amap.com/jsapi_demos/static/images/green.png",
|
|
110
|
-
size: new AMap.Size(32, 32),
|
|
111
|
-
offset: new AMap.Pixel(-16, -16)
|
|
112
|
-
}, {
|
|
113
|
-
url: "//a.amap.com/jsapi_demos/static/images/orange.png",
|
|
114
|
-
size: new AMap.Size(36, 36),
|
|
115
|
-
offset: new AMap.Pixel(-18, -18)
|
|
116
|
-
}, {
|
|
117
|
-
url: "//a.amap.com/jsapi_demos/static/images/red.png",
|
|
118
|
-
size: new AMap.Size(48, 48),
|
|
119
|
-
offset: new AMap.Pixel(-24, -24)
|
|
120
|
-
}, {
|
|
121
|
-
url: "//a.amap.com/jsapi_demos/static/images/darkRed.png",
|
|
122
|
-
size: new AMap.Size(48, 48),
|
|
123
|
-
offset: new AMap.Pixel(-24, -24)
|
|
124
|
-
}];
|
|
125
|
-
cluster = new AMap.MarkerCluster(map, points, {
|
|
126
|
-
styles: sts,
|
|
127
|
-
gridSize: gridSize
|
|
128
|
-
});
|
|
129
|
-
} else {//默认样式
|
|
130
|
-
cluster = new AMap.MarkerCluster(map, points, {gridSize: gridSize});
|
|
131
|
-
}
|
|
132
|
-
}
|
|
133
|
-
</script>
|
|
134
|
-
</body>
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="utf-8">
|
|
5
|
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
6
|
+
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
|
|
7
|
+
<title>点聚合</title>
|
|
8
|
+
<link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
|
|
9
|
+
<style>
|
|
10
|
+
html, body, #container {
|
|
11
|
+
height: 100%;
|
|
12
|
+
width: 100%;
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
.input-card {
|
|
16
|
+
width: 25rem;
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
.input-card .btn {
|
|
20
|
+
width: 7rem;
|
|
21
|
+
margin-right: .7rem;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
.input-card .btn:last-child {
|
|
25
|
+
margin-right: 0;
|
|
26
|
+
}
|
|
27
|
+
</style>
|
|
28
|
+
</head>
|
|
29
|
+
<body>
|
|
30
|
+
<div id="container" class="map" tabindex="0"></div>
|
|
31
|
+
<div class="input-card">
|
|
32
|
+
<h4>聚合点效果切换</h4>
|
|
33
|
+
<div class="input-item">
|
|
34
|
+
<input type="button" class="btn" value="默认样式" id="add0" onclick='addCluster(0)'/>
|
|
35
|
+
<input type="button" class="btn" value="自定义图标" id="add1" onclick='addCluster(1)'/>
|
|
36
|
+
<input type="button" class="btn" value="完全自定义" id="add2" onclick='addCluster(2)'/>
|
|
37
|
+
</div>
|
|
38
|
+
</div>
|
|
39
|
+
<script src="//a.amap.com/jsapi_demos/static/china.js"></script>
|
|
40
|
+
|
|
41
|
+
|
|
42
|
+
<script src="https://webapi.amap.com/maps?v=2.0&key=9506c73ed67acb0a09f1aabf88df4819&plugin=AMap.MarkerCluster"></script>
|
|
43
|
+
|
|
44
|
+
<script type="text/javascript">
|
|
45
|
+
var cluster;
|
|
46
|
+
|
|
47
|
+
var map = new AMap.Map("container", {
|
|
48
|
+
center: [104.937478,35.439575],
|
|
49
|
+
zoom: 5
|
|
50
|
+
});
|
|
51
|
+
|
|
52
|
+
var gridSize = 60
|
|
53
|
+
// 数据中需包含经纬度信息字段 lnglat
|
|
54
|
+
// var points = [
|
|
55
|
+
// { lnglat: ["108.939621", "34.343147"] },
|
|
56
|
+
// { lnglat: ["112.985037", "23.15046"] },
|
|
57
|
+
// ...
|
|
58
|
+
// ...
|
|
59
|
+
// ]
|
|
60
|
+
var count = points.length;
|
|
61
|
+
|
|
62
|
+
var _renderClusterMarker = function (context) {
|
|
63
|
+
var factor = Math.pow(context.count / count, 1 / 18);
|
|
64
|
+
var div = document.createElement('div');
|
|
65
|
+
var Hue = 180 - factor * 180;
|
|
66
|
+
var bgColor = 'hsla(' + Hue + ',100%,40%,0.7)';
|
|
67
|
+
var fontColor = 'hsla(' + Hue + ',100%,90%,1)';
|
|
68
|
+
var borderColor = 'hsla(' + Hue + ',100%,40%,1)';
|
|
69
|
+
var shadowColor = 'hsla(' + Hue + ',100%,90%,1)';
|
|
70
|
+
div.style.backgroundColor = bgColor;
|
|
71
|
+
var size = Math.round(30 + Math.pow(context.count / count, 1 / 5) * 20);
|
|
72
|
+
div.style.width = div.style.height = size + 'px';
|
|
73
|
+
div.style.border = 'solid 1px ' + borderColor;
|
|
74
|
+
div.style.borderRadius = size / 2 + 'px';
|
|
75
|
+
div.style.boxShadow = '0 0 5px ' + shadowColor;
|
|
76
|
+
div.innerHTML = context.count;
|
|
77
|
+
div.style.lineHeight = size + 'px';
|
|
78
|
+
div.style.color = fontColor;
|
|
79
|
+
div.style.fontSize = '14px';
|
|
80
|
+
div.style.textAlign = 'center';
|
|
81
|
+
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
|
|
82
|
+
context.marker.setContent(div)
|
|
83
|
+
};
|
|
84
|
+
var _renderMarker = function(context) {
|
|
85
|
+
var content = '<div style="background-color: hsla(180, 100%, 50%, 0.3); height: 18px; width: 18px; border: 1px solid hsl(180, 100%, 40%); border-radius: 12px; box-shadow: hsl(180, 100%, 50%) 0px 0px 3px;"></div>';
|
|
86
|
+
var offset = new AMap.Pixel(-9, -9);
|
|
87
|
+
context.marker.setContent(content)
|
|
88
|
+
context.marker.setOffset(offset)
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
addCluster(2);
|
|
92
|
+
|
|
93
|
+
function addCluster(tag) {
|
|
94
|
+
if (cluster) {
|
|
95
|
+
cluster.setMap(null);
|
|
96
|
+
}
|
|
97
|
+
if (tag == 2) {//完全自定义
|
|
98
|
+
cluster = new AMap.MarkerCluster(map, points, {
|
|
99
|
+
gridSize: gridSize, // 设置网格像素大小
|
|
100
|
+
renderClusterMarker: _renderClusterMarker, // 自定义聚合点样式
|
|
101
|
+
renderMarker: _renderMarker, // 自定义非聚合点样式
|
|
102
|
+
});
|
|
103
|
+
} else if (tag == 1) {//自定义图标
|
|
104
|
+
var sts = [{
|
|
105
|
+
url: "//a.amap.com/jsapi_demos/static/images/blue.png",
|
|
106
|
+
size: new AMap.Size(32, 32),
|
|
107
|
+
offset: new AMap.Pixel(-16, -16)
|
|
108
|
+
}, {
|
|
109
|
+
url: "//a.amap.com/jsapi_demos/static/images/green.png",
|
|
110
|
+
size: new AMap.Size(32, 32),
|
|
111
|
+
offset: new AMap.Pixel(-16, -16)
|
|
112
|
+
}, {
|
|
113
|
+
url: "//a.amap.com/jsapi_demos/static/images/orange.png",
|
|
114
|
+
size: new AMap.Size(36, 36),
|
|
115
|
+
offset: new AMap.Pixel(-18, -18)
|
|
116
|
+
}, {
|
|
117
|
+
url: "//a.amap.com/jsapi_demos/static/images/red.png",
|
|
118
|
+
size: new AMap.Size(48, 48),
|
|
119
|
+
offset: new AMap.Pixel(-24, -24)
|
|
120
|
+
}, {
|
|
121
|
+
url: "//a.amap.com/jsapi_demos/static/images/darkRed.png",
|
|
122
|
+
size: new AMap.Size(48, 48),
|
|
123
|
+
offset: new AMap.Pixel(-24, -24)
|
|
124
|
+
}];
|
|
125
|
+
cluster = new AMap.MarkerCluster(map, points, {
|
|
126
|
+
styles: sts,
|
|
127
|
+
gridSize: gridSize
|
|
128
|
+
});
|
|
129
|
+
} else {//默认样式
|
|
130
|
+
cluster = new AMap.MarkerCluster(map, points, {gridSize: gridSize});
|
|
131
|
+
}
|
|
132
|
+
}
|
|
133
|
+
</script>
|
|
134
|
+
</body>
|
|
135
135
|
</html>
|
package/package.json
CHANGED
|
@@ -1,45 +1,48 @@
|
|
|
1
|
-
{
|
|
2
|
-
"name": "gdmap-utils",
|
|
3
|
-
"version": "1.1.
|
|
4
|
-
"description": "高德地图工具库",
|
|
5
|
-
"main": "dist/index.js",
|
|
6
|
-
"types": "dist/index.d.ts",
|
|
7
|
-
"scripts": {
|
|
8
|
-
"build": "webpack --mode production",
|
|
9
|
-
"dev": "webpack serve --mode development",
|
|
10
|
-
"test": "echo \"Error: no test specified\" && exit 1",
|
|
11
|
-
"format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css,md}\"",
|
|
12
|
-
"format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,json,css,md}\"",
|
|
13
|
-
"prepare": "husky"
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
"
|
|
18
|
-
"
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
"
|
|
22
|
-
"
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
"@types
|
|
28
|
-
"
|
|
29
|
-
"
|
|
30
|
-
"
|
|
31
|
-
"
|
|
32
|
-
"
|
|
33
|
-
"
|
|
34
|
-
"
|
|
35
|
-
"
|
|
36
|
-
"
|
|
37
|
-
"
|
|
38
|
-
"webpack
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
"
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
1
|
+
{
|
|
2
|
+
"name": "gdmap-utils",
|
|
3
|
+
"version": "1.1.9",
|
|
4
|
+
"description": "高德地图工具库",
|
|
5
|
+
"main": "dist/index.js",
|
|
6
|
+
"types": "dist/index.d.ts",
|
|
7
|
+
"scripts": {
|
|
8
|
+
"build": "cross-env NODE_ENV=production webpack --mode production",
|
|
9
|
+
"dev": "cross-env NODE_ENV=development webpack serve --mode development",
|
|
10
|
+
"test": "echo \"Error: no test specified\" && exit 1",
|
|
11
|
+
"format": "prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css,md}\"",
|
|
12
|
+
"format:check": "prettier --check \"src/**/*.{ts,tsx,js,jsx,json,css,md}\"",
|
|
13
|
+
"prepare": "husky",
|
|
14
|
+
"release": "npm run build && npm publish"
|
|
15
|
+
},
|
|
16
|
+
"keywords": [
|
|
17
|
+
"map",
|
|
18
|
+
"utils",
|
|
19
|
+
"typescript"
|
|
20
|
+
],
|
|
21
|
+
"author": "quyue",
|
|
22
|
+
"license": "ISC",
|
|
23
|
+
"peerDependencies": {
|
|
24
|
+
"@amap/amap-jsapi-loader": "^1.0.1"
|
|
25
|
+
},
|
|
26
|
+
"devDependencies": {
|
|
27
|
+
"@amap/amap-jsapi-types": "^0.0.15",
|
|
28
|
+
"@types/node": "^24.10.1",
|
|
29
|
+
"cross-env": "^10.1.0",
|
|
30
|
+
"fork-ts-checker-webpack-plugin": "^9.1.0",
|
|
31
|
+
"html-webpack-plugin": "^5.6.6",
|
|
32
|
+
"husky": "^9.1.7",
|
|
33
|
+
"lint-staged": "^16.2.7",
|
|
34
|
+
"prettier": "^3.7.4",
|
|
35
|
+
"ts-loader": "^9.5.4",
|
|
36
|
+
"type-fest": "^5.3.1",
|
|
37
|
+
"typescript": "^5.9.3",
|
|
38
|
+
"webpack": "^5.103.0",
|
|
39
|
+
"webpack-cli": "^6.0.1",
|
|
40
|
+
"webpack-dev-server": "^5.2.3",
|
|
41
|
+
"yargs": "^18.0.0"
|
|
42
|
+
},
|
|
43
|
+
"lint-staged": {
|
|
44
|
+
"src/**/*.{ts,tsx,js,jsx,json,css,md}": [
|
|
45
|
+
"prettier --write"
|
|
46
|
+
]
|
|
47
|
+
}
|
|
48
|
+
}
|
package/src/LayerManager.ts
CHANGED
|
@@ -1,49 +1,49 @@
|
|
|
1
|
-
import type { LayerManger } from './types/index.d.ts';
|
|
2
|
-
import type { BaseMarkerLayerClass } from './layers/index.ts';
|
|
3
|
-
|
|
4
|
-
type LayerIns = InstanceType<BaseMarkerLayerClass>;
|
|
5
|
-
export class LayerManager {
|
|
6
|
-
layers: Map<string, LayerIns> = new Map(); //组合模式
|
|
7
|
-
|
|
8
|
-
addLayer(layer: LayerIns) {
|
|
9
|
-
if (this.hasLayer(layer)) {
|
|
10
|
-
throw new Error(`Layer with name "${layer.layerName}" already exists`);
|
|
11
|
-
}
|
|
12
|
-
this.layers.set(layer.layerName, layer);
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
removeLayer(layer: LayerIns) {
|
|
16
|
-
this.layers.delete(layer.layerName);
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
show(LayerName: string) {
|
|
20
|
-
let layer = this.layers.get(LayerName);
|
|
21
|
-
if (layer) {
|
|
22
|
-
layer.show();
|
|
23
|
-
}
|
|
24
|
-
}
|
|
25
|
-
|
|
26
|
-
hide(LayerName: string) {
|
|
27
|
-
let layer = this.layers.get(LayerName);
|
|
28
|
-
if (layer) {
|
|
29
|
-
layer.hide();
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
|
|
33
|
-
showAll() {
|
|
34
|
-
this.layers.forEach(val => val.show());
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
hideAll() {
|
|
38
|
-
this.layers.forEach(val => val.hide());
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
reload() {
|
|
42
|
-
this.layers.forEach(val => val.reload());
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
hasLayer(layer: LayerIns): boolean {
|
|
46
|
-
return this.layers.has(layer.layerName);
|
|
47
|
-
}
|
|
48
|
-
}
|
|
49
|
-
export default LayerManager;
|
|
1
|
+
import type { LayerManger } from './types/index.d.ts';
|
|
2
|
+
import type { BaseMarkerLayerClass } from './layers/index.ts';
|
|
3
|
+
|
|
4
|
+
type LayerIns = InstanceType<BaseMarkerLayerClass>;
|
|
5
|
+
export class LayerManager {
|
|
6
|
+
layers: Map<string, LayerIns> = new Map(); //组合模式
|
|
7
|
+
|
|
8
|
+
addLayer(layer: LayerIns) {
|
|
9
|
+
if (this.hasLayer(layer)) {
|
|
10
|
+
throw new Error(`Layer with name "${layer.layerName}" already exists`);
|
|
11
|
+
}
|
|
12
|
+
this.layers.set(layer.layerName, layer);
|
|
13
|
+
}
|
|
14
|
+
|
|
15
|
+
removeLayer(layer: LayerIns) {
|
|
16
|
+
this.layers.delete(layer.layerName);
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
show(LayerName: string) {
|
|
20
|
+
let layer = this.layers.get(LayerName);
|
|
21
|
+
if (layer) {
|
|
22
|
+
layer.show();
|
|
23
|
+
}
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
hide(LayerName: string) {
|
|
27
|
+
let layer = this.layers.get(LayerName);
|
|
28
|
+
if (layer) {
|
|
29
|
+
layer.hide();
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
showAll() {
|
|
34
|
+
this.layers.forEach(val => val.show());
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
hideAll() {
|
|
38
|
+
this.layers.forEach(val => val.hide());
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
reload() {
|
|
42
|
+
this.layers.forEach(val => val.reload());
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
hasLayer(layer: LayerIns): boolean {
|
|
46
|
+
return this.layers.has(layer.layerName);
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
export default LayerManager;
|
package/src/MapSourceImport.ts
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
|
-
import AMapLoader from '@amap/amap-jsapi-loader';
|
|
2
|
-
import type { AMap, loaderOpts } from './types/amap.d.ts'; //TODO 项目配置ts自动引入，移除导入信息
|
|
3
|
-
|
|
4
|
-
class MapSourceImport {
|
|
5
|
-
static async loadScript(opts: loaderOpts) {
|
|
6
|
-
// 某些API加载前必须设置秘钥
|
|
7
|
-
// window._AMapSecurityConfig = {
|
|
8
|
-
// securityJsCode: process.env.VUE_APP_GD_MAP_CODE, // 安全密钥
|
|
9
|
-
// };
|
|
10
|
-
// 确保每次的AMap都是合法的所以不分开创建
|
|
11
|
-
return AMapLoader.load(opts)
|
|
12
|
-
.then((rawAMap: typeof AMap) => {
|
|
13
|
-
// 将 AMap 全局对象挂载到 window 上
|
|
14
|
-
return rawAMap;
|
|
15
|
-
})
|
|
16
|
-
.catch(e => {
|
|
17
|
-
console.error(e);
|
|
18
|
-
throw new Error(e);
|
|
19
|
-
});
|
|
20
|
-
}
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
export default MapSourceImport;
|
|
1
|
+
import AMapLoader from '@amap/amap-jsapi-loader';
|
|
2
|
+
import type { AMap, loaderOpts } from './types/amap.d.ts'; //TODO 项目配置ts自动引入，移除导入信息
|
|
3
|
+
|
|
4
|
+
class MapSourceImport {
|
|
5
|
+
static async loadScript(opts: loaderOpts) {
|
|
6
|
+
// 某些API加载前必须设置秘钥
|
|
7
|
+
// window._AMapSecurityConfig = {
|
|
8
|
+
// securityJsCode: process.env.VUE_APP_GD_MAP_CODE, // 安全密钥
|
|
9
|
+
// };
|
|
10
|
+
// 确保每次的AMap都是合法的所以不分开创建
|
|
11
|
+
return AMapLoader.load(opts)
|
|
12
|
+
.then((rawAMap: typeof AMap) => {
|
|
13
|
+
// 将 AMap 全局对象挂载到 window 上
|
|
14
|
+
return rawAMap;
|
|
15
|
+
})
|
|
16
|
+
.catch(e => {
|
|
17
|
+
console.error(e);
|
|
18
|
+
throw new Error(e);
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
export default MapSourceImport;
|