vue2ol

# Vue2olInteractionDragbox

ol/interaction/DragBox (opens new window)的 vue 组件

允许用户通过在地图上单击并拖动来绘制一个矢量框。

Since: v1.0.0

# 基础用法

<template>
  <div>
    <select v-model="active" style="width:200px;">
      <option value="1">激活</option>
      <option value="0">取消</option>
    </select>
  </div>
  <vue2ol-map style="height:400px;" :options="mapOptions">
    <vue2ol-view :zoom="zoom" :center="center" :options="viewOptions">
    </vue2ol-view>
    <vue2ol-layer-tile>
      <vue2ol-source-osm></vue2ol-source-osm>
    </vue2ol-layer-tile>
    <vue2ol-layer-vector :zIndex="10">
      <vue2ol-source-vector>
        <vue2ol-feature :options="options"> </vue2ol-feature>
      </vue2ol-source-vector>
    </vue2ol-layer-vector>
    <vue2ol-interaction-dragbox
      :active="active == '1'"
    ></vue2ol-interaction-dragbox>
  </vue2ol-map>
</template>

<script>
import Feature from "ol/Feature";
import Polygon from "ol/geom/Polygon";
export default {
  data() {
    return {
      zoom: 10, //级别
      center: [120, 28], //中心点
      viewOptions: {
        projection: "EPSG:4326" //坐标系
      },
      mapOptions: {
        interactions: []
      },
      active: "0",
      options: {
        geometry: new Polygon([
          [
            [120, 28],
            [121, 28],
            [121, 27],
            [120, 27],
            [120, 28]
          ]
        ]),
        name: "testFeature"
      }
    };
  },
  mounted() {}
};
</script>
Expand Copy

# 添加条件，需要安置 shift 键

<template>
  <div>
    <select v-model="active" style="width:200px;">
      <option value="1">激活</option>
      <option value="0">取消</option>
    </select>
  </div>
  <vue2ol-map style="height:400px;" :options="mapOptions">
    <vue2ol-view :zoom="zoom" :center="center" :options="viewOptions">
    </vue2ol-view>
    <vue2ol-layer-tile>
      <vue2ol-source-osm></vue2ol-source-osm>
    </vue2ol-layer-tile>
    <vue2ol-layer-vector :zIndex="10">
      <vue2ol-source-vector>
        <vue2ol-feature :options="options"> </vue2ol-feature>
      </vue2ol-source-vector>
    </vue2ol-layer-vector>
    <vue2ol-interaction-dragbox
      :active="active == '1'"
      :options="interactionOptions"
    ></vue2ol-interaction-dragbox>
  </vue2ol-map>
</template>

<script>
import Feature from "ol/Feature";
import Polygon from "ol/geom/Polygon";
export default {
  data() {
    return {
      zoom: 10, //级别
      center: [120, 28], //中心点
      viewOptions: {
        projection: "EPSG:4326" //坐标系
      },
      mapOptions: {
        interactions: []
      },
      active: "0",
      options: {
        geometry: new Polygon([
          [
            [120, 28],
            [121, 28],
            [121, 27],
            [120, 27],
            [120, 28]
          ]
        ]),
        name: "testFeature"
      },
      interactionOptions: {
        condition: e => {
          return e.originalEvent.shiftKey;
        }
      }
    };
  },
  mounted() {}
};
</script>
Expand Copy

# 绘制结束放大到指定区域

<template>
  <div>
    <select v-model="active" style="width:200px;">
      <option value="1">激活</option>
      <option value="0">取消</option>
    </select>
  </div>
  <vue2ol-map style="height:400px;" :options="mapOptions">
    <vue2ol-view :zoom="zoom" :center="center" :options="viewOptions">
    </vue2ol-view>
    <vue2ol-layer-tile>
      <vue2ol-source-osm></vue2ol-source-osm>
    </vue2ol-layer-tile>
    <vue2ol-layer-vector :zIndex="10">
      <vue2ol-source-vector>
        <vue2ol-feature :options="options"> </vue2ol-feature>
      </vue2ol-source-vector>
    </vue2ol-layer-vector>
    <vue2ol-interaction-dragbox
      :active="active == '1'"
      :options="interactionOptions"
      @boxend="handleBoxend"
    ></vue2ol-interaction-dragbox>
  </vue2ol-map>
</template>

<script>
import Feature from "ol/Feature";
import Polygon from "ol/geom/Polygon";
import { easeOut } from "ol/easing.js";
export default {
  data() {
    return {
      zoom: 10, //级别
      center: [120, 28], //中心点
      viewOptions: {
        projection: "EPSG:4326" //坐标系
      },
      mapOptions: {
        interactions: []
      },
      active: "0",
      options: {
        geometry: new Polygon([
          [
            [120, 28],
            [121, 28],
            [121, 27],
            [120, 27],
            [120, 28]
          ]
        ]),
        name: "testFeature"
      },
      interactionOptions: {
        condition: e => {
          return e.originalEvent.shiftKey;
        }
      },
      interaction: null
    };
  },
  mounted() {},
  methods: {
    handleBoxend(e) {
      let geometry = e.target.getGeometry();
      let map = e.mapBrowserEvent.target;
      const view = /** @type {!import("../View.js").default} */ (map.getView());
      view.fitInternal(geometry, {
        duration: 1000,
        easing: easeOut
      });
    }
  }
};
</script>
Expand Copy

# Props

名称 描述 类型 取值范围 默认值
properties 属性 object -
options 对应 openlayers 对象的实例化参数选项,其他没有在 props 中列举的参数，如果有传入 props 并且与默认值不同，则以 props 中的值为准，否则使用 options 中的值 object - {}
parentMap 父地图 object -
active 是否激活 boolean -

# Events

名称 属性 描述
init mapObject import('ol/interaction/DragBox').default - 地图元素 地图元素初始化完时触发
append mapObject import('ol/interaction/DragBox').default - 地图元素 地图元素初始化完时触发
ready mapObject import('ol/interaction/DragBox').default - 地图元素 地图元素初始化完时触发

← Vue2olInteractionDragpan →