使用产品：iclient for openlayer 9D
问题详细描述：可视化点图层中的第一个示例， 高效率点图层纽约出租车18万点-canvas渲染性能问题
问题重现步骤： 1、打开官方示例，可视化--高效率点图层--第一个canvas渲染；2、修改编辑器中代码；3、增加定时器，定时刷新页面Graphic图层数据；
问题现象：最后页面直接崩溃，内存增加过快，倒是页面崩溃。
修改后的代码如下：
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<title data-i18n="resources.title_graphiclayerCanvas"></title>
<script type="text/javascript" include="randomcolor" src="../js/include-web.js"></script>
<script type="text/javascript" src="../../dist/include-openlayers.js"></script>
<style>
.ol-popup {
position: absolute;
background-color: white;
-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
padding: 15px;
border-radius: 10px;
border: 1px solid #cccccc;
bottom: 12px;
left: -50px;
min-width: 50px;
}
.ol-popup:after, .ol-popup:before {
top: 100%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
.ol-popup:after {
border-top-color: white;
border-width: 10px;
left: 48px;
margin-left: -10px;
}
.ol-popup:before {
border-top-color: #cccccc;
border-width: 11px;
left: 48px;
margin-left: -11px;
}
</style>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%">
<div id="map" style="width: 100%;height:100%"></div>
<div id="popup" class="ol-popup">
<div id="popup-content"></div>
</div>
<script type="text/javascript">
var url = (window.isLocal ? document.location.host : "http://support.supermap.com.cn:8090") + "/iserver/services/map-china400/rest/maps/ChinaDark";
var map;
var colorCount = 10;
var colors = getRandomColors(colorCount);
new ol.supermap.MapService(url).getMapInfo(function (serviceResult) {
var mapJSONObj = serviceResult.result;
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var overlay = new ol.Overlay(({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 250
}
}));
map = new ol.Map({
target: 'map',
controls: ol.control.defaults({attributionOptions: {collapsed: false}})
.extend([new ol.supermap.control.Logo()]),
view: new ol.View({
center: ol.proj.transform([-73.9286, 40.75], 'EPSG:4326', 'EPSG:3857'),
zoom: 12,
projection: 'EPSG:3857'
}),
overlays: [overlay],
renderer: ['canvas']
});
var options = ol.source.TileSuperMapRest.optionsFromMapJSON(url, mapJSONObj);
var layer = new ol.layer.Tile({
source: new ol.source.TileSuperMapRest(options)
});
map.addLayer(layer);
});
var randomCircleStyles = [];
for (var i = 0; i < colorCount; i++) {
randomCircleStyles.push(new ol.style.RegularShape({
radius: Math.floor(Math.random() * 10 + 1),
fill: new ol.style.Fill({
color: colors[i]
}),
stroke: new ol.style.Stroke({
color: colors[i]
}),
points: 3,
}));
}
function show(){
$.get('../data/nyc_taxi.json', function (nycData) {
var count = nycData.features.length; //矢量点的个数
var graphics = new Array(count);
for (var i = 0; i < count; ++i) {
var coordinates = nycData.features[i].geometry.coordinates;
if (coordinates[0] === coordinates[1]) {
continue;
}
coordinates = ol.proj.transform(coordinates, 'EPSG:4326', 'EPSG:3857');
graphics[i] = new ol.Graphic(new ol.geom.Point(coordinates));
graphics[i].setStyle(randomCircleStyles[Math.floor(Math.random() * colorCount)]);
}
map.once('postrender', function () {
var graphicLayer = new ol.layer.Image({
source: new ol.source.Graphic({
graphics: graphics,
map: map,
onClick: function (graphic) {
if (graphic) {
var coords = graphic.getGeometry().getCoordinates();
content.innerHTML = resources.text_coordinate + ":[" + coords[0] + "," + coords[1] + "]";
overlay.setPosition(graphic.getGeometry().getCoordinates());
return;
}
overlay.setPosition(undefined);
}
})
});
map.addLayer(graphicLayer);
})
});
}
function getRandomColors(count) {
return randomColor({
luminosity: 'bright',
hue: 'random',
alpha: 0.5,
format: 'rgba',
count: count
});
}
show();
setInterval(function () {
show();
}, 60 * 1000);
</script>
</body>
</html>
