在 Google Maps JavaScript API 上创建雷达地图

Question

我有来自雷达层 API 的响应数据，如下所示：

{
 "Date": "2020-04-18T04:00:05+03:00",
 "Source": 2,
 "Kml": [
  {
  "Polygons": [
    {
      "Polygon": [
        { "Cordinates": [25.8409, 51.6199] },
        { "Cordinates": [25.8341541, 51.619873] },
        { "Cordinates": [25.834177, 51.61238] },
        { "Cordinates": [25.8308582, 51.5936356] },
        { "Cordinates": [25.8275185, 51.5823822] }
        ....
        ....
      ]
    }
  ],
  "Color": "#47C247"
 },
 {
  "Polygons": [
    {
      "Polygon": [
        { "Cordinates": [26.1740189, 50.5239372] },
        { "Cordinates": [26.1841354, 50.5238838] },
        { "Cordinates": [26.1909122, 50.53136] },
        { "Cordinates": [26.1977215, 50.5463562] }
        ....
        ....
      ]
    }
  ],
  "Color": "#47C247"
 },
 ...
 ...

我想使用这些数据创建一个雷达地图。

我尝试使用每个数据创建多边形，并创建了一个设置间隔函数来循环每个多边形 250 毫秒，以便它充当动画。

setInterval(() => {
        deleteAllShape();
                // console.log(data);
                data.Kml.map((polygons) => {
                    const shape = polygons.Polygons.map((polygon) => {
                        const newMapData = [];
                        polygon.Polygon.map((obj) => {
                            const path = { lat: obj.Cordinates[0], lng: 
                                   obj.Cordinates[1] };
                                 newMapData.push(path);
                        });
                        poly = new google.maps.Polygon({
                            paths: newMapData,
                            strokeColor: polygons.Color,
                            strokeOpacity: 0.8,
                            strokeWeight: 0,
                            fillColor: polygons.Color,
                            fillOpacity: 0.35,
                            draggable: false,
                            editable: false,
                        });
                        poly.setMap(map);
                        allPolygons.push(poly);
                    });
                });
    },250)
    function deleteAllShape() {
      poly = null;
      for (let i = 0; i < allPolygons.length; i++) {
          allPolygons[i].setMap(null);
           }
       }

这在很大程度上是有效的。但问题是地图和浏览器在创建一些多边形后速度变慢并挂起。

当我研究了几张雷达图（例如：windy.com）时：-

我发现他们正在地图上渲染图像。我的问题是如何使用上述数据创建图像并创建雷达图？

Answer 1

这可能无法回答您的问题，因为我不清楚您要对图像而不是多边形做什么。但是，它可能会加快速度。

目前，您每 250 毫秒循环一次 allPolygons，以防止所有先前的多边形出现在地图上。 然后绘制一个新多边形，并将其添加到 allPolygons 中，以便在 250 毫秒内的下一次迭代中将其删除。没关系。

但是，随着多边形数量的增加，您每次都会增加 for 循环的大小：

for (let i = 0; i < allPolygons.length; i++) {

因此，当您绘制更多多边形时，它会逐渐变慢。您没有说要添加多少个多边形，但我猜应该很多。

相反，您需要做的就是隐藏最近创建的多边形。 allPolygons 中之前的所有多边形都已被隐藏，因此您无需在每个多边形上调用 setMap(null)，因为它只是尚未设置为 null 的最新多边形。

可能是这样的：

function deleteAllShape() {
    allPolygons[allPolygons.length - 1].setMap(null);
}

或者，只是这样，如果您不需要 allPolygons 做其他任何事情，则不必将它们存储在该数组中。

poly.setMap(null);

另外，不要创建poly 然后调用poly.setMap(map);，而是这样做

poly = new google.maps.Polygon({
    paths: newMapData,
    strokeColor: polygons.Color,
    strokeOpacity: 0.8,
    strokeWeight: 0,
    fillColor: polygons.Color,
    fillOpacity: 0.35,
    draggable: false,
    editable: false,
    map
});