openlayers海量点渲染（2w点左右）
openlayers海量点渲染（2w点左右）
此处用到了openlayers的webgl属性
import GeoJSON from 'ol/format/GeoJSON'; //用来加载矢量数据
import WebGLPointsLayer from 'ol/layer/WebGLPoints'; //使用webgl渲染初始化矢量图层，从文件加载点的地理信息
this.vectorSource = new Vector({
url: 'http://localhost:9528/data.geojson',
format: new GeoJSON(),
});
this.pointsLayer = new WebGLPointsLayer({
source: this.vectorSource,
style: this.newStyle, //点样式
disableHitDetection: true, //是否开启碰撞检测
});
this.map.addLayer(this.pointsLayer);GEOJSON文件
完整代码
<template>
<div class="points">
<div id="map"></div>
</div>
</template>
<script>
import GeoJSON from 'ol/format/GeoJSON';
import Map from 'ol/Map';
import XYZ from 'ol/source/XYZ'
import TileLayer from 'ol/layer/Tile';
import Vector from 'ol/source/Vector';
import View from 'ol/View';
import WebGLPointsLayer from 'ol/layer/WebGLPoints';
export default {
name: 'SeaPoints',
data () {
return {
map: null,
source: null,
vectorSource: null,
newStyle: {
symbol: {
symbolType: 'circle',
size: [
'interpolate',
['linear'],
['get', 'population'],
40000,
5,
2000000,
8],
color: [
'interpolate',
['linear'],
['get', 'latitude'],
-80,
'#ff14c3',
-20,
'#ff621d',
20,
'#ffed02',
80,
'#00ff67'],
offset: [0, 0],
opacity: 0.95,
},
},
pointsLayer: undefined
}
},
methods: {
initPoints () {
this.vectorSource = new Vector({
url: 'http://localhost:9528/data.geojson',
format: new GeoJSON(),
});
console.log(this.vectorSource)
this.map = new Map({
layers: [
new TileLayer({
source: new XYZ({
url: 'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
})
})],
target: document.getElementById('map'),
view: new View({
center: [0, 0],
zoom: 2,
}),
});
this.refreshLayer();
this.animate();
},
refreshLayer () {
var previousLayer = this.pointsLayer;
this.pointsLayer = new WebGLPointsLayer({
source: this.vectorSource,
style: this.newStyle,
disableHitDetection: true,
});
console.log(this.pointsLayer)
this.map.addLayer(this.pointsLayer);
if (previousLayer) {
this.map.removeLayer(previousLayer);
previousLayer.dispose();
}
},
animate () {
this.map.render();
window.requestAnimationFrame(this.animate);
}
},
mounted () {
this.initPoints()
}
}
</script>
<style lang="scss" scoped>
#map {
width: 100%;
height: 720px;
}
</style>
本文转载自：https://blog.csdn.net/hangzhou728/article/details/117323583
