openlayers4 포인트 동적 확산 실현
2914 단어 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();
}
실현맵의 렌더링 이벤트:postcompose를 이용하여 연속 리셋
이전에 지도 애니메이션을 실현하는 것은 모두 윈도우였다.setInterval () 방법으로 실현되었습니다. 이번에는 시야를 넓히고 Openlayers 내부의 방법을 사용합니다.주로 두 가지 작업이 있습니다.
1. 이벤트 등록
map.on('postcompose',animation);
2. 이벤트의 리셋 함수에서postcompose 이벤트를 터치합니다
map.render();
postcompose 이벤트의 첫 번째 촉발은 지도를 초기화할 때 후속적인 촉발은 모두animation 방법의map에 의해 발생합니다.render () 를 완료합니다.이상은 본문의 전체 내용입니다. 여러분의 학습에 도움이 되고 저희를 많이 응원해 주십시오.