基于Highcharts-Angular自定义SVG地图经纬度标记点实现咨询

问题解答 #

1. 是否可在自定义SVG地图上通过经纬度绘制标记点？
   可以实现。HighMaps支持基于自定义SVG地图的坐标映射，只要建立好经纬度和地图内部坐标的转换关系，就能精准绘制标记点，后续也能实现聚类效果。

2. 若可行，是通过定位地图四角实现经纬度标记，还是将经纬度转换为地图XY坐标？
   两种思路都可行，但定位地图四角建立映射关系更适合自定义建筑场景——因为建筑内部地图本身没有原生的经纬度体系，需要手动给地图绑定真实的经纬度边界，再通过这个边界批量转换所有标记点的坐标。直接转XY坐标是这个流程里的具体操作步骤，本质是一回事。

3. 若定位地图四角，需在对象何处添加该数据？

• 可以直接在转换后的mapData里新增自定义属性，比如mapData.custom.bounds，存入四角的[经纬度, SVG坐标]数组，示例：

  mapData: {
    // 原转换后的地图数据
    ...,
    custom: {
      bounds: [
        { lat: 39.90, lng: 116.39, x: 0, y: 0 }, // 左上角
        { lat: 39.90, lng: 116.40, x: 1000, y: 0 }, // 右上角
        { lat: 39.89, lng: 116.40, x: 1000, y: 800 }, // 右下角
        { lat: 39.89, lng: 116.39, x: 0, y: 800 } // 左下角
      ]
    }
  }
  

• 也可以单独维护一个全局的映射配置对象，初始化图表时引用即可。

4. 若转换经纬度为XY坐标，具体如何操作？
   步骤如下：

• 第一步：获取四角基准数据：从建筑SVG里确定四个角的真实经纬度，同时从转换后的mapData里拿到这四个角对应的SVG像素坐标（x/y）。
• 第二步：计算转换公式：
  经度转X：根据左右两角的经度差和X坐标差，算出每单位经度对应的X偏移，公式为 x = (lng - minLng) * (maxX - minX) / (maxLng - minLng) + minX
  纬度转Y：根据上下两角的纬度差和Y坐标差，算出每单位纬度对应的Y偏移，公式为 y = (maxLat - lat) * (maxY - minY) / (maxLat - minLat) + minY（注意纬度越大Y值越小，因为SVG的Y轴向下）
• 第三步：批量转换标记点：遍历所有带经纬度的标记数据，用上面的公式算出对应的X/Y坐标，然后配置到series里：

  series: [
    {
      type: 'mappoint',
      data: [
        { name: '设备1', x: 200, y: 300 }, // 转换后的坐标
        { name: '设备2', x: 500, y: 450 }
      ],
      // 开启聚类
      cluster: {
        enabled: true,
        // 聚类相关配置
      }
    }
  ]
  

• 第四步：引入聚类模块：确保在highcharts-angular里导入了highcharts/modules/marker-clusters.js模块，才能启用聚类效果。

内容的提问来源于stack exchange，提问作者TikoTron