传单.js和JSON数据:优化和性能
Leaflet.js and JSON data : optimization and performance
我目前正在使用 Javascript 进行我的第一次真正郊游,以构建我们客户数据的交互式地图。
到目前为止,我已经掌握了基础知识,但是当我开始使用标记超过 500 poi 或圆圈标记超过 10,000 poi 时,性能开始下降......如果有人可以提供一些关于如何优化我已经拥有的建议,或者我最好迁移到像 mongo 这样的适当数据库以获取 JSON 数据,或者也许使用 Node Js 在工作服务器端?
任何建议将不胜感激:)
var apiKey = 'BC9A493B41014CAABB98F0471D759707',
styleID = '108219';
// styleID = '997';
// var map = L.map('map').setView([54.550, -4.433], 7);
var southWest = new L.LatLng(61.029031, 4.746094),
northEast = new L.LatLng(48.786962 ,-13.183594),
bounds = new L.LatLngBounds(southWest, northEast);
var mapcenter = new L.LatLng(53.457393,-2.900391);
var map = new L.Map('map',
{
center: mapcenter,
zoom: 7,
// maxBounds: bounds,
zoomControl: false
});
var cloudmadeUrl = generateTileURL(apiKey, styleID),
attribution = 'Map data © OpenStreetMap contributors.',
tileLayer = new L.TileLayer(
cloudmadeUrl,
{
maxZoom: 18,
attribution: attribution,
});
tileLayer.addTo(map);
var zoomControl = new L.Control.Zoom({ position: 'topleft'} );
zoomControl.addTo(map);
var scaleControl = new L.Control.Scale({ position: 'bottomleft' });
scaleControl.addTo(map);
geojsonLayer = L.geoJson(geojson, {
pointToLayer: function(feature, latlng) {
return new L.CircleMarker(latlng, {fillColor: feature.properties.MarkerColour, fillOpacity: 0.5, stroke: false, radius: 6});
// return new L.Marker(latlng, {icon: L.AwesomeMarkers.icon({icon: feature.properties.MarkerIcon, color: feature.properties.MarkerColour, iconColor: 'white'}) });
},
onEachFeature: function (feature, layer) {
layer.bindPopup( '<strong><b>Customer Data</b></strong><br />' + '<b>Result : </b>' + feature.properties.Result + '<br />' + '<b>Postcode : </b>' + feature.properties.Postcode + '<br />' );
}
});
console.log('starting: ' + window.performance.now());
map.addLayer(geojsonLayer);
console.log('ending: ' + window.performance.now());
function generateTileURL(apiKey, styleID) {
return 'http://{s}.tile.cloudmade.com/' + apiKey + '/' + styleID + '/256/{z}/{x}/{y}.png';
}
和一些示例数据:
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-0.213467,
51.494815
]
},
"properties": {
"DateTime": "1372719435.39",
"Result": "Cable Serviceable",
"MarkerIcon": "ok-sign",
"MarkerColour": "green",
"Postcode": "W14 8UD"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-0.389445,
51.512121
]
},
"properties": {
"DateTime": "1372719402.083",
"Result": "Refer for National Serviceability",
"MarkerIcon": "minus-sign",
"MarkerColour": "red",
"Postcode": "UB1 1NJ",
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-0.411291,
51.508012
]
},
"properties": {
"DateTime": "1372719375.725",
"Result": "Cable Serviceable",
"MarkerIcon": "ok-sign",
"MarkerColour": "green",
"Postcode": "UB3 3JJ"
}
},
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [
-2.11054,
53.500752
]
},
"properties": {
"DateTime": "1372719299.088",
"Result": "Cable Serviceable",
"MarkerIcon": "ok-sign",
"MarkerColour": "green",
"Postcode": "OL7 9LR",
}
}
有几个 Leaflet 插件可以帮助处理在客户端浏览器中渲染大量点。
最简单的方法是使用对标记进行聚类的插件,例如标记聚类器。 Clusterer 极大地帮助了客户端的渲染,因为这意味着客户端计算机不必绘制 10,000 个点,它只需绘制 10-40 个点。
你也可以做一个热图 - 有两个插件,都基于HTML5 Canvas:
- 热画布
- 热图.js
相关文章:
- JavaScript数组优化以提高性能
- React+Redux性能优化与组件ShouldUpdate
- 如何优化 jquery 脚本以提高性能
- 优化javascript/jQuery以获得更好的性能
- 使用jcanvas绘制图层:性能优化
- 压缩脚本和样式,并将所有js和样式引用合并为单个引用,以优化网站性能
- 如何优化代码以提高性能
- 无论如何,优化此视差脚本以获得更好的性能
- 传单.js和JSON数据:优化和性能
- JavaScript:Object vs True(或其他原语)相等比较(性能/优化)
- 使用新的javascript性能.在iframe上优化API
- 匿名函数vs常规函数性能/优化
- 优化ExtJS应用程序的性能
- 使用Javascript优化性能的框架
- 检查窗口大小是否有变化和性能/优化
- Chrome扩展性能优化
- HTML5 / CSS GPU性能优化
- 性能优化标记动画
- 如何优化jQuery的性能
- 从WebSQL在Javascript中的非二进制非有序树结构的性能优化