openlayers使用WebGLPointsLayer优化VectorLayer加载geojson大文件卡顿问题
生成 VectorSource
const pointSource = new VectorSource({
url: url,
format: new GeoJSON(),
});VectorLayer 写法
const newlayer = new VectorLayer({
source: pointSource,
style: (feature) => {
const type: string = feature.getProperties()[field];
const color = mapFillColor(parseFloat(type)); // 颜色匹配函数
return new Style({
image: new CircleStyle({
radius: 3, // 圆点半径
fill: new Fill({ color: color }), // 填充颜色
stroke: new Stroke({
color: "#fff", // 边框颜色
width: 0.5, // 边框宽度
}),
}),
});
},
});WebGLPointsLayer 写法
const newWebGLlayer = new WebGLPointsLayer({
source: pointSource,
style: {
"circle-radius": 3,
"circle-fill-color": [
"match",
["get", "type"],
1,
"rgb(139, 209, 0)",
2,
"rgb(255, 255, 0)",
3,
"rgb(255, 128, 0)",
4,
"rgb(255, 0, 0)",
"rgb(255, 255, 255)",
],
"circle-stroke-color": "rgb(255, 255, 255)",
},
});如果只需写点的填充颜色样式"circle-fill-color",也必须写点大小"circle-radius",否则会报错 其中 match 的语法是 ['match', input, match1, output1, match2, output2, ..., defaultOutput]
相关链接:
- openlayers>WebGLStyle:https://openlayers.org/en/latest/apidoc/module-ol_layer_WebGLTile.html#~Style
- openlayers>ColorExpression:https://openlayers.org/en/latest/apidoc/module-ol_style_flat.html#~ColorExpression
- openlayers>WebGLPointsLayer 示例:https://openlayers.org/en/latest/examples/webgl-points-layer.html
