Vue + Openlayers 绘制多边形（Polygon）查询区域内的人数（Feature）

完整代码

<!--
 * @Description: 绘制图形统计圈内点数
 * @Author: Dragon
 * @Date: 2020-12-21 13:19:47
 * @LastEditTime: 2020-12-21 15:03:27
 * @LastEditors: Dragon
-->

<template>
  <div>
    <div class="query-wrap">
      <el-button type="primary" @click="drawStart('Polygon')">
        {{ isDraw ? "绘制区域查询人数" : "重新绘制" }}
      </el-button>
    </div>
    <div id="map"></div>
  </div>
</template>

<script>
import "ol/ol.css";
import { Map, View, Feature } from "ol";
import { Image as ImageLayer, Vector as VectorLayer } from "ol/layer";
import { ImageStatic, Vector as VectorSource } from "ol/source";
import { getCenter } from "ol/extent";
import { Projection } from "ol/proj";

import Draw from "ol/interaction/Draw";
import { Point } from "ol/geom";
import { Icon, Style, Text, Fill, Stroke } from "ol/style";

import staticMap from "@/assets/map.png";
import img from "@/assets/tx-icon-1.png";

export default {
  data() {
    return {
      map: null, // 地图
      imgx: 0, // 当前地图宽
      imgy: 0, // 当前地图高
      isDraw: true, // 是否绘制
      draw: null,
      source: null,
      vector: null,
      styles: [
        new Style({
          stroke: new Stroke({
            color: "rgba(255,0,0,0.6)",
            width: 2,
          }),
          fill: new Fill({
            color: "rgba(255,0,0,0.3)",
          }),
        }),
      ],
      persons: [],
      polygon: [],
      polygonPersons: [],
      features: [],
      feature: null,
      vectorSource: new VectorSource(),
      timer: null,
    };
  },
  watch: {
    persons(val) {
      if (val) {
        this.setFeature();
      }
    },
  },
  methods: {
    // 初始化地图
    initMap() {
      let extent = [0, 0, this.imgx, this.imgy];
      let projection = new Projection({
        extent: extent,
      });
      let $this = this;
      // 默认地图
      let mapLayer = new ImageLayer({
        source: new ImageStatic({
          url: staticMap,
          projection: projection,
          imageExtent: extent,
        }),
      });

      // 绘制点
      let featureLayer = new VectorLayer({
        source: this.vectorSource,
      });

      this.map = new Map({
        target: "map",
        layers: [
          mapLayer, // 展示地图层
          featureLayer, // 点
        ],
        view: new View({
          projection: projection,
          center: getCenter(extent),
          zoom: 2,
          maxZoom: 18,
        }),
      });

      this.source = new VectorSource({ wrapX: false });
      this.vector = new VectorLayer({
        source: this.source,
        style: this.styles,
      });
      this.map.addLayer(this.vector);
    },

    // 点
    setFeature() {
      let that = this;
      that.features = [];
      that.vectorSource.clear();
      that.persons.map((item) => {
        that.feature = new Feature({
          geometry: new Point([item.x, item.y]),
          name: item.name,
        });
        // 设置Feature的样式，使用小旗子图标
        that.feature.setStyle(
          new Style({
            image: new Icon({
              anchor: [0, 1],
              src: img,
            }),
            text: new Text({
              // 位置
              textAlign: "center",
              // 基准线
              textBaseline: "middle",
              // 文字样式
              font: "normal 20px 微软雅黑",
              // 文本内容
              text: item.name,
              // 文本填充样式（即文字颜色）
              fill: new Fill({ color: "#aa3300" }),
              stroke: new Stroke({ color: "#ffcc33", width: 2 }),
            }),
          })
        );
        that.features.push(that.feature);
      });
      that.vectorSource.addFeatures(that.features);
    },

    // 开始绘制多边形
    drawStart(type) {
      let that = this;
      if (this.isDraw) {
        this.isDraw = false;
        this.draw = new Draw({
          source: this.source,
          type: type,
        });
        this.map.addInteraction(this.draw);
        this.draw.on("drawend", function (evt) {
          that.drawingEnd(evt);
        });
      } else {
        this.source.clear();
        this.map.removeInteraction(this.draw);
        this.isDraw = true;
        this.polygon = [];
        this.polygonPersons = [];
      }
    },

    // 构建多边形结束
    drawingEnd(evt) {
      let that = this;
      const geo = evt.feature.getGeometry();
      const t = geo.getType();
      if (t === "Polygon") {
        // 获取坐标点
        const points = geo.getCoordinates();
        points[0].map((item) => {
          that.polygon.push({ lng: item[0], lat: item[1] });
        });
        for (let i = 0; i < this.persons.length; i++) {
          let boxFlag = this.isRegion(this.persons[i].x, this.persons[i].y, this.polygon);
          if (boxFlag) {
            this.polygonPersons.push(this.persons[i]);
          }
        }
        this.$message({
          type: "success",
          message: `区域内有${this.polygonPersons.length}人`,
        });
        console.warn(this.polygonPersons, `区域内有${this.polygonPersons.length}人`);
        this.map.removeInteraction(this.draw);
      }
    },

    // 验证点是否在区域内
    isRegion(lon, lat, aPoints) {
      let num = 0,
        iCount;
      let dLon1, dLon2, dLat1, dLat2, dLon;
      if (aPoints.length < 3) return false;
      iCount = aPoints.length;
      for (let i = 0; i < iCount; i++) {
        if (i == iCount - 1) {
          dLon1 = aPoints[i].lng;
          dLat1 = aPoints[i].lat;
          dLon2 = aPoints[0].lng;
          dLat2 = aPoints[0].lat;
        } else {
          dLon1 = aPoints[i].lng;
          dLat1 = aPoints[i].lat;
          dLon2 = aPoints[i + 1].lng;
          dLat2 = aPoints[i + 1].lat;
        }
        if ((lat >= dLat1 && lat < dLat2) || (lat >= dLat2 && lat < dLat1)) {
          if (Math.abs(dLat1 - dLat2) > 0) {
            dLon = dLon1 - ((dLon1 - dLon2) * (dLat1 - lat)) / (dLat1 - dLat2);
            if (dLon < lon) num++;
          }
        }
      }
      if (num % 2 != 0) return true;
      return false;
    },
  },
  mounted() {
    let img = new Image();
    img.src = staticMap;
    let that = this;
    img.onload = function (res) {
      that.imgx = res.target.width;
      that.imgy = res.target.height;
      that.initMap();
    };
  },
  created() {
    let that = this;
    that.timer = setInterval(function () {
      that.persons = [
        { id: 1, name: "点-1", x: 497.08, y: 187.88, z: 0 },
        { id: 2, name: "点-2", x: 725.32, y: 565.88, z: 0 },
        { id: 3, name: "点-3", x: 643.24, y: 503.96, z: 0 },
      ];
    }, 2000);
  },
  beforeDestroy() {
    clearInterval(this.timer);
  },
};
</script>

<style>
#map {
  width: 100%;
  height: calc(100vh - 50px);
}
</style>