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

已于 2023-07-02 22:50:39 修改
阅读量1k 收藏 3
点赞数
分类专栏： OpenLayers详细教程 文章标签： vue.js 前端 javascript
于 2023-07-02 22:47:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_28613375/article/details/131506550
版权

目录

Openlayers 矢量元素整体拖动

效果截图：

1. 模板部分

2. 脚本部分

3. 样式部分

4. 总结

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
          })
        });

        // 绘制点、线、面要素
        const pointFeature = new Feature({
          geometry: new Point(fromLonLat([120, 30])),
          name: "Point"
        });
        const lineFeature = new Feature({
          geometry: new LineString([fromLonLat([119, 29]), fromLonLat([120, 31])]),
          name: "Line"
        });
        const polygonFeature = new Feature({
          geometry: new Polygon([
            [
              fromLonLat([121, 29]),
              fromLonLat([122, 29]),
              fromLonLat([122, 30]),
              fromLonLat([121, 30]),
              fromLonLat([121, 29])
            ]
          ]),
          name: "Polygon"
        });

        // 样式设置
        const styleFunction = feature => {
          const geometryType = feature.getGeometry().getType();

          const styles = {
            Point: new Style({
              image: new Circle({
                radius: 10,
                fill: new Fill({
                  color: "rgba(255, 0, 0, 0.6)"
                })
              })
            }),
            LineString: new Style({
              stroke: new Stroke({
                color: "rgba(0, 0, 255, 0.6)",
                width: 5
              })
            }),
            Polygon: new Style({
              fill: new Fill({
                color: "rgba(0, 255, 0, 0.4)"
              }),
              stroke: new Stroke({
                color: "rgba(0, 255, 0, 1)",
                width: 3
              })
            })
          };

          return styles[geometryType];
        };

        // 创建矢量图层
        const vectorLayer = new VectorLayer({
          source: new VectorSource({
            features: [pointFeature, lineFeature, polygonFeature]
          }),
          style: styleFunction
        });

        // 将矢量图层添加到地图上
        map.addLayer(vectorLayer);

        // 添加Translate互动选项以实现拖动功能
        const translate = new Translate({
          layers: [vectorLayer]
        });
        map.addInteraction(translate);
      }
    }
  };
</script>

在脚本部分，我们首先导入所需的OpenLayers库和组件。然后，在mounted生命周期钩子中调用createMap方法来创建地图。

在createMap方法中，我们首先创建了一个ArcGIS World Street Map图层，并指定了其URL。然后，我们创建了一个地图容器，并将ArcGIS图层添加到地图中。我们还设置了地图的中心点和缩放级别。

接下来，我们创建了点、线和面要素。对于点要素，我们使用Point类并将其坐标转换为地图坐标系。对于线和面要素，我们使用LineString和Polygon类，并将其坐标转换为地图坐标系。

然后，我们定义了一个样式函数styleFunction，它根据要素的几何类型返回相应的样式。对于点要素，我们使用红色圆形标记。对于线要素，我们使用蓝色线条。对于面要素，我们使用绿色填充和边界。

接下来，我们创建了一个矢量图层，并将之前创建的点、线和面要素添加到矢量图层的数据源中。我们还将样式函数应用到矢量图层中的要素上。

最后，我们创建了一个Translate交互实例，并将矢量图层作为参数传递给它。然后，我们将交互实例添加到地图上，以实现拖动功能。

3. 样式部分

<style scoped>
  .map {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
  }
</style>

在样式部分，我们使用CSS样式将地图容器的宽度和高度设置为100%以充满整个视口。

4.完整代码

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

<script>
  import "ol/ol.css";
  import Map from "ol/Map";
  import View from "ol/View";
  import TileLayer from "ol/layer/Tile";
  import OSM from "ol/source/OSM";
  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 XYZ from "ol/source/XYZ";
  import Translate from "ol/interaction/Translate";
  import Collection from "ol/Collection";

  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
          })
        });

        // 绘制点、线、面要素
        const pointFeature = new Feature({
          geometry: new Point(fromLonLat([120, 30])),
          name: "Point"
        });
        const lineFeature = new Feature({
          geometry: new LineString([fromLonLat([119, 29]), fromLonLat([120, 31])]),
          name: "Line"
        });
        const polygonFeature = new Feature({
          geometry: new Polygon([
            [
              fromLonLat([121, 29]),
              fromLonLat([122, 29]),
              fromLonLat([122, 30]),
              fromLonLat([121, 30]),
              fromLonLat([121, 29])
            ]
          ]),
          name: "Polygon"
        });

        // 样式设置
        const styleFunction = feature => {
          const geometryType = feature.getGeometry().getType();

          const styles = {
            Point: new Style({
              image: new Circle({
                radius: 10,
                fill: new Fill({
                  color: "rgba(255, 0, 0, 0.6)"
                })
              })
            }),
            LineString: new Style({
              stroke: new Stroke({
                color: "rgba(0, 0, 255, 0.6)",
                width: 5
              })
            }),
            Polygon: new Style({
              fill: new Fill({
                color: "rgba(0, 255, 0, 0.4)"
              }),
              stroke: new Stroke({
                color: "rgba(0, 255, 0, 1)",
                width: 3
              })
            })
          };

          return styles[geometryType];
        };

        // 创建矢量图层
        const vectorLayer = new VectorLayer({
          source: new VectorSource({
            features: [pointFeature, lineFeature, polygonFeature]
          }),
          style: styleFunction
        });

        // 将矢量图层添加到地图上
        map.addLayer(vectorLayer);

        // 添加Translate互动选项以实现拖动功能
        const translate = new Translate({
          layers: [vectorLayer]
        });
        map.addInteraction(translate);
      }
    }
  };
</script>

<style scoped>
  .map {
    width: 100vw;
    height: 100vh;
    margin: 0;
    padding: 0;
  }
</style>

5. 总结

通过以上代码，我们实现了使用OpenLayers创建地图，并在地图上添加点、线和面要素。我们还使用样式函数为要素设置样式，并通过Translate交互实现了整体拖动功能。这样，用户可以在地图上拖动要素。

三维giser
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
OpenLayers6入门，OpenLayers选择拖拽功能，OpenLayers实现对地图上的任意要素进行选择和拖拽
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
04-14 1460
OpenLayers实现对地图上的任意要素进行选择和拖拽，可以选择并拖动要素点、圆形、线段、多边形、图标等等任意要素图形。
Vue+OpenLayers7入门到实战：OpenLayers选择拖拽功能，OpenLayers实现对地图上的任意要素进行选择和拖拽
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
03-29 250
本章介绍如何使用OpenLayers7在地图上进行任意要素进行选择和拖拽，可以选择并拖动要素点、圆形、线段、多边形、图标等等任意要素图形。
用 vue3 + phaser 实现经典小游戏：飞机大战
最新发布
SOHU_TECH的博客
05-22 550
本文字数：7539字预计阅读时间：30分钟01前言说起小游戏，最经典的莫过于飞机大战了，相信很多同学都玩过。今天我们也来试试开发个有趣的小游戏吧！我们将从零开始，看看怎样一步步实现一个H5版的飞机大战！首先我们定好目标，要做一个怎样的飞机大战，以及去哪整游戏素材？刚好微信小程序官方提供了一个飞机大战小游戏的模板，打开【微信开发者工具】，选择【新建项目】-【小游戏】，选择飞机大战的模板，创建后就是一...
Openlayer 点的拖拽
weixin_43224584的博客
09-17 518
var select = new ol.interaction.Select({ layers: [layer], wrapX: false }); map.addInteraction(select); var modify = new ol.interaction.Modify({ features: select.getFeatures(), sou...
使用openlayers展示对象的移动轨迹
05-19
使用openlayers展示对象的移动轨迹
openlayers4实现拖动Feature效果
aodao8891的博客
05-07 762
拖动矢量图层feature，获取拖动后feature 官网拓展了interaction,增加了Drag的Interaction 代码说明 *handleDragEvent注册的这个事件里面是拖动后获取到的feature， handleDownEvent这是鼠标点击feature时的事件，可以进行对拖拽的图形进行限制* /** * De...
openlayers加载瓦片地图并手动标记坐标点
04-29
本教程将详细介绍如何使用OpenLayers加载瓦片地图以及手动在地图上标记坐标点。 一、OpenLayers 瓦片地图 瓦片地图是一种常见的地图展示方式，它将大尺寸的地图分割成多个小块（即“瓦片”），每个瓦片都是一个较...
openlayers轨迹移动
12-07
- 可以结合其他前端框架（如React或Vue.js）构建更复杂的用户界面。 综上所述，"openlayers 轨迹移动"涉及OpenLayers库的基础知识、轨迹数据处理、实时渲染和轨迹回放功能的实现。通过深入理解这些概念和技术，...
OpenLayers - WebGIS 的 JS 开发包
05-19
JIRA通常用于软件开发项目管理，而OpenLayers与JIRA的结合可能意味着开发者可以将地图组件嵌入到JIRA的看板或报告中，以直观地展示地理位置相关的任务或问题。 总之，OpenLayers 是WebGIS开发的重要工具，它提供了...
openlayers实现图标拖动获取坐标
10-14
主要为大家详细介绍了openlayers实现图标拖动获取坐标，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue-phaser：基于phaser.io的VueJs游戏引擎（正在进行中）
02-04
vue-phaser：基于phaser.io的VueJs游戏引擎（正在进行中）
基于OpenLayers实战地理信息系统教程（教学视频）
10-08
里面是教学视频，共五章，基于OpenLayers实战地理信息系统教程，基于OpenLayers实战地理信息系统教程基于OpenLayers实战地理信息系统教程基于OpenLayers实战地理信息系统教程
phavuer：具有Vue的Phaser3的包装库
02-04
帕伏尔 Phavuer是带有包装库。 它使得能够以声明式编程开发游戏。 通过示例UI进行编译。 -用Phavuer编写的简单射击游戏。 示例（这只是一个用法示例。不是完整的游戏。） ***注意*** 这仍然是在制品。 我不确定性能，但是它永远不会比普通的Phaser快。 如果使用Phavuer，则源代码应该与普通的Phaser完全不同。 因此，请记住，您无法轻松切换方式。 但是，我将继续使用它来制作游戏。 随时贡献。 使用范例 MainScene.vue： < template> < Scene xss=removed> < Text
openlayer相关知识的总结--持续更新.zip
04-03
将OpenLayers与Vue.js结合，可以构建出功能强大的地图应用。 OpenLayers的基础知识主要包括以下几个方面： 1. **地图初始化**：创建地图实例是使用OpenLayers的第一步，这涉及到设置地图的基本属性，如视图、投影...
openlayers编辑地图图层并保存到geoserver
05-09
这个程序示例展示了如何结合OpenLayers和GeoServer实现地图图层的编辑功能，这在GIS（地理信息系统）开发中是非常常见的需求。GeoServer是一个开源的GIS服务器，能够发布地图数据并提供WFS（Web Feature Service）等...
vue+openlayer实现：拖拽、旋转、缩放、拉伸、移动等功能以及对应的监听事件
浩星
11-24 3479
前言： openlayer 是有他自己的扩展插件 ol-ext，我们这里用他来实现图形的操作：拖拽、旋转、缩放、拉伸、移动等等功能，以及他的监听事件，毕竟我们作图以后是需要保存数据给后端，存到数据库的。 相关资料: 1、ol-ext官方地址：入口 2、ol-ext 对应的资料地址：入口 3、ol-ext 源码gitee地址：入口 4、openlayers 最新官网：入口 5、openlayers 官网api：入口 实现效果：旋转、拖动 图1、实现效果 图2、旋转效果 ...
openlayers中利用vector实现marker的方式
kill1047的专栏
09-04 262
项目需要一个小型的gis。openlayers，geoserver，postgres组合是比较好的选择。 openlayers的marker层好像不支持拖动操作。通过研究api发现，可以利用vector层 达到这个目的，作出标注的效果。可以定位，搜索，拖动等效果，选中的时候可以 通过修改style达到动画效果。 基本做法如下： 1：定义marker显示的样式 2：扩展vector层，利...
openLayers实战(九)：正多边形的绘制
在下魔王ii的博客
08-21 1141
最近在绘制各种图形，越来越乱，看了很多文章，启发了从最最基础的图形开始学习扩展。这是我的代码片段，老是报错，资源我该引入的都引入了，后改为在线的ol引入方式也是不行冷静下来，去看了源码：改写引入方式，成功解决，clam down，不要暴躁，不要暴躁，暴躁降智！！！
请写一个Vue3的openLayers矢量图层切换代码
05-25
以下是一个基本的Vue3组件，用于切换OpenLayers矢量图层： ```vue <template> <div class="map-layer-switcher"> <select v-model="selectedLayer" @change="switchLayer"> <option v-for="(layer, index) in layers" :key="index" :value="layer">{{ layer.name }}</option> </select> </div> </template> <script> import { ref } from 'vue'; import { VectorLayer } from 'ol/layer'; import { Vector } from 'ol/source'; export default { name: 'MapLayerSwitcher', props: { map: { type: Object, required: true, }, layers: { type: Array, required: true, }, }, setup(props) { const selectedLayer = ref(props.layers[0]); function switchLayer() { const layer = selectedLayer.value; const olLayer = new VectorLayer({ source: new Vector({ features: layer.features }), style: layer.style, }); props.map.getLayers().forEach((l) => { if (l instanceof VectorLayer) { props.map.removeLayer(l); } }); props.map.addLayer(olLayer); } return { selectedLayer, switchLayer, }; }, }; </script> <style> .map-layer-switcher select { margin: 10px; padding: 5px; border-radius: 5px; background-color: #fff; color: #333; font-size: 16px; } </style> ``` 此组件需要传递两个属性：`map` 和 `layers`。 `map` 是一个OpenLayers地图实例，`layers` 是一个包含多个矢量图层的数组。每个图层应该包含一个 `name` 和 `features` 属性，以及一个可选的 `style` 属性。 当用户选择一个图层时，`switchLayer` 函数会创建一个新的OpenLayers矢量图层，并使用选定的图层的 `features` 和 `style` 属性来初始化该图层。然后，它会删除所有旧的矢量图层，并将新图层添加到地图中。 在模板中，我们使用一个下拉菜单来展示可用的图层，并将用户选择的图层绑定到 `selectedLayer` 变量上。当用户选择一个不同的图层时，`switchLayer` 函数将自动调用。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

三维giser

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值