我有一个动态创建的GeoJSON文件，其中包含具有特定纬度/经度，时间戳和类型信息的数据。此数据会不断更新，需要在Google地图上实时显示。这是一个片段：
{ "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"
}
},...
我目前正在使用ajax调用导入这个geojson文件，这个php脚本从数据库中生成所需的数据，这一切都运行良好且具有反复性。问题是，当我尝试设置这些项目的样式时，它可能导致浏览器崩溃（可能有数千个）。这是我目前用来设置样式的代码：
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文件中的每个功能的样式如下：
这是从map.data.setStyle(styleFeature);
map.data.addGeoJson(geoJSONDataFromAjaxCall);调用的
然后每隔x秒调用此脚本以检索更新的信息，然后还需要在地图上将信息与其他信息一起绘制。需要删除超过预定时间（例如60分钟或3600秒）的数据，并且每个标记的颜色随着年龄的增长而变化。
我已经能够实现上述所有功能，但是当视口中有超过几百个图标时，浏览器会被堵塞并可能崩溃。如果我使用标准标记而没有造型它可以正常工作。我正在设计一种方式来设置这些图标的样式而不会使浏览器崩溃，我猜测我这样做是非常耗费资源的。
答案 0 :(得分：0)
一旦对象数量（例如圆圈标记图标）达到1k或更高，就会出现这种情况，性能会大幅下降。通常在这种情况下，建议通过画布图块叠加渲染对象。
为此目的，我们介绍一个用于显示标记图标的custom overlay
示例
这是一个类似的示例，演示了如何使用自定义图标加载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>