vue+openlayer实现地图框选、多选

迷南。 2021-07-25 14:48 706阅读 0赞

## 一，地图框选  ##

<template>
      <div id="map">
        <el-button @click="addLayer()">添加图层</el-button>
        <el-button @click="removeLayer()">移除图层</el-button>
        <el-button @click="addInteraction()">添加交互</el-button>
        <el-button @click="removeInteraction()">移除交互</el-button>
      </div>
    </template>
    <script>
    import "ol/ol.css";
    import Map from "ol/Map";
    import View from "ol/View";
    import TileLayer from "ol/layer/Tile";
    import VectorLayer from "ol/layer/Vector.js";
    import { OSM, Vector as VectorSource } from "ol/source";
    import { defaults as defaultControls } from "ol/control";
    import ZoomSlider from "ol/control/ZoomSlider";
    import GeoJSON from "ol/format/GeoJSON";
    import Select from "ol/interaction/Select";
    import DragBox from "ol/interaction/DragBox";
    import { platformModifierKeyOnly } from "ol/events/condition";
    
    export default {
      name: "",
      data() {
        return {
          map: null,
          select: {},
          dragBox: {},
          vectorSource: {},
          vectorLayer: {},
    
          selectedFeatures: [],
        };
      },
      mounted() {
        this.initMap();
      },
      methods: {
        addLayer() {
          this.vectorLayer = new VectorLayer({
            source: this.vectorSource,
            zIndex: 2,
          });
    
          this.map.addLayer(this.vectorLayer);
        },
        removeLayer() {
          this.map.removeLayer(this.vectorLayer);
        },
        addInteraction() {
          this.select = new Select();
          this.selectedFeatures = this.select.getFeatures();
    
          this.dragBox = new DragBox({ condition: platformModifierKeyOnly });
          this.map.addInteraction(this.select);
          this.map.addInteraction(this.dragBox);
    
          this.dragBox.on("boxend", () => {
            let extent = this.dragBox.getGeometry().getExtent();
            this.vectorSource.forEachFeatureIntersectingExtent(
              extent,
              (feature) => {
                this.selectedFeatures.push(feature);
              }
            );
          });
          this.dragBox.on("boxstart", () => {
            this.selectedFeatures.clear();
          });
        },
        removeInteraction() {
          this.selectedFeatures.clear();
          this.map.removeInteraction(this.select);
          this.map.removeInteraction(this.dragBox);
        },
    
        // 初始化地图
        initMap() {
          let view = new View({
            projection: "EPSG:4326",
            center: [115, 39],
            zoom: 4,
          });
          let layer = new TileLayer({
            source: new OSM(),
            visible: true,
            zIndex: 1,
            name: "OSM",
          });
          let vectorSource = new VectorSource({
            url: "sichuan.json",
            format: new GeoJSON(),
          });
    
          this.vectorSource = vectorSource;
    
          this.map = new Map({
            layers: [layer],
            target: "map",
            view: view,
            controls: defaultControls().extend([new ZoomSlider()]),
          });
        },
      },
    };
    </script>
    <style scoped>
    #map {
      height: 100vh;
      width: 100vw;
    }
    </style>

记得在public文件夹中放一个sichuan.json的文件

**千万要注意this的指向，在用箭头函数时，里面的this指向的是外层的vue实例 **

### 效果图 ###

添加交互时要按住Ctrl键，再拖动鼠标

![20200809205414461.gif][]

## 二，多选 ##

将上面的代码更改如下即可：

import { click } from "ol/events/condition";
    
       addInteraction() {
          this.select = new Select({ condition: click, toggleCondition: click });
          this.selectedFeatures = this.select.getFeatures();
          this.map.addInteraction(this.select);
        }
        removeInteraction() {
          this.selectedFeatures.clear();
          this.map.removeInteraction(this.select);
        },

所以代码如下所示：

<template>
      <div id="map">
        <el-button @click="addLayer()">添加图层</el-button>
        <el-button @click="removeLayer()">移除图层</el-button>
        <el-button @click="addInteraction()">添加交互</el-button>
        <el-button @click="removeInteraction()">移除交互</el-button>
      </div>
    </template>
    <script>
    import "ol/ol.css";
    import Map from "ol/Map";
    import View from "ol/View";
    import TileLayer from "ol/layer/Tile";
    import VectorLayer from "ol/layer/Vector.js";
    import { OSM, Vector as VectorSource } from "ol/source";
    import { defaults as defaultControls } from "ol/control";
    import ZoomSlider from "ol/control/ZoomSlider";
    import GeoJSON from "ol/format/GeoJSON";
    import Select from "ol/interaction/Select";
    
    import { click } from "ol/events/condition";
    
    export default {
      name: "",
      data() {
        return {
          map: null,
          select: {},
          dragBox: {},
          vectorSource: {},
          vectorLayer: {},
    
          selectedFeatures: [],
        };
      },
      mounted() {
        this.initMap();
      },
      methods: {
        addLayer() {
          this.vectorLayer = new VectorLayer({
            source: this.vectorSource,
            zIndex: 2,
          });
    
          this.map.addLayer(this.vectorLayer);
        },
        removeLayer() {
          this.map.removeLayer(this.vectorLayer);
        },
        addInteraction() {
          this.select = new Select({ condition: click, toggleCondition: click });
          this.selectedFeatures = this.select.getFeatures();
          this.map.addInteraction(this.select);
        },
        removeInteraction() {
          this.selectedFeatures.clear();
          this.map.removeInteraction(this.select);
        },
    
        // 初始化地图
        initMap() {
          let view = new View({
            projection: "EPSG:4326",
            center: [115, 39],
            zoom: 4,
          });
          let layer = new TileLayer({
            source: new OSM(),
            visible: true,
            zIndex: 1,
            name: "OSM",
          });
          let vectorSource = new VectorSource({
            url: "sichuan.json",
            format: new GeoJSON(),
          });
    
          this.vectorSource = vectorSource;
    
          this.map = new Map({
            layers: [layer],
            target: "map",
            view: view,
            controls: defaultControls().extend([new ZoomSlider()]),
          });
        },
      },
    };
    </script>
    <style scoped>
    #map {
      height: 100vh;
      width: 100vw;
    }
    </style>

效果图：

![20200809213657988.gif][]

参考：

[https://openlayers.org/en/latest/examples/box-selection.html][https_openlayers.org_en_latest_examples_box-selection.html]

[https://www.jianshu.com/p/6310beeaf016][https_www.jianshu.com_p_6310beeaf016]

[20200809205414461.gif]: /images/20210725/4bb06af0c0124b6087a518bd59b8e2ad.png
[20200809213657988.gif]: /images/20210725/8a3261dec9ed4a368ad238fb3cff8c94.png
[https_openlayers.org_en_latest_examples_box-selection.html]: https://openlayers.org/en/latest/examples/box-selection.html
[https_www.jianshu.com_p_6310beeaf016]: https://www.jianshu.com/p/6310beeaf016