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

You may also like...