javascript - HERE 映射（集群）集成以响应应用程序

Question

我能够将 Here maps 聚类覆盖与虚拟数据集成，但无法操纵从 api 获取的数据以正确使用它。

在过去的两天里，我一直在搞乱这么多不同的 JS 数组和对象方法，以至于我忘记了我尝试过和没有尝试过的东西。

我来自 api 的 JSON 响应是：

[0 … 99]
0:
coordinates: Array(2)
0: 24.77234
1: 59.43862
length: 2
__proto__: Array(0)
type: "Point"
__proto__: Object
1: {type: "Point", coordinates: Array(2)}

和此功能的代码：

    const getTlnBusData = async () => {
      const test = await gpsData.flatMap((vehicle) => [vehicle.geometry]);
      console.log('test', test);
      const testValues = Object.values(test);
      console.log('testValues', testValues);
      // const coords = [el.geometry.coordinates];
      // console.log('batman', coords);

      const dataPoints = [];
      // const dataPoints = [test];
      // dataPoints.push(new H.clustering.DataPoint([test.coordinates]);
      dataPoints.push(new H.clustering.DataPoint(50.04, 1.01));
      dataPoints.push(new H.clustering.DataPoint(51.45, 1.01));
      dataPoints.push(new H.clustering.DataPoint(51.01, 2.01));

      /**
       * Assuming that 'dataPoints' and 'map'
       * is initialized and available, create a data provider:
       */
      const clusteredDataProvider = new H.clustering.Provider(dataPoints);

      // Create a layer that includes the data provider and its data points:
      const layer = new H.map.layer.ObjectLayer(clusteredDataProvider);

      // Add the layer to the map:
      hMap.addLayer(layer);
    };
    getTlnBusData();

我尝试了 forEach、loop、map/flatMap 的变体，但我似乎无法用我的任何解决方案替换虚拟数据。

谁能指出我正确的方向？

蒂亚！

标签： javascriptreactjsecmascript-6heremaps

Answer 1

我发现的解决方案：

    const getTlnBusData = async () => {
      const vehicles = await gpsData.flatMap((vehicle) => [vehicle.geometry]);

      const dataPoints = vehicles.map(
        (item, idx) =>
          new H.clustering.DataPoint(
            item.coordinates[1],
            item.coordinates[0],
            null,
            item
          )
      );

      console.log('bounty', dataPoints);

      /**
       * Assuming that 'dataPoints' and 'map'
       * is initialized and available, create a data provider:
       */
      const clusteredDataProvider = new H.clustering.Provider(dataPoints);

      // Create a layer that includes the data provider and its data points:
      const layer = new H.map.layer.ObjectLayer(clusteredDataProvider);

      // Add the layer to the map:
      hMap.addLayer(layer);
    };
    getTlnBusData();