openlayers结合多选框在控制一个图层显隐性时加载过慢的问题
在做功能区图层全选多选时,正常图层的加载应该是2、3秒即可加载完毕,但是当选择某区域某类区时,竟然用了十几秒才加载出来,后来找出问题竟然是for循环中对json数据格式转换代码的问题,原代码是:
var dataFeatures = msg.layer
var lilen = $("#point_ul ul").length;
clearlayerSource(pointLayer);
clearlayerSource(auto_pointLayer);
var newSource = [];
for (var s = 0; s < lilen; s++) {
if ($("#point_ul ul").eq(s).find("input").prop("checked") == true) {
var index_id = $("#point_ul ul").eq(s).find("input").prop("name");
for (var m = 0; m < JSON.parse(dataFeatures).features.length; m++) {
if (JSON.parse(dataFeatures).features[m].properties["region"] == index_id) {
newSource.push(JSON.parse(dataFeatures).features[m]);
}
}
}
}
for (var i = 0; i < newSource.length; i++) {
//地图上追加要素信息
var geojson = new ol.format.GeoJSON().readFeatures(newSource[i], {
dataProjection: "EPSG:4326",
featureProjection: "EPSG:3857" //规定要素以哪种坐标显示
});
pointLayer.getSource().addFeatures(geojson);
}
注意第一个for循环里有三次转换数据JSON.parse(dataFeatures),就是这个原因导致加载特慢,后来改在for循环前直接把数据转好就行了
var dataFeatures = msg.layer
//注意就是在这里提前转一下就行了
var parse_dataFeatures = JSON.parse(dataFeatures)
var lilen = $("#point_ul ul").length;
clearlayerSource(pointLayer);
clearlayerSource(auto_pointLayer);
var newSource = [];
for (var s = 0; s < lilen; s++) {
if ($("#point_ul ul").eq(s).find("input").prop("checked") == true) {
var index_id = $("#point_ul ul").eq(s).find("input").prop("name");
for (var m = 0; m < parse_dataFeatures.features.length; m++) {
if (parse_dataFeatures.features[m].properties["region"] == index_id) {
newSource.push(parse_dataFeatures.features[m]);
}
}
}
}
for (var i = 0; i < newSource.length; i++) {
//地图上追加要素信息
var geojson = new ol.format.GeoJSON().readFeatures(newSource[i], {
dataProjection: "EPSG:4326",
featureProjection: "EPSG:3857" //规定要素以哪种坐标显示
});
pointLayer.getSource().addFeatures(geojson);
}
虽然是一个小错误但是却影响这么大,导致两秒就能加载出来的图层用了十几秒才加载出来,所以在写代码中要养成良好习惯,不要贪图一时方便。
转载自:https://blog.csdn.net/du_5pet/article/details/87707097