快捷導(dǎo)航

openlayers4實現(xiàn)點動態(tài)擴散

更新時間：2020年08月17日 15:34:15 作者：此愛如少年

這篇文章主要為大家詳細介紹了openlayers4實現(xiàn)的點動態(tài)擴散，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了openlayers4實現(xiàn)的點動態(tài)擴散的具體代碼，供大家參考，具體內(nèi)容如下

原理：連續(xù)刷新地圖，并且刷新時，修過點樣式的半徑大小，來實現(xiàn)擴散效果；

//定義底圖
var baseLayer = new ol.layer.Vector({
 renderMode: 'image',
 source: new ol.source.Vector({
  url:'/data/shengjie.geojson',
  format: new ol.format.GeoJSON()
 }),
 style: new ol.style.Style({
  fill: new ol.style.Fill({
   color: '#0A122A'
  }),
  stroke: new ol.style.Stroke({
   color: '#6E6E6E',
   width: 1
  })
 })
})

var view = new ol.View({
 center: [108.7,34.8],
 zoom: 4,
 projection: "EPSG:4326"
});

var map = new ol.Map({
 target: 'map',
 view: view,
 layers: [baseLayer]
})


//定義一個矢量圖層，用于打點
var pointAnimationLayer = new ol.layer.Vector({
 source: new ol.source.Vector(),
 style: new ol.style.Style({
  image: new ol.style.Circle({
   fill: new ol.style.Fill({
    color: '#E6E6E6'
   }),
   radius: 4
  })
 })
})
map.addLayer(pointAnimationLayer);

//隨機寫的點坐標
var points=[]
points.push([112.4,33.5]);
points.push([103.8,23.7]);
points.push([89.7,41.6]);

//將點添加到圖層
points.forEach(element => {
 var ft = new ol.Feature({
  geometry: new ol.geom.Point(element)
 });
 pointAnimationLayer.getSource().addFeature(ft);
});

//map渲染事件，回調(diào)動畫
map.on('postcompose',animation);

//樣式中的半徑變量，通過不斷刷新點樣式的半徑來實現(xiàn)點動態(tài)擴散
var radius = 1;

//動畫
function animation(event){
 if(radius >= 20){
  radius = 0
 }
 var opacity = (20 - radius) * (1 / 20) ;//不透明度
 var pointStyle = new ol.style.Style({
  image: new ol.style.Circle({
   radius:radius,
   stroke: new ol.style.Stroke({
    color: 'rgba(255,255,0' + opacity + ')',
    width: 2 - radius / 10
   })
  })
 })

 var features = pointAnimationLayer.getSource().getFeatures();
 
 var vectorContext = event.vectorContext;
 vectorContext.setStyle(pointStyle);
 features.forEach(element => {
  var geom = element.getGeometry();
  vectorContext.drawGeometry(geom);
 });
 radius = radius + 0.3;
 
 //觸發(fā)map的postcompose事件
 map.render();
}

實現(xiàn)

利用map的渲染事件：postcompose來連續(xù)刷新
之前實現(xiàn)地圖動畫都是用window.setInterval()方法來實現(xiàn)，這次拓展下視野，采用Openlayers內(nèi)部的方法。主要有兩步操作：

1、事件注冊