hn-map 1.1.7 → 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/dist/index.js +346 -57
- package/package.json +1 -1
- package/src/graphic/imagePoint.ts +1 -1
- package/src/index.ts +64 -31
- package/src/layer/heatMap.ts +310 -160
- package/src/layer/layer.ts +24 -2
- package/src/layer/pointCloud.ts +226 -78
package/dist/index.js
CHANGED
|
@@ -1041,9 +1041,13 @@
|
|
|
1041
1041
|
console.error("已存在同名图形" + entity.id);
|
|
1042
1042
|
} else {
|
|
1043
1043
|
this.children.push(entity);
|
|
1044
|
-
this.layerEntity.addGraphic(entity.graphic); // 添加图形
|
|
1045
1044
|
if (entity.type == "route") {
|
|
1045
|
+
this.layerEntity.addGraphic(entity.graphic); // 添加图形
|
|
1046
1046
|
entity.start();
|
|
1047
|
+
} else if (entity.type == "pointCloud" || entity.type == "heatMap") {
|
|
1048
|
+
hnMap.map.map.addLayer(entity.layerEntity);
|
|
1049
|
+
} else {
|
|
1050
|
+
this.layerEntity.addGraphic(entity.graphic); // 添加图形
|
|
1047
1051
|
}
|
|
1048
1052
|
}
|
|
1049
1053
|
}
|
|
@@ -1057,6 +1061,11 @@
|
|
|
1057
1061
|
return v.id !== entity.id;
|
|
1058
1062
|
});
|
|
1059
1063
|
console.log("layerEntity", this.layerEntity);
|
|
1064
|
+
if (entity.type === "pointCloud" || entity.type === "heatMap") {
|
|
1065
|
+
alert(entity.id);
|
|
1066
|
+
hnMap.map.map.removeLayer(entity.id);
|
|
1067
|
+
// entity.id.destroy();
|
|
1068
|
+
}
|
|
1060
1069
|
this.layerEntity.removeGraphic(entity.graphic);
|
|
1061
1070
|
}
|
|
1062
1071
|
}
|
|
@@ -1130,7 +1139,6 @@
|
|
|
1130
1139
|
key: "addPopupByAttr",
|
|
1131
1140
|
value: function addPopupByAttr() {
|
|
1132
1141
|
this.layerEntity.bindPopup(function (event) {
|
|
1133
|
-
console.log(event.graphic, "====event.graphic==");
|
|
1134
1142
|
if (event.graphic.attr) {
|
|
1135
1143
|
var data = event.graphic.attr;
|
|
1136
1144
|
return mars3d.Util.getTemplateHtml({
|
|
@@ -1417,6 +1425,16 @@
|
|
|
1417
1425
|
entity.createCar();
|
|
1418
1426
|
entity.chunkData = entity.joinLinePoint();
|
|
1419
1427
|
entity.start();
|
|
1428
|
+
} else if (entity.type == "pointCloud") {
|
|
1429
|
+
hnMap.map.map.addLayer(entity.config);
|
|
1430
|
+
} else if (entity.type == "heatMap") {
|
|
1431
|
+
hnMap.map.map.addLayer(entity.config_heatmap);
|
|
1432
|
+
hnMap.map.map.addLayer(entity.config_point);
|
|
1433
|
+
hnMap.map.map.flyTo({
|
|
1434
|
+
center: [entity.option.position[0].lng, entity.option.position[0].lat],
|
|
1435
|
+
duration: 2000,
|
|
1436
|
+
essential: true
|
|
1437
|
+
});
|
|
1420
1438
|
} else {
|
|
1421
1439
|
hnMap.map.map.addLayer(entity.config);
|
|
1422
1440
|
}
|
|
@@ -2546,8 +2564,8 @@
|
|
|
2546
2564
|
// 文本
|
|
2547
2565
|
"text-size": Number(option.fontSize),
|
|
2548
2566
|
"text-anchor": option.verticalOrigin,
|
|
2549
|
-
"icon-anchor": option.verticalOrigin
|
|
2550
|
-
|
|
2567
|
+
"icon-anchor": option.verticalOrigin,
|
|
2568
|
+
"text-offset": convertPosition(option.offset)
|
|
2551
2569
|
},
|
|
2552
2570
|
paint: {
|
|
2553
2571
|
"text-color": option.color
|
|
@@ -4536,7 +4554,7 @@
|
|
|
4536
4554
|
var mars3d_class = /*#__PURE__*/function () {
|
|
4537
4555
|
function mars3d_class(option) {
|
|
4538
4556
|
_classCallCheck(this, mars3d_class);
|
|
4539
|
-
this.type =
|
|
4557
|
+
this.type = "heatMap";
|
|
4540
4558
|
this.id = null;
|
|
4541
4559
|
this.option = JSON.parse(JSON.stringify(defaultOption));
|
|
4542
4560
|
this.config = null;
|
|
@@ -4568,6 +4586,7 @@
|
|
|
4568
4586
|
clampToGround: option.clampToGround
|
|
4569
4587
|
},
|
|
4570
4588
|
redrawZoom: true,
|
|
4589
|
+
flyTo: true,
|
|
4571
4590
|
attr: option.data
|
|
4572
4591
|
};
|
|
4573
4592
|
}
|
|
@@ -4690,9 +4709,124 @@
|
|
|
4690
4709
|
}
|
|
4691
4710
|
}]);
|
|
4692
4711
|
}();
|
|
4712
|
+
var siji_class = /*#__PURE__*/function () {
|
|
4713
|
+
function siji_class(option) {
|
|
4714
|
+
_classCallCheck(this, siji_class);
|
|
4715
|
+
this.type = "heatMap";
|
|
4716
|
+
this.id = null;
|
|
4717
|
+
this.option = JSON.parse(JSON.stringify(defaultOption));
|
|
4718
|
+
this.config_heatmap = null;
|
|
4719
|
+
this.config_point = null;
|
|
4720
|
+
this.layerEntity = null;
|
|
4721
|
+
this.id = option.id;
|
|
4722
|
+
deepMerge(this.option, option);
|
|
4723
|
+
hnMap.map.map.addSource("themeData", {
|
|
4724
|
+
type: "geojson",
|
|
4725
|
+
data: {
|
|
4726
|
+
type: "FeatureCollection",
|
|
4727
|
+
features: this.option.position.map(function (v) {
|
|
4728
|
+
return {
|
|
4729
|
+
type: "Feature",
|
|
4730
|
+
geometry: {
|
|
4731
|
+
type: "Point",
|
|
4732
|
+
coordinates: [v.lng, v.lat]
|
|
4733
|
+
},
|
|
4734
|
+
properties: {
|
|
4735
|
+
value: v.value
|
|
4736
|
+
}
|
|
4737
|
+
};
|
|
4738
|
+
})
|
|
4739
|
+
}
|
|
4740
|
+
});
|
|
4741
|
+
this.config_heatmap = this.formatConfig_heatmap(this.option);
|
|
4742
|
+
this.config_point = this.formatConfig_point(this.option);
|
|
4743
|
+
}
|
|
4744
|
+
return _createClass(siji_class, [{
|
|
4745
|
+
key: "formatConfig_heatmap",
|
|
4746
|
+
value: function formatConfig_heatmap(option) {
|
|
4747
|
+
var config = {};
|
|
4748
|
+
config = {
|
|
4749
|
+
id: option.id,
|
|
4750
|
+
type: "heatmap",
|
|
4751
|
+
source: "themeData",
|
|
4752
|
+
maxzoom: 17,
|
|
4753
|
+
paint: {
|
|
4754
|
+
/**
|
|
4755
|
+
* 数据点的影响力,weight=10的点相当于十个weight=1的点
|
|
4756
|
+
* 下述为插值表达式,输入是点geojson的properties的mag,输出随mag线性增大
|
|
4757
|
+
*/
|
|
4758
|
+
"heatmap-weight": ["interpolate", ["linear"], ["get", "value"], 0, 0, 150, 1.5],
|
|
4759
|
+
/**
|
|
4760
|
+
* 热力图强度,类似heatmap-weight
|
|
4761
|
+
* 下述为插值表达式,输出随zoom线性变化,zoom为0时值为1,zoom为12时值为3
|
|
4762
|
+
*/
|
|
4763
|
+
"heatmap-intensity": ["interpolate", ["linear"], ["zoom"], 0, 1, 17, 1],
|
|
4764
|
+
/**
|
|
4765
|
+
* 像素的颜色,必须以heatmap-density(热力图像素的密度)为输入
|
|
4766
|
+
* 下述为插值表达式,输出随heatmap-density变化而变化
|
|
4767
|
+
*/
|
|
4768
|
+
"heatmap-color": ["interpolate", ["linear"], ["heatmap-density"], 0, "rgba(255, 0, 0, 0)", 0.4, option.gradient["0.4"], 0.6, option.gradient["0.6"], 0.8, option.gradient["0.8"], 0.9, option.gradient["0.9"]
|
|
4769
|
+
// 0,
|
|
4770
|
+
// "rgba(255, 0, 0, 0)",
|
|
4771
|
+
// 0.1,
|
|
4772
|
+
// option.gradient["0.4"], // "rgba(0, 30, 255, .6)",
|
|
4773
|
+
// 0.2,
|
|
4774
|
+
// "rgba(7, 208, 255, .6)",
|
|
4775
|
+
// 0.3,
|
|
4776
|
+
// option.gradient["0.6"], //"#2cc946",
|
|
4777
|
+
// 0.4,
|
|
4778
|
+
// "#d5fb0c",
|
|
4779
|
+
// 0.5,
|
|
4780
|
+
// option.gradient["0.8"], //"#e04e4e",
|
|
4781
|
+
// 0.6,
|
|
4782
|
+
// option.gradient["0.9"], //"#f33900",
|
|
4783
|
+
// 0.9,
|
|
4784
|
+
// "rgba(243, 57, 0, .6)",
|
|
4785
|
+
// 1,
|
|
4786
|
+
// "rgba(243, 57, 0, .8)",
|
|
4787
|
+
],
|
|
4788
|
+
/**
|
|
4789
|
+
* 该值越大,热力图越平滑,信息越不详细。
|
|
4790
|
+
* 下述为插值表达式,输出随zoom线性变化,zoom为0时值为8,zoom为9时值为20
|
|
4791
|
+
*/
|
|
4792
|
+
"heatmap-radius": ["interpolate", ["linear"], ["zoom"], 0, 5, 17, 50],
|
|
4793
|
+
/**
|
|
4794
|
+
* 透明度,输出为1则不透明
|
|
4795
|
+
* 下述为插值表达式,输出随zoom线性变化,zoom为5时值为0.8,zoom为12时值为0.4
|
|
4796
|
+
*/
|
|
4797
|
+
"heatmap-opacity": ["interpolate", ["linear"], ["zoom"], 5, option.maxOpacity,
|
|
4798
|
+
//0.8,
|
|
4799
|
+
17, option.minOpacity // 0.8
|
|
4800
|
+
]
|
|
4801
|
+
}
|
|
4802
|
+
};
|
|
4803
|
+
return config;
|
|
4804
|
+
}
|
|
4805
|
+
}, {
|
|
4806
|
+
key: "formatConfig_point",
|
|
4807
|
+
value: function formatConfig_point(option) {
|
|
4808
|
+
var config_point = {};
|
|
4809
|
+
config_point = {
|
|
4810
|
+
id: "earthquakes-point",
|
|
4811
|
+
type: "circle",
|
|
4812
|
+
source: "themeData",
|
|
4813
|
+
minzoom: 17,
|
|
4814
|
+
paint: {
|
|
4815
|
+
"circle-radius": ["interpolate", ["linear"], ["zoom"], 5, 1, 20, 12],
|
|
4816
|
+
"circle-color": "rgb(255, 148, 0)",
|
|
4817
|
+
"circle-stroke-color": "white",
|
|
4818
|
+
"circle-stroke-width": 1,
|
|
4819
|
+
"circle-opacity": ["interpolate", ["linear"], ["zoom"], 9, 0, 20, 1]
|
|
4820
|
+
}
|
|
4821
|
+
};
|
|
4822
|
+
return config_point;
|
|
4823
|
+
}
|
|
4824
|
+
}]);
|
|
4825
|
+
}();
|
|
4693
4826
|
var fn = {
|
|
4694
4827
|
mars3d: mars3d_class,
|
|
4695
|
-
gaode: gaode_class
|
|
4828
|
+
gaode: gaode_class,
|
|
4829
|
+
siji: siji_class
|
|
4696
4830
|
};
|
|
4697
4831
|
return fn[hnMap.mapType];
|
|
4698
4832
|
});
|
|
@@ -5039,7 +5173,7 @@
|
|
|
5039
5173
|
var mars3d_class = /*#__PURE__*/function () {
|
|
5040
5174
|
function mars3d_class(option) {
|
|
5041
5175
|
_classCallCheck(this, mars3d_class);
|
|
5042
|
-
this.type =
|
|
5176
|
+
this.type = "pointCloud";
|
|
5043
5177
|
this.id = null;
|
|
5044
5178
|
this.option = JSON.parse(JSON.stringify(defaultOption));
|
|
5045
5179
|
this.config = null;
|
|
@@ -5106,9 +5240,114 @@
|
|
|
5106
5240
|
_classCallCheck(this, gaode_class);
|
|
5107
5241
|
throw new Error("高德地图不支持点云功能");
|
|
5108
5242
|
});
|
|
5243
|
+
var siji_class = /*#__PURE__*/function () {
|
|
5244
|
+
function siji_class(option) {
|
|
5245
|
+
_classCallCheck(this, siji_class);
|
|
5246
|
+
this.type = "pointCloud";
|
|
5247
|
+
this.id = null;
|
|
5248
|
+
this.option = JSON.parse(JSON.stringify(defaultOption));
|
|
5249
|
+
this.config = null;
|
|
5250
|
+
this.layerEntity = null;
|
|
5251
|
+
this.THREE = null;
|
|
5252
|
+
this.camera = null;
|
|
5253
|
+
this.scene = null;
|
|
5254
|
+
this.renderer = null;
|
|
5255
|
+
this.modelTransform = null;
|
|
5256
|
+
this.id = option.id;
|
|
5257
|
+
deepMerge(this.option, option);
|
|
5258
|
+
this.config = this.formatConfig(this.option);
|
|
5259
|
+
}
|
|
5260
|
+
// 传入角度值(0-360度),转换为弧度
|
|
5261
|
+
return _createClass(siji_class, [{
|
|
5262
|
+
key: "calculateRotationFromDegrees",
|
|
5263
|
+
value: function calculateRotationFromDegrees(angleInDegrees) {
|
|
5264
|
+
// 将角度转换为弧度,Three.js中Z轴旋转是顺时针的
|
|
5265
|
+
var rotateZ = angleInDegrees * Math.PI / 180;
|
|
5266
|
+
return [0, 0, rotateZ];
|
|
5267
|
+
}
|
|
5268
|
+
}, {
|
|
5269
|
+
key: "formatConfig",
|
|
5270
|
+
value: function formatConfig(option) {
|
|
5271
|
+
var modelOrigin = convertPosition([option.position.lng, option.position.lat]);
|
|
5272
|
+
var modelAltitude = option.position.alt;
|
|
5273
|
+
var modelRotate = this.calculateRotationFromDegrees(option.rotation);
|
|
5274
|
+
console.log("modelRotate", modelRotate);
|
|
5275
|
+
var modelScale = option.scale * 1e-6;
|
|
5276
|
+
var modelTransform = {
|
|
5277
|
+
translateX: SGMap.MercatorCoordinate.fromLngLat(modelOrigin, modelAltitude).x,
|
|
5278
|
+
translateY: SGMap.MercatorCoordinate.fromLngLat(modelOrigin, modelAltitude).y,
|
|
5279
|
+
translateZ: SGMap.MercatorCoordinate.fromLngLat(modelOrigin, modelAltitude).z,
|
|
5280
|
+
rotateX: modelRotate[0],
|
|
5281
|
+
rotateY: modelRotate[1],
|
|
5282
|
+
rotateZ: modelRotate[2],
|
|
5283
|
+
scale: modelScale
|
|
5284
|
+
};
|
|
5285
|
+
var THREE = window.THREE;
|
|
5286
|
+
var config = {};
|
|
5287
|
+
config = {
|
|
5288
|
+
id: option.id,
|
|
5289
|
+
type: "custom",
|
|
5290
|
+
renderingMode: "3d",
|
|
5291
|
+
onAdd: function onAdd(map, gl) {
|
|
5292
|
+
console.log("map====", map);
|
|
5293
|
+
this.camera = new THREE.Camera();
|
|
5294
|
+
this.scene = new THREE.Scene();
|
|
5295
|
+
var directionalLight = new THREE.DirectionalLight(0xffffff);
|
|
5296
|
+
directionalLight.position.set(0, -70, 100).normalize();
|
|
5297
|
+
this.scene.add(directionalLight);
|
|
5298
|
+
var directionalLight2 = new THREE.DirectionalLight(0xffffff);
|
|
5299
|
+
directionalLight2.position.set(0, 70, 100).normalize();
|
|
5300
|
+
this.scene.add(directionalLight2);
|
|
5301
|
+
// var loader = new THREE.GLTFLoader();
|
|
5302
|
+
var loader = new THREE.ObjectLoader();
|
|
5303
|
+
var that = this;
|
|
5304
|
+
loader.load(option.url,
|
|
5305
|
+
// 'https://map.sgcc.com.cn/products/js-sdk/v3/assets/model/ZH-SZC3-42.gltf',
|
|
5306
|
+
// function (gltf: any) {
|
|
5307
|
+
function (object) {
|
|
5308
|
+
that.scene.add(object);
|
|
5309
|
+
// that.scene.add(gltf.scene);
|
|
5310
|
+
map.flyTo({
|
|
5311
|
+
center: modelOrigin,
|
|
5312
|
+
// 模型中心坐标
|
|
5313
|
+
zoom: 18,
|
|
5314
|
+
// 缩放级别,可以调整
|
|
5315
|
+
pitch: 75,
|
|
5316
|
+
// 倾斜角度
|
|
5317
|
+
bearing: 0,
|
|
5318
|
+
// 方向角
|
|
5319
|
+
duration: 2000,
|
|
5320
|
+
// 动画持续时间(毫秒)
|
|
5321
|
+
essential: true // 表示此动画对用户体验很重要
|
|
5322
|
+
});
|
|
5323
|
+
}.bind(that));
|
|
5324
|
+
// this.map = map;
|
|
5325
|
+
this.renderer = new THREE.WebGLRenderer({
|
|
5326
|
+
canvas: map.getCanvas(),
|
|
5327
|
+
context: gl
|
|
5328
|
+
});
|
|
5329
|
+
this.renderer.autoClear = false;
|
|
5330
|
+
},
|
|
5331
|
+
render: function render(gl, matrix) {
|
|
5332
|
+
var rotationX = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(1, 0, 0), modelTransform.rotateX);
|
|
5333
|
+
var rotationY = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 1, 0), modelTransform.rotateY);
|
|
5334
|
+
var rotationZ = new THREE.Matrix4().makeRotationAxis(new THREE.Vector3(0, 0, 1), modelTransform.rotateZ);
|
|
5335
|
+
var m = new THREE.Matrix4().fromArray(matrix);
|
|
5336
|
+
var l = new THREE.Matrix4().makeTranslation(modelTransform.translateX, modelTransform.translateY, modelTransform.translateZ).scale(new THREE.Vector3(modelTransform.scale, -modelTransform.scale, modelTransform.scale)).multiply(rotationX).multiply(rotationY).multiply(rotationZ);
|
|
5337
|
+
this.camera.projectionMatrix.elements = matrix;
|
|
5338
|
+
this.camera.projectionMatrix = m.multiply(l);
|
|
5339
|
+
this.renderer.state.reset();
|
|
5340
|
+
this.renderer.render(this.scene, this.camera);
|
|
5341
|
+
}
|
|
5342
|
+
};
|
|
5343
|
+
return config;
|
|
5344
|
+
}
|
|
5345
|
+
}]);
|
|
5346
|
+
}();
|
|
5109
5347
|
var fn = {
|
|
5110
5348
|
mars3d: mars3d_class,
|
|
5111
|
-
gaode: gaode_class
|
|
5349
|
+
gaode: gaode_class,
|
|
5350
|
+
siji: siji_class
|
|
5112
5351
|
};
|
|
5113
5352
|
return fn[hnMap.mapType];
|
|
5114
5353
|
});
|
|
@@ -5363,7 +5602,7 @@
|
|
|
5363
5602
|
* 创建HnMap实例的方法
|
|
5364
5603
|
* @param id 地图容器的ID
|
|
5365
5604
|
* @param option 地图的配置选项
|
|
5366
|
-
* @param mapType
|
|
5605
|
+
* @param mapType 用户期望的地图类型(如 'gaode', 'siji')
|
|
5367
5606
|
*/
|
|
5368
5607
|
return _createClass(HnMap, [{
|
|
5369
5608
|
key: "initModules",
|
|
@@ -5390,86 +5629,136 @@
|
|
|
5390
5629
|
key: "create",
|
|
5391
5630
|
value: function create(id, option, mapType) {
|
|
5392
5631
|
return __awaiter(this, void 0, void 0, /*#__PURE__*/_regenerator().m(function _callee() {
|
|
5393
|
-
var basePath,
|
|
5632
|
+
var basePath, innerMap, finalMapType, instance, _t, _t2;
|
|
5394
5633
|
return _regenerator().w(function (_context) {
|
|
5395
5634
|
while (1) switch (_context.p = _context.n) {
|
|
5396
5635
|
case 0:
|
|
5397
|
-
//
|
|
5398
|
-
basePath = window.location.pathname.endsWith("/") ? window.location.pathname : window.location.pathname.substring(0, window.location.pathname.lastIndexOf("/") + 1);
|
|
5636
|
+
basePath = window.location.pathname.endsWith("/") ? window.location.pathname : window.location.pathname.substring(0, window.location.pathname.lastIndexOf("/") + 1); // 预加载 turf(所有类型都需要)
|
|
5399
5637
|
_context.n = 1;
|
|
5400
5638
|
return loadResource(basePath + "lib/turf/turf.min.js", "js");
|
|
5401
5639
|
case 1:
|
|
5402
|
-
|
|
5403
|
-
|
|
5404
|
-
|
|
5405
|
-
|
|
5640
|
+
// 尝试创建地图,支持 fallback
|
|
5641
|
+
innerMap = null;
|
|
5642
|
+
finalMapType = mapType;
|
|
5643
|
+
_context.p = 2;
|
|
5406
5644
|
_context.n = 3;
|
|
5407
|
-
return
|
|
5645
|
+
return HnMap.tryCreateMap(id, option, mapType, basePath);
|
|
5408
5646
|
case 3:
|
|
5409
|
-
|
|
5410
|
-
|
|
5647
|
+
innerMap = _context.v;
|
|
5648
|
+
_context.n = 8;
|
|
5649
|
+
break;
|
|
5411
5650
|
case 4:
|
|
5412
|
-
_context.
|
|
5413
|
-
|
|
5414
|
-
|
|
5651
|
+
_context.p = 4;
|
|
5652
|
+
_t = _context.v;
|
|
5653
|
+
console.warn("[".concat(mapType, "] \u5730\u56FE\u521D\u59CB\u5316\u5931\u8D25\uFF0C\u5C1D\u8BD5\u56DE\u9000\u5230 mars3d"), _t);
|
|
5654
|
+
finalMapType = "mars3d";
|
|
5655
|
+
_context.p = 5;
|
|
5415
5656
|
_context.n = 6;
|
|
5416
|
-
return
|
|
5657
|
+
return HnMap.tryCreateMap(id, option, "mars3d", basePath);
|
|
5417
5658
|
case 6:
|
|
5418
|
-
|
|
5419
|
-
return loadResource(basePath + "lib/mars3d/plugins/heatmap/heatmap.js", "js");
|
|
5420
|
-
case 7:
|
|
5659
|
+
innerMap = _context.v;
|
|
5421
5660
|
_context.n = 8;
|
|
5661
|
+
break;
|
|
5662
|
+
case 7:
|
|
5663
|
+
_context.p = 7;
|
|
5664
|
+
_t2 = _context.v;
|
|
5665
|
+
console.error("mars3d 回退也失败了!", _t2);
|
|
5666
|
+
throw new Error("所有地图类型均无法加载,请检查网络或资源配置");
|
|
5667
|
+
case 8:
|
|
5668
|
+
// 创建 HnMap 实例
|
|
5669
|
+
HnMap.allowConstruction = true;
|
|
5670
|
+
_context.p = 9;
|
|
5671
|
+
instance = new HnMap(id, option, finalMapType, innerMap);
|
|
5672
|
+
instance.initModules();
|
|
5673
|
+
return _context.a(2, instance);
|
|
5674
|
+
case 10:
|
|
5675
|
+
_context.p = 10;
|
|
5676
|
+
HnMap.allowConstruction = false;
|
|
5677
|
+
return _context.f(10);
|
|
5678
|
+
case 11:
|
|
5679
|
+
return _context.a(2);
|
|
5680
|
+
}
|
|
5681
|
+
}, _callee, null, [[9,, 10, 11], [5, 7], [2, 4]]);
|
|
5682
|
+
}));
|
|
5683
|
+
}
|
|
5684
|
+
/**
|
|
5685
|
+
* 尝试根据 mapType 加载资源并创建地图实例
|
|
5686
|
+
*/
|
|
5687
|
+
}, {
|
|
5688
|
+
key: "tryCreateMap",
|
|
5689
|
+
value: function tryCreateMap(id, option, mapType, basePath) {
|
|
5690
|
+
return __awaiter(this, void 0, void 0, /*#__PURE__*/_regenerator().m(function _callee2() {
|
|
5691
|
+
var MapClass, innerMap, _t3;
|
|
5692
|
+
return _regenerator().w(function (_context2) {
|
|
5693
|
+
while (1) switch (_context2.n) {
|
|
5694
|
+
case 0:
|
|
5695
|
+
_t3 = mapType;
|
|
5696
|
+
_context2.n = _t3 === "mars3d" ? 1 : _t3 === "gaode" ? 8 : _t3 === "siji" ? 12 : 17;
|
|
5697
|
+
break;
|
|
5698
|
+
case 1:
|
|
5699
|
+
_context2.n = 2;
|
|
5700
|
+
return loadResource(basePath + "lib/Cesium/Widgets/widgets.css", "css");
|
|
5701
|
+
case 2:
|
|
5702
|
+
_context2.n = 3;
|
|
5703
|
+
return loadResource(basePath + "lib/Cesium/Cesium.js", "js");
|
|
5704
|
+
case 3:
|
|
5705
|
+
_context2.n = 4;
|
|
5706
|
+
return loadResource(basePath + "lib/mars3d/mars3d.css", "css");
|
|
5707
|
+
case 4:
|
|
5708
|
+
_context2.n = 5;
|
|
5709
|
+
return loadResource(basePath + "lib/mars3d/mars3d.js", "js");
|
|
5710
|
+
case 5:
|
|
5711
|
+
_context2.n = 6;
|
|
5712
|
+
return loadResource(basePath + "lib/mars3d/plugins/heatmap/heatmap.js", "js");
|
|
5713
|
+
case 6:
|
|
5714
|
+
_context2.n = 7;
|
|
5422
5715
|
return loadResource(basePath + "lib/mars3d/plugins/heatmap/mars3d-heatmap.js", "js");
|
|
5716
|
+
case 7:
|
|
5717
|
+
return _context2.a(3, 18);
|
|
5423
5718
|
case 8:
|
|
5424
|
-
|
|
5425
|
-
case 9:
|
|
5426
|
-
_context.n = 10;
|
|
5719
|
+
_context2.n = 9;
|
|
5427
5720
|
return loadResource("https://webapi.amap.com/maps?v=2.0&key=".concat(option.gaode_key, "&plugin=AMap.HeatMap,AMap.MarkerCluster,AMap.MoveAnimation"), "js");
|
|
5428
|
-
case
|
|
5429
|
-
|
|
5721
|
+
case 9:
|
|
5722
|
+
_context2.n = 10;
|
|
5430
5723
|
return loadResource("https://a.amap.com/jsapi_demos/static/data3d/lib/three.117.js", "js");
|
|
5431
|
-
case
|
|
5432
|
-
|
|
5724
|
+
case 10:
|
|
5725
|
+
_context2.n = 11;
|
|
5433
5726
|
return loadResource("https://a.amap.com/jsapi_demos/static/data3d/lib/GLTFLoader.117.min.js", "js");
|
|
5727
|
+
case 11:
|
|
5728
|
+
return _context2.a(3, 18);
|
|
5434
5729
|
case 12:
|
|
5435
|
-
|
|
5436
|
-
case 13:
|
|
5437
|
-
_context.n = 14;
|
|
5730
|
+
_context2.n = 13;
|
|
5438
5731
|
return loadResource(option.sj_js_url, "js");
|
|
5732
|
+
case 13:
|
|
5733
|
+
if (!(typeof SGMap === "undefined")) {
|
|
5734
|
+
_context2.n = 14;
|
|
5735
|
+
break;
|
|
5736
|
+
}
|
|
5737
|
+
throw new Error("siji 地图 JS 加载成功但 SGMap 未定义");
|
|
5439
5738
|
case 14:
|
|
5440
|
-
|
|
5739
|
+
_context2.n = 15;
|
|
5441
5740
|
return SGMap.tokenTask.login(option.sj_app_key, option.sj_app_secret);
|
|
5442
5741
|
case 15:
|
|
5443
|
-
|
|
5742
|
+
_context2.n = 16;
|
|
5444
5743
|
return SGMap.plugin(["SGMap.DrawPolygonHandler", "SGMap.DrawCircleHandler", "SGMap.DrawRectangleHandler", "SGMap.GeocodingTask", "SGMap.RoadNetLayer"]);
|
|
5445
5744
|
case 16:
|
|
5446
|
-
return
|
|
5745
|
+
return _context2.a(3, 18);
|
|
5447
5746
|
case 17:
|
|
5747
|
+
throw new Error("\u4E0D\u652F\u6301\u7684\u5730\u56FE\u7C7B\u578B: ".concat(mapType));
|
|
5748
|
+
case 18:
|
|
5448
5749
|
// 2. 创建地图对象
|
|
5449
5750
|
MapClass = map({
|
|
5450
5751
|
id: id,
|
|
5451
5752
|
option: option,
|
|
5452
5753
|
mapType: mapType
|
|
5453
|
-
});
|
|
5454
|
-
|
|
5754
|
+
});
|
|
5755
|
+
_context2.n = 19;
|
|
5455
5756
|
return MapClass.create(id, option);
|
|
5456
|
-
case
|
|
5457
|
-
innerMap =
|
|
5458
|
-
|
|
5459
|
-
// 3. 创建 HnMap 实例(此时传入 map)
|
|
5460
|
-
HnMap.allowConstruction = true;
|
|
5461
|
-
_context.p = 19;
|
|
5462
|
-
instance = new HnMap(id, option, mapType, innerMap); // 4. ✅ 此时 this.map 已存在,再初始化所有模块
|
|
5463
|
-
instance.initModules();
|
|
5464
|
-
return _context.a(2, instance);
|
|
5465
|
-
case 20:
|
|
5466
|
-
_context.p = 20;
|
|
5467
|
-
HnMap.allowConstruction = false;
|
|
5468
|
-
return _context.f(20);
|
|
5469
|
-
case 21:
|
|
5470
|
-
return _context.a(2);
|
|
5757
|
+
case 19:
|
|
5758
|
+
innerMap = _context2.v;
|
|
5759
|
+
return _context2.a(2, innerMap);
|
|
5471
5760
|
}
|
|
5472
|
-
},
|
|
5761
|
+
}, _callee2);
|
|
5473
5762
|
}));
|
|
5474
5763
|
}
|
|
5475
5764
|
}]);
|
package/package.json
CHANGED
|
@@ -202,7 +202,7 @@ export default (hnMap: any) => {
|
|
|
202
202
|
"text-size": Number(option.fontSize),
|
|
203
203
|
"text-anchor": option.verticalOrigin,
|
|
204
204
|
"icon-anchor": option.verticalOrigin,
|
|
205
|
-
|
|
205
|
+
"text-offset": convertPosition(option.offset),
|
|
206
206
|
},
|
|
207
207
|
paint: {
|
|
208
208
|
"text-color": option.color,
|
package/src/index.ts
CHANGED
|
@@ -77,19 +77,57 @@ export default class HnMap {
|
|
|
77
77
|
* 创建HnMap实例的方法
|
|
78
78
|
* @param id 地图容器的ID
|
|
79
79
|
* @param option 地图的配置选项
|
|
80
|
-
* @param mapType
|
|
80
|
+
* @param mapType 用户期望的地图类型(如 'gaode', 'siji')
|
|
81
81
|
*/
|
|
82
82
|
static async create(id: string, option: option, mapType: string) {
|
|
83
|
-
// 判断是否在子路径下
|
|
84
83
|
const basePath = window.location.pathname.endsWith("/")
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
84
|
+
? window.location.pathname
|
|
85
|
+
: window.location.pathname.substring(
|
|
86
|
+
0,
|
|
87
|
+
window.location.pathname.lastIndexOf("/") + 1
|
|
89
88
|
);
|
|
89
|
+
|
|
90
|
+
// 预加载 turf(所有类型都需要)
|
|
90
91
|
await loadResource(basePath + "lib/turf/turf.min.js", "js");
|
|
91
92
|
|
|
92
|
-
//
|
|
93
|
+
// 尝试创建地图,支持 fallback
|
|
94
|
+
let innerMap: any = null;
|
|
95
|
+
let finalMapType = mapType;
|
|
96
|
+
|
|
97
|
+
try {
|
|
98
|
+
innerMap = await HnMap.tryCreateMap(id, option, mapType, basePath);
|
|
99
|
+
} catch (error) {
|
|
100
|
+
console.warn(`[${mapType}] 地图初始化失败,尝试回退到 mars3d`, error);
|
|
101
|
+
finalMapType = "mars3d";
|
|
102
|
+
try {
|
|
103
|
+
innerMap = await HnMap.tryCreateMap(id, option, "mars3d", basePath);
|
|
104
|
+
} catch (fallbackError) {
|
|
105
|
+
console.error("mars3d 回退也失败了!", fallbackError);
|
|
106
|
+
throw new Error("所有地图类型均无法加载,请检查网络或资源配置");
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
|
|
110
|
+
// 创建 HnMap 实例
|
|
111
|
+
HnMap.allowConstruction = true;
|
|
112
|
+
try {
|
|
113
|
+
const instance = new HnMap(id, option, finalMapType, innerMap);
|
|
114
|
+
instance.initModules();
|
|
115
|
+
return instance;
|
|
116
|
+
} finally {
|
|
117
|
+
HnMap.allowConstruction = false;
|
|
118
|
+
}
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
/**
|
|
122
|
+
* 尝试根据 mapType 加载资源并创建地图实例
|
|
123
|
+
*/
|
|
124
|
+
private static async tryCreateMap(
|
|
125
|
+
id: string,
|
|
126
|
+
option: option,
|
|
127
|
+
mapType: string,
|
|
128
|
+
basePath: string
|
|
129
|
+
): Promise<any> {
|
|
130
|
+
// 1. 加载对应地图的资源
|
|
93
131
|
switch (mapType) {
|
|
94
132
|
case "mars3d":
|
|
95
133
|
await loadResource(basePath + "lib/Cesium/Widgets/widgets.css", "css");
|
|
@@ -97,30 +135,34 @@ export default class HnMap {
|
|
|
97
135
|
await loadResource(basePath + "lib/mars3d/mars3d.css", "css");
|
|
98
136
|
await loadResource(basePath + "lib/mars3d/mars3d.js", "js");
|
|
99
137
|
await loadResource(
|
|
100
|
-
|
|
101
|
-
|
|
138
|
+
basePath + "lib/mars3d/plugins/heatmap/heatmap.js",
|
|
139
|
+
"js"
|
|
102
140
|
);
|
|
103
141
|
await loadResource(
|
|
104
|
-
|
|
105
|
-
|
|
142
|
+
basePath + "lib/mars3d/plugins/heatmap/mars3d-heatmap.js",
|
|
143
|
+
"js"
|
|
106
144
|
);
|
|
107
145
|
break;
|
|
108
146
|
case "gaode":
|
|
109
147
|
await loadResource(
|
|
110
|
-
|
|
111
|
-
|
|
148
|
+
`https://webapi.amap.com/maps?v=2.0&key=${option.gaode_key}&plugin=AMap.HeatMap,AMap.MarkerCluster,AMap.MoveAnimation`,
|
|
149
|
+
"js"
|
|
112
150
|
);
|
|
113
151
|
await loadResource(
|
|
114
|
-
|
|
115
|
-
|
|
152
|
+
"https://a.amap.com/jsapi_demos/static/data3d/lib/three.117.js",
|
|
153
|
+
"js"
|
|
116
154
|
);
|
|
117
155
|
await loadResource(
|
|
118
|
-
|
|
119
|
-
|
|
156
|
+
"https://a.amap.com/jsapi_demos/static/data3d/lib/GLTFLoader.117.min.js",
|
|
157
|
+
"js"
|
|
120
158
|
);
|
|
121
159
|
break;
|
|
122
160
|
case "siji":
|
|
123
161
|
await loadResource(option.sj_js_url, "js");
|
|
162
|
+
// 注意:SGMap 可能是全局变量,需确保已挂载
|
|
163
|
+
if (typeof SGMap === "undefined") {
|
|
164
|
+
throw new Error("siji 地图 JS 加载成功但 SGMap 未定义");
|
|
165
|
+
}
|
|
124
166
|
await SGMap.tokenTask.login(option.sj_app_key, option.sj_app_secret);
|
|
125
167
|
await SGMap.plugin([
|
|
126
168
|
"SGMap.DrawPolygonHandler",
|
|
@@ -129,24 +171,15 @@ export default class HnMap {
|
|
|
129
171
|
"SGMap.GeocodingTask",
|
|
130
172
|
"SGMap.RoadNetLayer",
|
|
131
173
|
]);
|
|
132
|
-
|
|
133
174
|
break;
|
|
175
|
+
default:
|
|
176
|
+
throw new Error(`不支持的地图类型: ${mapType}`);
|
|
134
177
|
}
|
|
135
178
|
|
|
136
179
|
// 2. 创建地图对象
|
|
137
|
-
const MapClass = map({ id, option, mapType });
|
|
138
|
-
const innerMap = await MapClass.create(id, option); //
|
|
139
|
-
|
|
140
|
-
HnMap.allowConstruction = true;
|
|
141
|
-
try {
|
|
142
|
-
const instance = new HnMap(id, option, mapType, innerMap);
|
|
143
|
-
|
|
144
|
-
// 4. ✅ 此时 this.map 已存在,再初始化所有模块
|
|
145
|
-
instance.initModules();
|
|
146
|
-
return instance;
|
|
147
|
-
} finally {
|
|
148
|
-
HnMap.allowConstruction = false;
|
|
149
|
-
}
|
|
180
|
+
const MapClass = map({ id, option, mapType });
|
|
181
|
+
const innerMap = await MapClass.create(id, option); // 这里可能也会失败(如容器不存在、key无效等)
|
|
182
|
+
return innerMap;
|
|
150
183
|
}
|
|
151
184
|
|
|
152
185
|
// ✅ 添加一个初始化方法,用于注册所有图形类
|