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 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
- // "text-offset": convertPosition(option.offset),
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 = 'heatMap';
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 = 'pointCloud';
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, MapClass, innerMap, instance, _t;
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
- _t = mapType;
5403
- _context.n = _t === "mars3d" ? 2 : _t === "gaode" ? 9 : _t === "siji" ? 13 : 17;
5404
- break;
5405
- case 2:
5640
+ // 尝试创建地图,支持 fallback
5641
+ innerMap = null;
5642
+ finalMapType = mapType;
5643
+ _context.p = 2;
5406
5644
  _context.n = 3;
5407
- return loadResource(basePath + "lib/Cesium/Widgets/widgets.css", "css");
5645
+ return HnMap.tryCreateMap(id, option, mapType, basePath);
5408
5646
  case 3:
5409
- _context.n = 4;
5410
- return loadResource(basePath + "lib/Cesium/Cesium.js", "js");
5647
+ innerMap = _context.v;
5648
+ _context.n = 8;
5649
+ break;
5411
5650
  case 4:
5412
- _context.n = 5;
5413
- return loadResource(basePath + "lib/mars3d/mars3d.css", "css");
5414
- case 5:
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 loadResource(basePath + "lib/mars3d/mars3d.js", "js");
5657
+ return HnMap.tryCreateMap(id, option, "mars3d", basePath);
5417
5658
  case 6:
5418
- _context.n = 7;
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
- return _context.a(3, 17);
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 10:
5429
- _context.n = 11;
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 11:
5432
- _context.n = 12;
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
- return _context.a(3, 17);
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
- _context.n = 15;
5739
+ _context2.n = 15;
5441
5740
  return SGMap.tokenTask.login(option.sj_app_key, option.sj_app_secret);
5442
5741
  case 15:
5443
- _context.n = 16;
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 _context.a(3, 17);
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
- }); // 假设 map 是一个工厂
5454
- _context.n = 18;
5754
+ });
5755
+ _context2.n = 19;
5455
5756
  return MapClass.create(id, option);
5456
- case 18:
5457
- innerMap = _context.v;
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
- }, _callee, null, [[19,, 20, 21]]);
5761
+ }, _callee2);
5473
5762
  }));
5474
5763
  }
5475
5764
  }]);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "hn-map",
3
- "version": "1.1.7",
3
+ "version": "1.1.9",
4
4
  "description": "hn-map集成mars3d、高德、思极",
5
5
  "main": "dist/index.js",
6
6
  "author": "庞大仙",
@@ -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
- // "text-offset": convertPosition(option.offset),
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
- ? window.location.pathname
86
- : window.location.pathname.substring(
87
- 0,
88
- window.location.pathname.lastIndexOf("/") + 1
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
- // 1.根据不同的地图类型,加载相应的资源
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
- basePath + "lib/mars3d/plugins/heatmap/heatmap.js",
101
- "js"
138
+ basePath + "lib/mars3d/plugins/heatmap/heatmap.js",
139
+ "js"
102
140
  );
103
141
  await loadResource(
104
- basePath + "lib/mars3d/plugins/heatmap/mars3d-heatmap.js",
105
- "js"
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
- `https://webapi.amap.com/maps?v=2.0&key=${option.gaode_key}&plugin=AMap.HeatMap,AMap.MarkerCluster,AMap.MoveAnimation`,
111
- "js"
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
- "https://a.amap.com/jsapi_demos/static/data3d/lib/three.117.js",
115
- "js"
152
+ "https://a.amap.com/jsapi_demos/static/data3d/lib/three.117.js",
153
+ "js"
116
154
  );
117
155
  await loadResource(
118
- "https://a.amap.com/jsapi_demos/static/data3d/lib/GLTFLoader.117.min.js",
119
- "js"
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 }); // 假设 map 是一个工厂
138
- const innerMap = await MapClass.create(id, option); // 真正的地图实例
139
- // 3. 创建 HnMap 实例(此时传入 map)
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
  // ✅ 添加一个初始化方法,用于注册所有图形类