ol 优化

思路:小于的 segment 合并 画 1 个?(填补 segments 之间的 缝隙)

导致新问题: 何时重画 为 小段?

styleFunc 里面不能修改 feature 本身数据!需要 map on change:resolutuon 和 map on moveend (如果 point 视野外 被删除的话)

必须 styleFunction 里面 否则 zoom drag 永远不显示啦!!!!

styleFunction 里面和外面(不进入geojson) return 的区别:全局变量有。但是不画,也点不到。

  • multiline 多根 -> 1根 缺点是: 不能识别 segment
  • 同理 multi point

  • 短于 10 像素的 line 不画

  • point 数量 > 2000 不画
  • point 位置重叠 不画

短于 10 像素的 line 不画

1
2
3
let res = map.getView().getResolution();
let dt = get_distance_by_co2([sposx, sposy],[eposx,eposy],1) / res;
if(dt<20){return;}

getClosestFeatureToCoordinate

注意:这个性能也很差!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 伟业开  pos_x: 108.939079   pos_y: 34.254787

var cor = [108.939079,34.254787];
var pos = ol.proj.transform(cor,'EPSG:4326', 'EPSG:3857');
var rs = layer_bdz.getSource().getClosestFeatureToCoordinate(pos,function(d){
// console.log(d);
let prop = d.getProperties();
return prop['pos_x']!= cor[0] && prop['pos_y']!= cor[1];
})
console.log(rs);

// 最近的 多少 米
var pp2 = rs.getProperties();
var pos2 = ol.proj.transform([pp2.pos_x,pp2.pos_y],'EPSG:4326', 'EPSG:3857');
var dd = get_distance_by_co2(pos,pos2,0); // 1 是经纬度;0 是 google 坐标
console.log(dd);

// 最近的 多少 像素
var dxy = dd/map.getView().getResolution();
console.log('最近的 feature 距离 像素:',dxy);
if(dxy < 20){return;}

map.hasFeatureAtPixel(pixel)

1
2
3
4
5
6
7
8
var pos = ol.proj.transform([108,34],'EPSG:4326', 'EPSG:3857'); //
var pixel = map.getPixelFromCoordinate(pos); // lnglat -> xy
console.log(pixel);
var is_repeated = map.hasFeatureAtPixel(pixel,{
hitTolerance:20
}); // xy has feature
console.log(is_repeated);
if(is_repeated){return;}

注意:但是 map.hasFeatureAtPixel 性能很差!!!!!!执行时间很长!

stylefunc_node_default

styleFunction_segment