在openlayer上实现一个简单的点位扩散效果

起因

最近公司的旧项目接到了新的整改需求，其中一个需求让在已有的地图点位上添加一些特效。例如，当报警发生时，点位要有一个扩散的高亮效果。

查询了官方api和案例之后，没有找到一个满意的答案。又经过一番搜寻，发现了一个方法。通过创建一个overlay，然后用overlay绑定一个dom节点，再通过给dom节点赋予css样式。最终通过css实现想要的效果，如此一来就会简单很多。（完整demo源码附在文章底部）

案例

1. 快速创建一个简易的openlayer测试demo。根据官方文档的引导，直接按照以下步骤就能得到一个简单的地图demo。

           npm create ol-app my-app
           cd my-app
           npm start
   

2. 改造一下默认生成的代码，将坐标系和中心点修改一下，方便我们后续测试。

           const map = new Map({
              target: 'map',
              layers: [
                  new TileLayer({
                      source: new OSM(),
                  }),
              ],
              view: new View({
                  center: [86.0625, 34.125],
                  projection: 'EPSG:4326', // 修改坐标系
                  zoom: 6,
              }),
          });
   
   

3. 往地图上添加一个点位图层并添加到地图中。

       const source = new VectorSource(); // 创建一个数据源
          const vector = new VectorLayer({
              // 创建一个图层并绑定数据源
              source: source,
          });
          map.addLayer(vector); // 将图层添加进图层中
          const point = new Feature({
              geometry: new Point([86.0625, 34.125]),
              zIndex: 2,
              style: new Style({
                  image: new Circle({
                      radius: 5,
                      fill: new Fill({
                          color: 'rgba(255, 0, 0, 0.5)',
                      }),
                      stroke: new Stroke({
                          color: 'red',
                          width: 2,
                      }),
                  }),
                  zIndex: 2,
              }),
          });
      source.addFeature(point); // 将创建的点位添加到数据源中
   
   

4. 创建一个overlay图层并将其添加进map中，并绑定对应的class样式。

      const elem = document.createElement('div'); // 创建一个dom节点
      const parent = document.getElementById('overlay_container'); // 获取父节点的dom
      parent.appendChild(elem); // 将创建的dom节点添加到父节点中
      elem.setAttribute('class', 'css_animation'); // 给创建的dom节点添加样式
      const pointAnimateOverLay = new Overlay({
          // 创建一个overlay 并绑定dom节点
          element: elem,
          positioning: 'center-center',
          offset: [0, 0],
          insertFirst: false,
          insertFirst: false,
          zIndex: 1,
      });
      ​
      map.addOverlay(pointAnimateOverLay); // 将overlay添加到地图中
      ​
      pointAnimateOverLay.setPosition([86.0625, 34.125]); // 设置overlay的位置为点位的位置
   
   

最终实现的效果：

反思

通过overlay我们可以引入css3这个强大的帮手，帮助我们以简便的方式实现很多特效。今天的案例分享只是抛砖引玉，希望能帮助到大家~ 感谢你的观看！

完整demo代码地址:github.com/mzyaimll/wo…

黑默丁格说：越是光芒万丈的人，越容易燃尽生命的力量。

因此，希望大家能为自己爱的人添一束亮光，但同时也为自己点一根蜡烛。温暖自己，心藏美好。