添加影响Bing Maps性能的多条折线 [英] Adding many polylines affecting Bing Maps performance
问题描述
我正在以10Hz的速率向Bing地图添加折线。 （每秒10折线）。
I am adding polylines to Bing Maps at the rate of 10Hz. (10 polylines per second).
10-15分钟后，地图表现逐渐放缓。
After 10-15 minutes or so, maps performance is gradually slowing down.
我有什么方法可以处理这个问题？
Is there any way I can take care of this issue?
以下是我的代码：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<style type='text/css'>body{margin:0;padding:0;overflow:hidden;font-family:'Segoe UI',Helvetica,Arial,Sans-Serif}</style>
</head>
<body>
<div id='myMap' style='width: 100vw; height: 100vh;'></div>
<script type='text/javascript'>
var map;
var prevLat = 0;
var prevLon = 0;
var isMapLoadComplete = false;
function loadMap() {
map = new Microsoft.Maps.Map(document.getElementById('myMap'), {
liteMode: true
});
map.setView({
center: new Microsoft.Maps.Location(12.9716, 77.5946),
zoom: 15
});
isMapLoadComplete = true;
}
function AddPoint(latitude, longitude, heading, fixTypeColor){
if(isMapLoadComplete)
{
if(prevLat == 0 && prevLon == 0)
{
var Coordinates = [
new Microsoft.Maps.Location(latitude, longitude)
];
}
else
{
var Coordinates = [
new Microsoft.Maps.Location(prevLat, prevLon),
new Microsoft.Maps.Location(latitude, longitude)
];
}
prevLat = latitude;
prevLon = longitude;
var newPoint = new Microsoft.Maps.Location(latitude, longitude);
var polyline = new Microsoft.Maps.Polyline(Coordinates, {
strokeColor: fixTypeColor,
strokeThickness: 2
});
map.entities.push(polyline);
if(map.getBounds().contains(newPoint))
{
// marker is within map bounds don't Move
}
else
{
map.setView({
center: newPoint
});
}
}
}
</script>
<script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=[my_key]&callback=loadMap' async defer></script>
</body>
</html>
函数AddPoint（）以10 Hz的频率调用。
function AddPoint() is called at 10 Hz.
推荐答案
将折线添加到地图时，不要使用map.entities.push，而是使用图层并首先将10条折线添加到数组中并传递整个数组进入图层。这将导致对地图的1次渲染调用，而不是10次，这将更快。
When you add your polylines to the map, instead of using map.entities.push, use a layer and add your 10 polylines to an array first and pass the whole array into the layer. This will result in 1 render call to the map instead of 10 which will be much faster.
此外，如果您每秒添加10条折线，15分钟后意味着您在地图上有9000条折线。地图控件可以处理那么多折线，但是如果您的折线在每个折线中都有很多坐标，那么内存使用量会大幅增加
，这意味着需要更多的计算来渲染数据，这会减慢事情发生了。
Additionally, if you are adding 10 polylines a second, after 15 minutes that would mean you have 9000 polylines on the map. The map control can handle that many polylines, however if your polylines has a lot of coordinates in each of them, that could increase the memory usage drastically and also mean a lot more calculations are required to render the data which would slow things down.
这篇关于添加影响Bing Maps性能的多条折线的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
