@sl-utils/map 1.0.4 → 1.0.6
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/dist/map/canvas-map.js +98 -0
- package/dist/map/canvas-map.js.map +1 -0
- package/dist/sl-utils-map.js +22 -95
- package/dist/sl-utils-map.js.map +1 -1
- package/package.json +1 -1
- package/src/map/canvas-map.ts +126 -0
- package/src/sl-utils-map.ts +4 -126
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
+
exports.SLUMap = void 0;
|
|
4
|
+
const leaflet_1 = require("leaflet");
|
|
5
|
+
const AMapLoader = require("@amap/amap-jsapi-loader");
|
|
6
|
+
const leaflet_2 = require("../leaflet");
|
|
7
|
+
class SLUMap {
|
|
8
|
+
constructor(ele, options = {}) {
|
|
9
|
+
this.curs = Object.create(null);
|
|
10
|
+
this.createMap(ele, options);
|
|
11
|
+
}
|
|
12
|
+
showMap(names = []) {
|
|
13
|
+
const { map, curs } = this;
|
|
14
|
+
if (map && map instanceof leaflet_1.Map) {
|
|
15
|
+
let mapSource = names[0].split('.')[0];
|
|
16
|
+
let center = map.getCenter();
|
|
17
|
+
let zoom = map.getZoom();
|
|
18
|
+
map.options.crs = mapSource === 'Baidu' ? leaflet_2.SLCRS.Baidu : leaflet_1.CRS.EPSG3857;
|
|
19
|
+
map._resetView(center, zoom, true);
|
|
20
|
+
names?.forEach(name => {
|
|
21
|
+
if (curs[name])
|
|
22
|
+
return;
|
|
23
|
+
let net = new leaflet_2.SLULeafletNetMap(name);
|
|
24
|
+
net.addTo(map);
|
|
25
|
+
curs[name] = net;
|
|
26
|
+
});
|
|
27
|
+
for (const key in curs) {
|
|
28
|
+
let name = key;
|
|
29
|
+
let flag = names.includes(name);
|
|
30
|
+
if (flag)
|
|
31
|
+
continue;
|
|
32
|
+
curs[name].remove();
|
|
33
|
+
Reflect.deleteProperty(curs, key);
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
return this;
|
|
37
|
+
}
|
|
38
|
+
async createMap(ele, options) {
|
|
39
|
+
const { type } = options;
|
|
40
|
+
let map;
|
|
41
|
+
switch (type) {
|
|
42
|
+
case "A":
|
|
43
|
+
this.map = await this.initAmap(ele, options);
|
|
44
|
+
break;
|
|
45
|
+
default:
|
|
46
|
+
this.map = await this.initLeaflet(ele, options);
|
|
47
|
+
this.showMap([leaflet_2.SLEMap.tianDiTuNormalMap, leaflet_2.SLEMap.tianDiTuNormalAnnotion]);
|
|
48
|
+
break;
|
|
49
|
+
}
|
|
50
|
+
}
|
|
51
|
+
initLeaflet(ele, opt) {
|
|
52
|
+
const { zoom = 11, minZoom = 2, maxZoom = 20, center: [lat, lng] = [22.68471, 114.12027], dragging = true, zoomControl = false, attributionControl = false, doubleClickZoom = false, closePopupOnClick = false } = opt;
|
|
53
|
+
let param = {
|
|
54
|
+
dragging,
|
|
55
|
+
zoomControl,
|
|
56
|
+
zoom,
|
|
57
|
+
minZoom,
|
|
58
|
+
maxZoom,
|
|
59
|
+
center: (0, leaflet_1.latLng)(lat, lng),
|
|
60
|
+
attributionControl,
|
|
61
|
+
doubleClickZoom,
|
|
62
|
+
crs: leaflet_1.CRS.EPSG3857,
|
|
63
|
+
closePopupOnClick,
|
|
64
|
+
};
|
|
65
|
+
let map = new leaflet_1.Map(ele, param);
|
|
66
|
+
return Promise.resolve(map);
|
|
67
|
+
}
|
|
68
|
+
async initAmap(ele, opt) {
|
|
69
|
+
const { zoom = 11, minZoom = 2, maxZoom = 20, center: [lat, lng] = [22.68471, 114.12027], dragging = true, zoomControl = false, attributionControl = false, doubleClickZoom = false, closePopupOnClick = false, showLabel = true } = opt;
|
|
70
|
+
return AMapLoader.load({
|
|
71
|
+
"key": "87e1b1e9aa88724f69208972546fdd57",
|
|
72
|
+
"version": "1.4.15",
|
|
73
|
+
"plugins": ["Map3D"]
|
|
74
|
+
}).then(() => {
|
|
75
|
+
let map = new AMap.Map(ele, {
|
|
76
|
+
center: [lng, lat],
|
|
77
|
+
disableSocket: true,
|
|
78
|
+
viewMode: '2D',
|
|
79
|
+
mapStyle: 'amap://styles/dfd45346264e1fa2bb3b796f36cab42a',
|
|
80
|
+
skyColor: "#A3CCFF",
|
|
81
|
+
lang: 'zh_cn',
|
|
82
|
+
labelzIndex: 130,
|
|
83
|
+
pitch: 40,
|
|
84
|
+
zoom: zoom,
|
|
85
|
+
zooms: [minZoom, maxZoom],
|
|
86
|
+
dragEnable: dragging,
|
|
87
|
+
doubleClickZoom: doubleClickZoom,
|
|
88
|
+
keyboardEnable: false,
|
|
89
|
+
isHotspot: false,
|
|
90
|
+
showLabel,
|
|
91
|
+
layers: [],
|
|
92
|
+
});
|
|
93
|
+
return map;
|
|
94
|
+
});
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
exports.SLUMap = SLUMap;
|
|
98
|
+
//# sourceMappingURL=canvas-map.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"canvas-map.js","sourceRoot":"","sources":["../../src/map/canvas-map.ts"],"names":[],"mappings":";;;AAAA,qCAA2C;AAC3C,sDAAsD;AACtD,wCAA6D;AAG7D,MAAa,MAAM;IAGf,YAAY,GAAW,EAAE,UAA8B,EAAE;QAMjD,SAAI,GAA+D,MAAM,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC;QAL3F,IAAI,CAAC,SAAS,CAAC,GAAG,EAAE,OAAO,CAAC,CAAA;IAChC,CAAC;IAOM,OAAO,CAAC,QAAuB,EAAE;QACpC,MAAM,EAAE,GAAG,EAAE,IAAI,EAAE,GAAG,IAAI,CAAC;QAC3B,IAAI,GAAG,IAAI,GAAG,YAAY,aAAG,EAAE,CAAC;YAC5B,IAAI,SAAS,GAAW,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,CAAA;YAC9C,IAAI,MAAM,GAAG,GAAG,CAAC,SAAS,EAAE,CAAC;YAC7B,IAAI,IAAI,GAAG,GAAG,CAAC,OAAO,EAAE,CAAC;YACzB,GAAG,CAAC,OAAO,CAAC,GAAG,GAAG,SAAS,KAAK,OAAO,CAAC,CAAC,CAAC,eAAK,CAAC,KAAK,CAAC,CAAC,CAAC,aAAG,CAAC,QAAQ,CAAC;YACpE,GAAW,CAAC,UAAU,CAAC,MAAM,EAAE,IAAI,EAAE,IAAI,CAAC,CAAC;YAC5C,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,EAAE;gBAClB,IAAI,IAAI,CAAC,IAAI,CAAC;oBAAE,OAAO;gBACvB,IAAI,GAAG,GAAG,IAAI,0BAAgB,CAAC,IAAI,CAAC,CAAA;gBACpC,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;gBACf,IAAI,CAAC,IAAI,CAAC,GAAG,GAAG,CAAC;YACrB,CAAC,CAAC,CAAC;YACH,KAAK,MAAM,GAAG,IAAI,IAAI,EAAE,CAAC;gBACrB,IAAI,IAAI,GAAW,GAAa,CAAC;gBACjC,IAAI,IAAI,GAAG,KAAK,CAAC,QAAQ,CAAC,IAAI,CAAC,CAAC;gBAChC,IAAI,IAAI;oBAAE,SAAS;gBACnB,IAAI,CAAC,IAAI,CAAC,CAAC,MAAM,EAAE,CAAC;gBACpB,OAAO,CAAC,cAAc,CAAC,IAAI,EAAE,GAAG,CAAC,CAAA;YACrC,CAAC;QACL,CAAC;QACD,OAAO,IAAI,CAAA;IACf,CAAC;IACO,KAAK,CAAC,SAAS,CAAC,GAAW,EAAE,OAA2B;QAC5D,MAAM,EAAE,IAAI,EAAE,GAAG,OAAO,CAAC;QACzB,IAAI,GAAqB,CAAC;QAC1B,QAAQ,IAAI,EAAE,CAAC;YACX,KAAK,GAAG;gBAAE,IAAI,CAAC,GAAG,GAAG,MAAM,IAAI,CAAC,QAAQ,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;gBAAC,MAAM;YAC9D;gBAAS,IAAI,CAAC,GAAG,GAAG,MAAM,IAAI,CAAC,WAAW,CAAC,GAAG,EAAE,OAAO,CAAC,CAAC;gBACrD,IAAI,CAAC,OAAO,CAAC,CAAC,gBAAM,CAAC,iBAAiB,EAAE,gBAAM,CAAC,sBAAsB,CAAC,CAAC,CAAC;gBACxE,MAAM;QACd,CAAC;IACL,CAAC;IAEO,WAAW,CAAC,GAAW,EAAE,GAAuB;QACpD,MAAM,EAAE,IAAI,GAAG,EAAE,EAAE,OAAO,GAAG,CAAC,EAAE,OAAO,GAAG,EAAE,EAAE,MAAM,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,QAAQ,EAAE,SAAS,CAAC,EAAE,QAAQ,GAAG,IAAI,EAAE,WAAW,GAAG,KAAK,EAAE,kBAAkB,GAAG,KAAK,EAAE,eAAe,GAAG,KAAK,EAAE,iBAAiB,GAAG,KAAK,EAAE,GAAG,GAAG,CAAC;QACvN,IAAI,KAAK,GAAiB;YACtB,QAAQ;YACR,WAAW;YACX,IAAI;YACJ,OAAO;YACP,OAAO;YACP,MAAM,EAAE,IAAA,gBAAM,EAAC,GAAG,EAAE,GAAG,CAAC;YACxB,kBAAkB;YAClB,eAAe;YACf,GAAG,EAAE,aAAG,CAAC,QAAQ;YACjB,iBAAiB;SACpB,CAAC;QACF,IAAI,GAAG,GAAG,IAAI,aAAG,CAAC,GAAG,EAAE,KAAK,CAAC,CAAC;QAC9B,OAAO,OAAO,CAAC,OAAO,CAAC,GAAG,CAAC,CAAA;IAC/B,CAAC;IAEO,KAAK,CAAC,QAAQ,CAAC,GAAW,EAAE,GAAuB;QACvD,MAAM,EAAE,IAAI,GAAG,EAAE,EAAE,OAAO,GAAG,CAAC,EAAE,OAAO,GAAG,EAAE,EAAE,MAAM,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC,GAAG,CAAC,QAAQ,EAAE,SAAS,CAAC,EAAE,QAAQ,GAAG,IAAI,EAAE,WAAW,GAAG,KAAK,EAAE,kBAAkB,GAAG,KAAK,EAAE,eAAe,GAAG,KAAK,EAAE,iBAAiB,GAAG,KAAK,EAAE,SAAS,GAAG,IAAI,EAAE,GAAG,GAAG,CAAC;QACzO,OAAO,UAAU,CAAC,IAAI,CAAC;YACnB,KAAK,EAAE,kCAAkC;YACzC,SAAS,EAAE,QAAQ;YACnB,SAAS,EAAE,CAAC,OAAO,CAAC;SACvB,CAAC,CAAC,IAAI,CAAC,GAAG,EAAE;YAET,IAAI,GAAG,GAAG,IAAI,IAAI,CAAC,GAAG,CAAC,GAAG,EAAE;gBAExB,MAAM,EAAE,CAAC,GAAG,EAAE,GAAG,CAAC;gBAClB,aAAa,EAAE,IAAI;gBACnB,QAAQ,EAAE,IAAI;gBACd,QAAQ,EAAE,gDAAgD;gBAC1D,QAAQ,EAAE,SAAS;gBACnB,IAAI,EAAE,OAAO;gBACb,WAAW,EAAE,GAAG;gBAChB,KAAK,EAAE,EAAE;gBACT,IAAI,EAAE,IAAI;gBACV,KAAK,EAAE,CAAC,OAAO,EAAE,OAAO,CAAC;gBACzB,UAAU,EAAE,QAAQ;gBACpB,eAAe,EAAE,eAAe;gBAChC,cAAc,EAAE,KAAK;gBACrB,SAAS,EAAE,KAAK;gBAChB,SAAS;gBACT,MAAM,EAAE,EAAE;aACb,CAAC,CAAC;YACH,OAAO,GAAG,CAAC;QACf,CAAC,CAAC,CAAA;IACN,CAAC;CACJ;AA/FD,wBA+FC"}
|
package/dist/sl-utils-map.js
CHANGED
|
@@ -1,100 +1,27 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
3
|
+
if (k2 === undefined) k2 = k;
|
|
4
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
5
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
6
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
7
|
+
}
|
|
8
|
+
Object.defineProperty(o, k2, desc);
|
|
9
|
+
}) : (function(o, m, k, k2) {
|
|
10
|
+
if (k2 === undefined) k2 = k;
|
|
11
|
+
o[k2] = m[k];
|
|
12
|
+
}));
|
|
13
|
+
var __exportStar = (this && this.__exportStar) || function(m, exports) {
|
|
14
|
+
for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
|
|
15
|
+
};
|
|
2
16
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.SLUMap = exports.MapCanvasDraw = void 0;
|
|
17
|
+
exports.SLUMap = exports.MapCanvasLayer = exports.MapCanvasEvent = exports.MapCanvasDraw = void 0;
|
|
18
|
+
__exportStar(require("./canvas"), exports);
|
|
4
19
|
var canvas_draw_1 = require("./map/canvas-draw");
|
|
5
20
|
Object.defineProperty(exports, "MapCanvasDraw", { enumerable: true, get: function () { return canvas_draw_1.MapCanvasDraw; } });
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
this.createMap(ele, options);
|
|
13
|
-
}
|
|
14
|
-
showMap(names = []) {
|
|
15
|
-
const { map, curs } = this;
|
|
16
|
-
if (map && map instanceof leaflet_1.Map) {
|
|
17
|
-
let mapSource = names[0].split('.')[0];
|
|
18
|
-
let center = map.getCenter();
|
|
19
|
-
let zoom = map.getZoom();
|
|
20
|
-
map.options.crs = mapSource === 'Baidu' ? leaflet_2.SLCRS.Baidu : leaflet_1.CRS.EPSG3857;
|
|
21
|
-
map._resetView(center, zoom, true);
|
|
22
|
-
names?.forEach(name => {
|
|
23
|
-
if (curs[name])
|
|
24
|
-
return;
|
|
25
|
-
let net = new leaflet_2.SLULeafletNetMap(name);
|
|
26
|
-
net.addTo(map);
|
|
27
|
-
curs[name] = net;
|
|
28
|
-
});
|
|
29
|
-
for (const key in curs) {
|
|
30
|
-
let name = key;
|
|
31
|
-
let flag = names.includes(name);
|
|
32
|
-
if (flag)
|
|
33
|
-
continue;
|
|
34
|
-
curs[name].remove();
|
|
35
|
-
Reflect.deleteProperty(curs, key);
|
|
36
|
-
}
|
|
37
|
-
}
|
|
38
|
-
return this;
|
|
39
|
-
}
|
|
40
|
-
async createMap(ele, options) {
|
|
41
|
-
const { type } = options;
|
|
42
|
-
let map;
|
|
43
|
-
switch (type) {
|
|
44
|
-
case "A":
|
|
45
|
-
this.map = await this.initAmap(ele, options);
|
|
46
|
-
break;
|
|
47
|
-
default:
|
|
48
|
-
this.map = await this.initLeaflet(ele, options);
|
|
49
|
-
this.showMap([leaflet_2.SLEMap.tianDiTuNormalMap, leaflet_2.SLEMap.tianDiTuNormalAnnotion]);
|
|
50
|
-
break;
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
initLeaflet(ele, opt) {
|
|
54
|
-
const { zoom = 11, minZoom = 2, maxZoom = 20, center: [lat, lng] = [22.68471, 114.12027], dragging = true, zoomControl = false, attributionControl = false, doubleClickZoom = false, closePopupOnClick = false } = opt;
|
|
55
|
-
let param = {
|
|
56
|
-
dragging,
|
|
57
|
-
zoomControl,
|
|
58
|
-
zoom,
|
|
59
|
-
minZoom,
|
|
60
|
-
maxZoom,
|
|
61
|
-
center: (0, leaflet_1.latLng)(lat, lng),
|
|
62
|
-
attributionControl,
|
|
63
|
-
doubleClickZoom,
|
|
64
|
-
crs: leaflet_1.CRS.EPSG3857,
|
|
65
|
-
closePopupOnClick,
|
|
66
|
-
};
|
|
67
|
-
let map = new leaflet_1.Map(ele, param);
|
|
68
|
-
return Promise.resolve(map);
|
|
69
|
-
}
|
|
70
|
-
async initAmap(ele, opt) {
|
|
71
|
-
const { zoom = 11, minZoom = 2, maxZoom = 20, center: [lat, lng] = [22.68471, 114.12027], dragging = true, zoomControl = false, attributionControl = false, doubleClickZoom = false, closePopupOnClick = false, showLabel = true } = opt;
|
|
72
|
-
return AMapLoader.load({
|
|
73
|
-
"key": "87e1b1e9aa88724f69208972546fdd57",
|
|
74
|
-
"version": "1.4.15",
|
|
75
|
-
"plugins": ["Map3D"]
|
|
76
|
-
}).then(() => {
|
|
77
|
-
let map = new AMap.Map(ele, {
|
|
78
|
-
center: [lng, lat],
|
|
79
|
-
disableSocket: true,
|
|
80
|
-
viewMode: '2D',
|
|
81
|
-
mapStyle: 'amap://styles/dfd45346264e1fa2bb3b796f36cab42a',
|
|
82
|
-
skyColor: "#A3CCFF",
|
|
83
|
-
lang: 'zh_cn',
|
|
84
|
-
labelzIndex: 130,
|
|
85
|
-
pitch: 40,
|
|
86
|
-
zoom: zoom,
|
|
87
|
-
zooms: [minZoom, maxZoom],
|
|
88
|
-
dragEnable: dragging,
|
|
89
|
-
doubleClickZoom: doubleClickZoom,
|
|
90
|
-
keyboardEnable: false,
|
|
91
|
-
isHotspot: false,
|
|
92
|
-
showLabel,
|
|
93
|
-
layers: [],
|
|
94
|
-
});
|
|
95
|
-
return map;
|
|
96
|
-
});
|
|
97
|
-
}
|
|
98
|
-
}
|
|
99
|
-
exports.SLUMap = SLUMap;
|
|
21
|
+
var canvas_event_1 = require("./map/canvas-event");
|
|
22
|
+
Object.defineProperty(exports, "MapCanvasEvent", { enumerable: true, get: function () { return canvas_event_1.MapCanvasEvent; } });
|
|
23
|
+
var canvas_layer_1 = require("./map/canvas-layer");
|
|
24
|
+
Object.defineProperty(exports, "MapCanvasLayer", { enumerable: true, get: function () { return canvas_layer_1.MapCanvasLayer; } });
|
|
25
|
+
var canvas_map_1 = require("./map/canvas-map");
|
|
26
|
+
Object.defineProperty(exports, "SLUMap", { enumerable: true, get: function () { return canvas_map_1.SLUMap; } });
|
|
100
27
|
//# sourceMappingURL=sl-utils-map.js.map
|
package/dist/sl-utils-map.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"sl-utils-map.js","sourceRoot":"","sources":["../src/sl-utils-map.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"sl-utils-map.js","sourceRoot":"","sources":["../src/sl-utils-map.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAAA,2CAAwB;AACxB,iDAAiD;AAAxC,4GAAA,aAAa,OAAA;AACtB,mDAAmD;AAA1C,8GAAA,cAAc,OAAA;AACvB,mDAAmD;AAA1C,8GAAA,cAAc,OAAA;AACvB,+CAAyC;AAAhC,oGAAA,MAAM,OAAA"}
|
package/package.json
CHANGED
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
import { CRS, Map, latLng } from "leaflet";
|
|
2
|
+
import * as AMapLoader from '@amap/amap-jsapi-loader';
|
|
3
|
+
import { SLCRS, SLEMap, SLULeafletNetMap } from '../leaflet';
|
|
4
|
+
declare var AMap: any;
|
|
5
|
+
|
|
6
|
+
export class SLUMap {
|
|
7
|
+
constructor(ele: string)
|
|
8
|
+
constructor(ele: string)
|
|
9
|
+
constructor(ele: string, options: Partial<SLSMapOpt> = {}) {
|
|
10
|
+
this.createMap(ele, options)
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
private map: L.Map | AMAP.Map;
|
|
14
|
+
/**当前正在显示的网络图层 */
|
|
15
|
+
private curs: Partial<{ [key in SLEMap]: SLULeafletNetMap | undefined }> = Object.create(null);
|
|
16
|
+
|
|
17
|
+
/**显示指定的网络图层 */
|
|
18
|
+
public showMap(names: Array<SLEMap> = []): this {
|
|
19
|
+
const { map, curs } = this;
|
|
20
|
+
if (map && map instanceof Map) {
|
|
21
|
+
let mapSource: string = names[0].split('.')[0]
|
|
22
|
+
let center = map.getCenter();
|
|
23
|
+
let zoom = map.getZoom();
|
|
24
|
+
map.options.crs = mapSource === 'Baidu' ? SLCRS.Baidu : CRS.EPSG3857; // 根据图层坐标系设置
|
|
25
|
+
(map as any)._resetView(center, zoom, true);
|
|
26
|
+
names?.forEach(name => {
|
|
27
|
+
if (curs[name]) return;
|
|
28
|
+
let net = new SLULeafletNetMap(name)
|
|
29
|
+
net.addTo(map);
|
|
30
|
+
curs[name] = net;
|
|
31
|
+
});
|
|
32
|
+
for (const key in curs) {
|
|
33
|
+
let name: SLEMap = key as SLEMap;
|
|
34
|
+
let flag = names.includes(name);
|
|
35
|
+
if (flag) continue;
|
|
36
|
+
curs[name].remove();
|
|
37
|
+
Reflect.deleteProperty(curs, key)
|
|
38
|
+
}
|
|
39
|
+
}
|
|
40
|
+
return this
|
|
41
|
+
}
|
|
42
|
+
private async createMap(ele: string, options: Partial<SLSMapOpt>) {
|
|
43
|
+
const { type } = options;
|
|
44
|
+
let map: L.Map | AMAP.Map;
|
|
45
|
+
switch (type) {
|
|
46
|
+
case "A": this.map = await this.initAmap(ele, options); break;
|
|
47
|
+
default: this.map = await this.initLeaflet(ele, options);
|
|
48
|
+
this.showMap([SLEMap.tianDiTuNormalMap, SLEMap.tianDiTuNormalAnnotion]);
|
|
49
|
+
break;
|
|
50
|
+
}
|
|
51
|
+
}
|
|
52
|
+
/**---------------leaflet地图的相关方法------------------- */
|
|
53
|
+
private initLeaflet(ele: string, opt: Partial<SLSMapOpt>) {
|
|
54
|
+
const { zoom = 11, minZoom = 2, maxZoom = 20, center: [lat, lng] = [22.68471, 114.12027], dragging = true, zoomControl = false, attributionControl = false, doubleClickZoom = false, closePopupOnClick = false } = opt;
|
|
55
|
+
let param: L.MapOptions = {
|
|
56
|
+
dragging,
|
|
57
|
+
zoomControl,
|
|
58
|
+
zoom,
|
|
59
|
+
minZoom,
|
|
60
|
+
maxZoom,
|
|
61
|
+
center: latLng(lat, lng),
|
|
62
|
+
attributionControl,
|
|
63
|
+
doubleClickZoom,
|
|
64
|
+
crs: CRS.EPSG3857,
|
|
65
|
+
closePopupOnClick,//点击地图不关闭弹出层
|
|
66
|
+
};
|
|
67
|
+
let map = new Map(ele, param);
|
|
68
|
+
return Promise.resolve(map)
|
|
69
|
+
}
|
|
70
|
+
/**---------------高德地图的相关方法------------------- */
|
|
71
|
+
private async initAmap(ele: string, opt: Partial<SLSMapOpt>) {
|
|
72
|
+
const { zoom = 11, minZoom = 2, maxZoom = 20, center: [lat, lng] = [22.68471, 114.12027], dragging = true, zoomControl = false, attributionControl = false, doubleClickZoom = false, closePopupOnClick = false, showLabel = true } = opt;
|
|
73
|
+
return AMapLoader.load({
|
|
74
|
+
"key": "87e1b1e9aa88724f69208972546fdd57", // 申请好的Web端开发者Key,首次调用 load 时必填
|
|
75
|
+
"version": "1.4.15", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
|
|
76
|
+
"plugins": ["Map3D"] //插件列表
|
|
77
|
+
}).then(() => {
|
|
78
|
+
// initAMapUI();
|
|
79
|
+
let map = new AMap.Map(ele, {
|
|
80
|
+
// mask: mask,
|
|
81
|
+
center: [lng, lat],
|
|
82
|
+
disableSocket: true,
|
|
83
|
+
viewMode: '2D',
|
|
84
|
+
mapStyle: 'amap://styles/dfd45346264e1fa2bb3b796f36cab42a',
|
|
85
|
+
skyColor: "#A3CCFF",
|
|
86
|
+
lang: 'zh_cn', //设置地图语言类型
|
|
87
|
+
labelzIndex: 130,
|
|
88
|
+
pitch: 40,
|
|
89
|
+
zoom: zoom,
|
|
90
|
+
zooms: [minZoom, maxZoom],
|
|
91
|
+
dragEnable: dragging,
|
|
92
|
+
doubleClickZoom: doubleClickZoom,
|
|
93
|
+
keyboardEnable: false,
|
|
94
|
+
isHotspot: false,
|
|
95
|
+
showLabel,
|
|
96
|
+
layers: [],
|
|
97
|
+
});
|
|
98
|
+
return map;
|
|
99
|
+
})
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
interface SLSMapOpt {
|
|
104
|
+
/**地图的类型 @param L leaflet插件 @param A 高德地图 @param B 百度地图 @default L*/
|
|
105
|
+
type: 'L' | 'A' | 'B',
|
|
106
|
+
/**地图中心点 [lat,lng] @default [22.68471,114.12027] */
|
|
107
|
+
center: [number, number],
|
|
108
|
+
/**地图初始层级 @default 11*/
|
|
109
|
+
zoom: number,
|
|
110
|
+
/**最小层级 @default 2*/
|
|
111
|
+
minZoom: number,
|
|
112
|
+
/**最大层级 @default 20*/
|
|
113
|
+
maxZoom: number,
|
|
114
|
+
/**拖拽功能 @default true */
|
|
115
|
+
dragging: boolean,
|
|
116
|
+
/**显示层级控制器 @default false */
|
|
117
|
+
zoomControl: boolean,
|
|
118
|
+
/**显示属性控制器 @default false */
|
|
119
|
+
attributionControl: boolean,
|
|
120
|
+
/**双击放大层级 @default false */
|
|
121
|
+
doubleClickZoom: boolean,
|
|
122
|
+
/**点击关闭弹窗 @default false */
|
|
123
|
+
closePopupOnClick: boolean,
|
|
124
|
+
/**显示标签(省会、地名等) @param AMap @default true */
|
|
125
|
+
showLabel: boolean,
|
|
126
|
+
}
|
package/src/sl-utils-map.ts
CHANGED
|
@@ -1,127 +1,5 @@
|
|
|
1
|
+
export * from './canvas'
|
|
1
2
|
export { MapCanvasDraw } from './map/canvas-draw'
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
declare var AMap: any;
|
|
6
|
-
|
|
7
|
-
export class SLUMap {
|
|
8
|
-
constructor(ele: string)
|
|
9
|
-
constructor(ele: string)
|
|
10
|
-
constructor(ele: string, options: Partial<SLSMapOpt> = {}) {
|
|
11
|
-
this.createMap(ele, options)
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
private map: L.Map | AMAP.Map;
|
|
15
|
-
/**当前正在显示的网络图层 */
|
|
16
|
-
private curs: Partial<{ [key in SLEMap]: SLULeafletNetMap | undefined }> = Object.create(null);
|
|
17
|
-
|
|
18
|
-
/**显示指定的网络图层 */
|
|
19
|
-
public showMap(names: Array<SLEMap> = []): this {
|
|
20
|
-
const { map, curs } = this;
|
|
21
|
-
if (map && map instanceof Map) {
|
|
22
|
-
let mapSource: string = names[0].split('.')[0]
|
|
23
|
-
let center = map.getCenter();
|
|
24
|
-
let zoom = map.getZoom();
|
|
25
|
-
map.options.crs = mapSource === 'Baidu' ? SLCRS.Baidu : CRS.EPSG3857; // 根据图层坐标系设置
|
|
26
|
-
(map as any)._resetView(center, zoom, true);
|
|
27
|
-
names?.forEach(name => {
|
|
28
|
-
if (curs[name]) return;
|
|
29
|
-
let net = new SLULeafletNetMap(name)
|
|
30
|
-
net.addTo(map);
|
|
31
|
-
curs[name] = net;
|
|
32
|
-
});
|
|
33
|
-
for (const key in curs) {
|
|
34
|
-
let name:SLEMap = key as SLEMap;
|
|
35
|
-
let flag = names.includes(name);
|
|
36
|
-
if (flag) continue;
|
|
37
|
-
curs[name].remove();
|
|
38
|
-
Reflect.deleteProperty(curs, key)
|
|
39
|
-
}
|
|
40
|
-
}
|
|
41
|
-
return this
|
|
42
|
-
}
|
|
43
|
-
private async createMap(ele: string, options: Partial<SLSMapOpt>) {
|
|
44
|
-
const { type } = options;
|
|
45
|
-
let map: L.Map | AMAP.Map;
|
|
46
|
-
switch (type) {
|
|
47
|
-
case "A": this.map = await this.initAmap(ele, options); break;
|
|
48
|
-
default: this.map = await this.initLeaflet(ele, options);
|
|
49
|
-
this.showMap([SLEMap.tianDiTuNormalMap, SLEMap.tianDiTuNormalAnnotion]);
|
|
50
|
-
break;
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
/**---------------leaflet地图的相关方法------------------- */
|
|
54
|
-
private initLeaflet(ele: string, opt: Partial<SLSMapOpt>) {
|
|
55
|
-
const { zoom = 11, minZoom = 2, maxZoom = 20, center: [lat, lng] = [22.68471, 114.12027], dragging = true, zoomControl = false, attributionControl = false, doubleClickZoom = false, closePopupOnClick = false } = opt;
|
|
56
|
-
let param: L.MapOptions = {
|
|
57
|
-
dragging,
|
|
58
|
-
zoomControl,
|
|
59
|
-
zoom,
|
|
60
|
-
minZoom,
|
|
61
|
-
maxZoom,
|
|
62
|
-
center: latLng(lat, lng),
|
|
63
|
-
attributionControl,
|
|
64
|
-
doubleClickZoom,
|
|
65
|
-
crs: CRS.EPSG3857,
|
|
66
|
-
closePopupOnClick,//点击地图不关闭弹出层
|
|
67
|
-
};
|
|
68
|
-
let map = new Map(ele, param);
|
|
69
|
-
return Promise.resolve(map)
|
|
70
|
-
}
|
|
71
|
-
/**---------------高德地图的相关方法------------------- */
|
|
72
|
-
private async initAmap(ele: string, opt: Partial<SLSMapOpt>) {
|
|
73
|
-
const { zoom = 11, minZoom = 2, maxZoom = 20, center: [lat, lng] = [22.68471, 114.12027], dragging = true, zoomControl = false, attributionControl = false, doubleClickZoom = false, closePopupOnClick = false, showLabel = true } = opt;
|
|
74
|
-
return AMapLoader.load({
|
|
75
|
-
"key": "87e1b1e9aa88724f69208972546fdd57", // 申请好的Web端开发者Key,首次调用 load 时必填
|
|
76
|
-
"version": "1.4.15", // 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
|
|
77
|
-
"plugins": ["Map3D"] //插件列表
|
|
78
|
-
}).then(() => {
|
|
79
|
-
// initAMapUI();
|
|
80
|
-
let map = new AMap.Map(ele, {
|
|
81
|
-
// mask: mask,
|
|
82
|
-
center: [lng, lat],
|
|
83
|
-
disableSocket: true,
|
|
84
|
-
viewMode: '2D',
|
|
85
|
-
mapStyle: 'amap://styles/dfd45346264e1fa2bb3b796f36cab42a',
|
|
86
|
-
skyColor: "#A3CCFF",
|
|
87
|
-
lang: 'zh_cn', //设置地图语言类型
|
|
88
|
-
labelzIndex: 130,
|
|
89
|
-
pitch: 40,
|
|
90
|
-
zoom: zoom,
|
|
91
|
-
zooms: [minZoom, maxZoom],
|
|
92
|
-
dragEnable: dragging,
|
|
93
|
-
doubleClickZoom: doubleClickZoom,
|
|
94
|
-
keyboardEnable: false,
|
|
95
|
-
isHotspot: false,
|
|
96
|
-
showLabel,
|
|
97
|
-
layers: [],
|
|
98
|
-
});
|
|
99
|
-
return map;
|
|
100
|
-
})
|
|
101
|
-
}
|
|
102
|
-
}
|
|
103
|
-
|
|
104
|
-
interface SLSMapOpt {
|
|
105
|
-
/**地图的类型 @param L leaflet插件 @param A 高德地图 @param B 百度地图 @default L*/
|
|
106
|
-
type: 'L' | 'A' | 'B',
|
|
107
|
-
/**地图中心点 [lat,lng] @default [22.68471,114.12027] */
|
|
108
|
-
center: [number, number],
|
|
109
|
-
/**地图初始层级 @default 11*/
|
|
110
|
-
zoom: number,
|
|
111
|
-
/**最小层级 @default 2*/
|
|
112
|
-
minZoom: number,
|
|
113
|
-
/**最大层级 @default 20*/
|
|
114
|
-
maxZoom: number,
|
|
115
|
-
/**拖拽功能 @default true */
|
|
116
|
-
dragging: boolean,
|
|
117
|
-
/**显示层级控制器 @default false */
|
|
118
|
-
zoomControl: boolean,
|
|
119
|
-
/**显示属性控制器 @default false */
|
|
120
|
-
attributionControl: boolean,
|
|
121
|
-
/**双击放大层级 @default false */
|
|
122
|
-
doubleClickZoom: boolean,
|
|
123
|
-
/**点击关闭弹窗 @default false */
|
|
124
|
-
closePopupOnClick: boolean,
|
|
125
|
-
/**显示标签(省会、地名等) @param AMap @default true */
|
|
126
|
-
showLabel: boolean,
|
|
127
|
-
}
|
|
3
|
+
export { MapCanvasEvent } from './map/canvas-event'
|
|
4
|
+
export { MapCanvasLayer } from './map/canvas-layer'
|
|
5
|
+
export { SLUMap } from './map/canvas-map'
|