javascript - 使用实时数据对来自 GeoJSON 文件的大量标记进行样式化

Question

我有一个动态创建的 GeoJSON 文件，其中包含具有特定纬度/经度、时间戳和类型信息的数据。此数据不断更新，需要实时显示在谷歌地图上。这是一个片段:

{ "type": "FeatureCollection","features": [
{"type": "Feature",
    "geometry": {
        "type": "Point", 
        "coordinates": [149.522, -30.3603]},
        "properties": {
            "id": "20447637",
            "lat": "-30.3603", 
            "long": "149.522", 
            "timestamp": "1450247155", 
            "strokeType": "0", 
            "mag": "19.9"
        }
    },
{"type": "Feature",
    "geometry": {
        "type": "Point", 
        "coordinates": [149.555, -30.3647]},
        "properties": {
            "id": "20451255",
            "lat": "-30.3647", 
            "long": "149.555", 
            "timestamp": "1450247646", 
            "strokeType": "3", 
            "mag": "0"
        }
    },...

我目前正在使用对 php 脚本的 ajax 调用导入此 geojson 文件，该脚本从数据库生成所需的数据，这一切都运行良好并且响应迅速。问题是当我尝试设置这些项目的样式时，它可能会导致浏览器崩溃(可能有数千个)。这是我目前用来设置样式的代码:

function styleFeature(feature) {
    var seconds = new Date().getTime() / 1000;
    var timeElapsed = seconds - feature.getProperty('timestamp');
    var fraction = timeElapsed/(TimeScale/255);
    var color = 'rgb(' + Math.round((255 - fraction)) + ', 0, ' + Math.round(0 + fraction) + ')';
    if(timeElapsed<15) { var stkWeight = 2; var stkColor = "#000"; } else { var stkWeight = 0.5; var stkColor = "#fff"; }
    if(feature.getProperty('strokeType')==0) {
        if(feature.getProperty('mag')>0) {
            return {
                icon: {
                    path: 'm5.219986,29.697235l23.795303,0l0,-25.117241l24.409424,0l0,25.117241l23.795288,0l0,25.765518l-23.795288,0l0,25.117264l-24.409424,0l0,-25.117264l-23.795303,0l0,-25.765518z',
                    strokeWeight: stkWeight,
                    strokeColor: stkColor,
                    fillColor: color,
                    fillOpacity: 0.5,
                    scale: 0.12 * scale
                },
            };
        } else {
            return {
                icon: {
                    path: google.maps.SymbolPath.BACKWARD_OPEN_ARROW,
                    strokeWeight: stkWeight,
                    strokeColor: stkColor,
                    fillColor: color,
                    fillOpacity: 0.5,
                    scale: 1.5 * scale
                },
            };
        }
    } else {
        return {
            icon: {
                path: google.maps.SymbolPath.CIRCLE,
                strokeWeight: stkWeight,
                strokeColor: stkColor,
                fillColor: color,
                fillOpacity: 0.5,
                scale: 2 * scale
            },
        };
    }
}

有 3 种不同类型的图标，其中两种是 Google 的默认图标，一种是自定义 + 形状。 geojson 文件中的每个特征的样式如下:

• 图标的颜色取决于它的时间戳(红色是当前的，蓝色是旧的)
• “strokeType”和“mag”字段决定使用哪个图标(圆形、三 Angular 形、加号)
• 最后 x 秒内的新图标被赋予较粗的黑色边框

这都是从 map.data.setStyle(styleFeature); 调用的，紧接在 map.data.addGeoJson(geoJSONDataFromAjaxCall);

之后

然后每隔 x 秒调用此脚本以检索更新的信息，然后还需要将该信息与其他信息一起绘制在 map 上。需要删除超过预定时间(例如 60 分钟或 3600 秒)的数据，并且每个标记都需要随着时间的推移而改变颜色。

我已经能够实现上述所有目标，但是当视口(viewport)中有超过几百个图标时，浏览器会堵塞并可能崩溃。如果我使用标准标记而不对其进行样式设置，则效果很好。我正在寻找一种在不使浏览器崩溃的情况下设置这些图标样式的方法，我猜我这样做的方式非常耗费资源。

Answer 1

一旦对象(例如圆形标记图标)的数量达到 1k 或以上，就会发生此行为，性能会大大降低。通常在这种情况下，建议通过 canvas tile overlay 渲染对象。

为此，让我们介绍一个 custom overlay用于显示标记图标

来源:iconsoverlay.js

示例

这是一个类似的示例，演示了如何加载 GeoJSON 数据并使用自定义图标显示标记:

function initMap() {
    var map = new google.maps.Map(document.getElementById('map'), {
        center: {
            lat: -30.3647,
            lng: 149.555
        },
        zoom: 4,
        mapTypeId: google.maps.MapTypeId.TERRAIN
    });

   
    
   

    var overlay = new IconsOverlay(map);
    
    //1.load GeoJSON data
    var data = generateData(1000);
    //2.display custom icons
    data.features.forEach(function (f, id) {

        var position = new google.maps.LatLng(f.geometry.coordinates[1], f.geometry.coordinates[0]);

        if (id > 0 && id % 2 == 0) {
            //add circle icon
            var circleIconProperties = {
                id: id,
                path: google.maps.SymbolPath.CIRCLE,
                strokeWeight: 2,
                strokeColor: 'rgba(0, 0, 0, 1)',
                fillColor: 'rgba(160,16,0,0.5)',
                scale: 10
            }
            overlay.addIcon(position, circleIconProperties);
            console.log(id);
        }
        else if (id > 0 && id % 3 == 0) {

            //add path icon
            var pathIconProperties = {
                id: id,
                path: 'm5.219986,29.697235l23.795303,0l0,-25.117241l24.409424,0l0,25.117241l23.795288,0l0,25.765518l-23.795288,0l0,25.117264l-24.409424,0l0,-25.117264l-23.795303,0l0,-25.765518z',
                strokeWeight: 2,
                strokeColor: 'rgba(0, 0, 0, 1)',
                fillColor: 'rgba(160,16,0,0.5)',
                scale: 0.4
            }
            overlay.addIcon(position,pathIconProperties);
        } else {
            var arrowIconProperties = {
                id: id,
                path: google.maps.SymbolPath.BACKWARD_OPEN_ARROW,
                strokeColor: 'rgba(0, 0, 0, 1)',
                fillColor: 'rgba(160,16,0,0.5)',
                fillOpacity: 0.5,
                scale: 4
            }
            overlay.addIcon(position, arrowIconProperties);       
        }     
    });
}







//Helper methods

function generateData(count) {
    var data = {
        "type": "FeatureCollection",
        "features": []
    };

    for (var i = 0; i < count; i++) {
        var lat = getRandomArbitrary(-30.0,-15.0);
        var lng = getRandomArbitrary(120.0,150.0);
        
        data.features.push({
            "type": "Feature",
            "geometry": {
                "type": "Point",
                "coordinates": [lng, lat]
            },
            "properties": {
                "id": i.toString(),
                "lat": lat.toString(),
                "long": lng.toString(),
            }
        });
    }
    return data;
}





function getRandomArbitrary(min, max) {
    return Math.random() * (max - min) + min;
}

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}

google.maps.event.addDomListener(window, 'load', initMap);

html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

#map {
    height: 100%;
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
    <script type="text/javascript" src="http://rawgit.com/vgrem/6dd435ebacd720f0ad10/raw/4af8287e17c3aea92b50681d0a9061f2b620f70d/iconsoverlay.js"></script> 
<div id="map"></div>

Demo page