openlayers 5.3.0实现标注事件点动画
<html lang="en">
<head>
<meta charset="utf8">
<link rel="stylesheet" href="./css/ol.css" type="text/css">
<style>
.map {
height: 100%;
width: 100%;
}
</style>
<script src="./build/jquery.js"></script>
<script src="./build/echarts.min.js"></script>
<script src="./build/ol.js"></script>
<title>OpenLayers example</title>
</head>
<body>
<h2>My Map</h2>
<div id="map" class="map">
经度<input id="lon" type="text" value=""/> 纬度<input id="lat" type="text"value=""/><button id="btn1">定位</button>
</div>
<script type="text/javascript">
var layer=new ol.layer.Vector({
source: new ol.source.Vector()
});
var tilelayer= new ol.layer.Tile({
source: new ol.source.OSM()
});
var map = new ol.Map({
target: 'map',
layers: [
tilelayer,layer
],
view: new ol.View({
projection: 'EPSG:4326',
center:[117,42],
zoom: 4,
})
});
var btn=document.getElementById("btn1");
btn.addEventListener("click",function(){
var lon=document.getElementById("lon").value;
var lat=document.getElementById("lat").value;
var feature= new ol.Feature({
geometry: new ol.geom.Point([lon,lat])
});
layer.getSource().addFeature(feature);
map.getView().setCenter([lon,lat]);
map.getView().setZoom(8);
var radius = 0;
//改变地图上的某个feature或者layer或者其他任何东西，就会触发重新渲染
map.on('postcompose', function(){
// 增大半径，最大20
radius++;
radius = radius % 20;
// 设置样式
feature.setStyle(new ol.style.Style({
image: new ol.style.Circle({
radius: radius,
stroke: new ol.style.Stroke({
color: 'red',
size: 1
})
})
}));
});
});
</script>
</body>
</html>
2.效果图
转载自：https://blog.csdn.net/xlp789/article/details/84543306
