9. Openlayers 矢量元素整体拖动（结合Vue 详细教学）

原创

已于 2023-07-02 22:50:39 修改 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2023-07-02 22:47:44 首次发布

Openlayers 矢量元素整体拖动

效果截图：

请添加图片描述

1. 模板部分

<template>
  <div>
    <div ref="map" class="map"></div>
  </div>
</template>

在模板部分，我们定义了一个包含地图容器的div元素。

2. 脚本部分

<script>
  // 导入所需的OpenLayers库和组件
  import "ol/ol.css";
  import Map from "ol/Map";
  import View from "ol/View";
  import TileLayer from "ol/layer/Tile";
  import XYZ from "ol/source/XYZ";
  import VectorLayer from "ol/layer/Vector";
  import VectorSource from "ol/source/Vector";
  import Feature from "ol/Feature";
  import Point from "ol/geom/Point";
  import LineString from "ol/geom/LineString";
  import Polygon from "ol/geom/Polygon";
  import { fromLonLat } from "ol/proj";
  import { Circle, Fill, Stroke, Style } from "ol/style";
  import Translate from "ol/interaction/Translate";

  export default {
    name: "OlMap",
    mounted() {
      // 创建地图
      this.createMap();
    },
    methods: {
      createMap() {
        // 创建ArcGIS World Street Map图层
        const arcGISLayer = new TileLayer({
          source: new XYZ({
            url: "https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}"
          })
        });

        // 创建地图容器
        const map = new Map({
          target: this.$refs.map,
          layers: [arcGISLayer],
          view: new View({
            center: fromLonLat([120, 30]),
            zoom: 8
          })
        });