溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了openlayers4實現點動態擴散的方法，具有一定借鑒價值，需要的朋友可以參考下。希望大家閱讀完這篇文章后大有收獲。下面讓小編帶著大家一起了解一下。
原理：連續刷新地圖，并且刷新時，修過點樣式的半徑大小，來實現擴散效果；
//定義底圖
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渲染事件，回調動畫
map.on('postcompose',animation);
//樣式中的半徑變量，通過不斷刷新點樣式的半徑來實現點動態擴散
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;
//觸發map的postcompose事件
map.render();
}實現
利用map的渲染事件：postcompose來連續刷新
之前實現地圖動畫都是用window.setInterval()方法來實現，這次拓展下視野，采用Openlayers內部的方法。主要有兩步操作：
1、事件注冊
map.on('postcompose',animation);2、在事件的回調函數中去觸發postcompose事件
map.render();
postcompose事件第一次觸發是在地圖初始化時，后續的觸發都由animation方法中的map.render()來完成。
感謝你能夠認真閱讀完這篇文章，希望小編分享openlayers4實現點動態擴散的方法內容對大家有幫助，同時也希望大家多多支持億速云，關注億速云行業資訊頻道，遇到問題就找億速云，詳細的解決方法等著你來學習!
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
