openlayers6實現webgl點圖層渲染效果(附源碼下載)

前言：openlayers6推出來的有一段時間，推出來的新特性見：https://github.com/openlayers/openlayers/releases/
該版本的主要功能是能夠組合具有不同渲染器類型的圖層。以前，地圖只使用一種渲染策略，並且地圖中的所有圖層都必須實施該策略。現在，可以使用包含使用不同渲染技術的圖層的地圖。例如，這使得可以在同一地圖中將Canvas（2D）圖層與基於WebGL的圖層組合在一起。也可以使用自定義渲染器創建圖層。因此，您可以擁有一個使用另一個庫（例如d3）的地圖來渲染一個圖層，並使用OpenLayers來渲染其他圖層的地圖。此外，6.0版還對矢量圖塊渲染進行了許多改進，並且總體上應該具有較低的內存占用量。WebGL拋棄了實驗室階段，正式成為圖層，目前openlayers6.1.1版本有webgl點圖層。

本文我是參照openlayers官網webgl點渲染例子，替換自己的數據源做的測試渲染例子，測試點圖層77w左右個點，渲染效果還可以，體驗問題不大。

內容概覽

1.基於openlayers6實現webgl點圖層渲染效果
2.源代碼demo下載

效果圖如下：

• 核心代碼如下：

import {Map, View} from 'ol';
//import TileLayer from 'ol/layer/Tile';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
import XYZ from 'ol/source/XYZ';
import WebGLPointsLayer from 'ol/layer/WebGLPoints';
import GeoJSON from 'ol/format/GeoJSON';
import Vector from 'ol/source/Vector';
import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style';
import Overlay from 'ol/Overlay';
 
var container = document.getElementById('popup');
var content = document.getElementById('popup-content');
var closer = document.getElementById('popup-closer');
 
 
var overlay = new Overlay({
element: container,
autoPan: true,
autoPanAnimation: {
duration: 250
}
});
 
closer.onclick = function() {
overlay.setPosition(undefined);
closer.blur();
clearGeojsonLayer();
return false;
};
 
var image = new CircleStyle({
radius: 6,
fill: null,
stroke: new Stroke({color: '#00BFFF', width: 3})
});
//繪制geojson矢量圖層樣式
var geoJsonStyle = new Style({
image: image
});
var geojsonLayer = new VectorLayer({
source: new Vector(),
style: geoJsonStyle
});
 
 
var map = new Map({
target: 'map',
layers: [
new TileLayer({
source: new XYZ({
//url: 'https://{a-c}.tile.openstreetmap.org/{z}/{x}/{y}.png'
url: 'http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
})
}),
geojsonLayer
],
overlays: [overlay],
view: new View({
projection: 'EPSG:4326',
//center: [0, 0],
//zoom: 2
center: [106.8751, 33.3851],
zoom: 5
})
});
 
var vectorSource = new Vector({
url: 'data.json',
format: new GeoJSON()
});
 
var style = {
symbol: {
symbolType: 'circle',
//size: 5,
size: [
"interpolate",
[
"exponential",
2.5
],
[
"zoom"
],
2,
1,
12,
8,
16,
12
],
color: '#ffed02',
offset: [0, 0],
opacity: 0.95
}
};
 
var pointsLayer;
pointsLayer = new WebGLPointsLayer({
source: vectorSource,
style: style,
disableHitDetection: false //將此設置為true會稍微提高性能，但會阻止在圖層上進行所有命中檢測，需要交互的話，設置false
});
map.addLayer(pointsLayer);
 
map.on('singleclick',function(e) {
if (e.dragging) {
return;
}
var feature =map.forEachFeatureAtPixel(e.pixel,
function(feature) {
return feature;
});
console.log('feature',feature);
……

完整demo源碼見小專欄文章尾部：小專欄

文章尾部提供源代碼下載，對本專欄感興趣的話，可以關注一波