【openlayer】随笔

 ===== 事件类型 =====
'click',// 单击
'dblclick',// 双击
'singleclick',// 单击，延迟250毫秒

'moveend',// 鼠标滚动事件
'pointermove',// 鼠标移动事件
'pointerdrag',// 鼠标拖动事件
    
'precompose',//地图准备渲染，为渲染
'postcompose',//地图渲染中
'postrender',//地图渲染全部结束

'change:layerGroup',// 地图图层增删时触发
'change:size',// 地图窗口发生变化就会触发
'change:target',// 地图绑定的div发生更改时触发
'change:view',// 地图view对象发生变化触发
'propertychange',// Map对象中任意的property值改变时触发

// ===== 监听地图单击事件 =====
map.on('singleclick', e => {
    let feature = map.forEachFeatureAtPixel(e.pixel, feature => feature);
    if (feature) {
        // do something
    } else {
        console.log('click the map get coordinate', e.coordinate.join());
    }
});

// ===== 监听地图双击事件 =====
map.on("dblclick", e => {
    let feature = map.forEachFeatureAtPixel(e.pixel, feature => feature);
    if (feature) {
        // do something
        return false;
    }
})

// ===== 为map添加鼠标移动事件监听（当指向“要素”时改变鼠标光标状态） =====
map.on('pointermove', e => {
    let pixel = map.getEventPixel(e.originalEvent);
    let hit = map.hasFeatureAtPixel(pixel);
    map.getTargetElement().style.cursor = hit ? 'pointer' : '';
});

// 监听地图地图移动结束事件，（获取当前缩放等级）
map.on("moveend", e => {
    let zoom = map.getView().getZoom(); //获取当前地图的缩放级别
    // do something
});

featrue闪烁

<template>
  <div id="app">
    <div id="Map" ref="map" />
  </div>
</template>
<script>
import "ol/ol.css";
import TileLayer from "ol/layer/Tile";
import VectorLayer from "ol/layer/Vector";
import VectorSource from "ol/source/Vector";
import XYZ from "ol/source/XYZ";
import { Map, View, Feature } from "ol";
import { Style, Circle, Stroke } from "ol/style";
import { Point } from "ol/geom";
import { defaults as defaultControls } from "ol/control";
import { fromLonLat } from "ol/proj";
import { getVectorContext } from "ol/render";

// 边界json数据
export default {
  data() {
    return {
      map: null,
      radius: 0,
    };
  },
  mounted() {
    this.initMap();
    const coordinates = [
      { x: "106.918082", y: "31.441314" }, //重庆
      { x: "86.36158200334317", y: "41.42448570787448" }, //新疆
      { x: "89.71757707811526", y: "31.02619817424643" }, //西藏
      { x: "116.31694544853109", y: "39.868508850821115" }, //北京
      { x: "103.07940932026341", y: "30.438580338450862" }, //成都
    ];
    this.addDynamicPoints(coordinates);
  },
  methods: {
    /**
     * 初始化地图
     */
    initMap() {
      this.map = new Map({
        target: "Map",
        controls: defaultControls({
          zoom: true,
        }).extend([]),
        layers: [
          new TileLayer({
            source: new XYZ({
              url: "http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}",
            }),
          }),
        ],
        view: new View({
          center: fromLonLat([108.522097, 37.272848]),
          zoom: 4.7,
          maxZoom: 19,
          minZoom: 4,
        }),
      });
    },
    /**
     * 批量添加闪烁点
     */
    addDynamicPoints(coordinates) {
      // 设置图层
      let pointLayer = new VectorLayer({ source: new VectorSource() });
      // 添加图层
      this.map.addLayer(pointLayer);
      // 循环添加feature
      let pointFeature = [];
      for (let i = 0; i < coordinates.length; i++) {
        // 创建feature，一个feature就是一个点坐标信息
        const feature = new Feature({
          geometry: new Point(fromLonLat([coordinates[i].x, coordinates[i].y])),
        });
        pointFeature.push(feature);
      }
      //把要素集合添加到图层
      pointLayer.getSource().addFeatures(pointFeature);
      // 关键的地方在此：监听postrender事件，在里面重新设置circle的样式
      let radius = 0;
      pointLayer.on("postrender", (evt) => {
        if (radius >= 20) radius = 0;
        var opacity = (20 - radius) * (1 / 20); //不透明度
        var pointStyle = new Style({
          image: new Circle({
            radius: radius,
            stroke: new Stroke({
              color: "rgba(255,0,0" + opacity + ")",
              width: 3 - radius / 10, //设置宽度
            }),
          }),
        });
        // 获取矢量要素上下文
        let vectorContext = getVectorContext(evt);
        vectorContext.setStyle(pointStyle);
        pointFeature.forEach((feature) => {
          vectorContext.drawGeometry(feature.getGeometry());
        });
        radius = radius + 0.3; //调整闪烁速度
        //请求地图渲染（在下一个动画帧处）
        this.map.render();
      });
    },
  },
};
</script>
<style lang="scss" scoped>
html,
body {
  height: 100%;
}
#app {
  min-height: calc(100vh - 50px);
  width: 100%;
  position: relative;
  overflow: none;
  #Map {
    height: 888px;
    min-height: calc(100vh - 50px);
  }
}
</style>

openlayers 也是一个前端库，那么它肯定离不开 html 的运用，比如，我们首先需要在页面放置一个显示地图的 html 元素，一个 p 元素（假设其 id 属性设置为 “map”，后面简称为 map p），然后在地图初始化的时候指定这个元素，openlayers 会首先在这个元素中创建一个 class 为 ol-viewport 的 p 元素，其尺寸保持与 map p 相同，然后在 ol-viewport p 中创建一个 canvas 元素，在这个 canvas 元素中渲染请求到的地图；其次，还会添加一个 class 为 ol-overlaycontainer 的 p 元素，用来放置 overlay；最后，添加一个 class 为 ol-overlaycontainer-stopevent 的 p 元素，主要是放置 openlayers 的控件.