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 1424
OpenLayers实现对地图上的任意要素进行选择和拖拽，可以选择并拖动要素点、圆形、线段、多边形、图标等等任意要素图形。
openlayers轨迹移动
12-07
- 可以结合其他前端框架（如React或Vue.js）构建更复杂的用户界面。 综上所述，"openlayers 轨迹移动"涉及OpenLayers库的基础知识、轨迹数据处理、实时渲染和轨迹回放功能的实现。通过深入理解这些概念和技术，...
Vue+OpenLayers7入门到实战：OpenLayers选择拖拽功能，OpenLayers实现对地图上的任意要素进行选择和拖拽
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
03-29 230
本章介绍如何使用OpenLayers7在地图上进行任意要素进行选择和拖拽，可以选择并拖动要素点、圆形、线段、多边形、图标等等任意要素图形。
用 vue3 + phaser 实现经典小游戏：飞机大战
最新发布
SOHU_TECH的博客
05-22 490
本文字数：7539字预计阅读时间：30分钟01前言说起小游戏，最经典的莫过于飞机大战了，相信很多同学都玩过。今天我们也来试试开发个有趣的小游戏吧！我们将从零开始，看看怎样一步步实现一个H5版的飞机大战！首先我们定好目标，要做一个怎样的飞机大战，以及去哪整游戏素材？刚好微信小程序官方提供了一个飞机大战小游戏的模板，打开【微信开发者工具】，选择【新建项目】-【小游戏】，选择飞机大战的模板，创建后就是一...
openlayers：实现图标拖动获取坐标（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
02-06 76
openlayers：实现图标拖动获取坐标（附完整源码）
openlayers__移动事件，单击事件
七月❤的博客
11-19 1659
移入移出点的样式修改 data(){ return{ changeFeature:null, map:null } }, initMap(){ const map = new Map({ target: 'mapDiv', view: new View({ center: [, ], zoom: 19, // rotation: 100, projection: '',.
fabric.js 实现元素拖拽、引入图片、标注交互
weixin_41712594的博客
12-20 2110
特别鸣谢：拿只键盘出来绣花的德育处主任，他的系列文章给了我很大的帮助。该说不说，站在前人的肩膀上就是得劲。德育处主任 - 知乎拿只键盘出来绣花 回答数 7，获得 143 次赞同fabric.js 是一个用于创建可交互式的 HTML5 canvas 应用程序的开源 JavaScript 库，它提供了一套简单、易用的 API，可以快速地实现各种图形操作和动画效果。使用 fabric.js，你可以轻松地创建文本、图像、形状、路径等多种元素，并对它们进行缩放、旋转、位移、剪切、合并等操作。
Phaser中文说明文档
新博客地址：blog.songchunmin.com
04-09 7140
Phaser 是一款专门用于桌面及移动 HTML5 2D 游戏开发的开源免费框架，提供 JavaScript和 TypeScript 双重支持，内置游戏对象的物理属性，采用 Pixi.js 引擎以加快 Canvas 和WebGL 渲染，基于浏览器支持可自由切换。
Phaser笔记-Hello World!
IT1995的博客
04-03 2175
【代码】Phaser笔记-Hello World!
OpenLayers - WebGIS 的 JS 开发包
05-19
JIRA通常用于软件开发项目管理，而OpenLayers与JIRA的结合可能意味着开发者可以将地图组件嵌入到JIRA的看板或报告中，以直观地展示地理位置相关的任务或问题。 总之，OpenLayers 是WebGIS开发的重要工具，它提供了...
openlayer相关知识的总结--持续更新.zip
04-03
将OpenLayers与Vue.js结合，可以构建出功能强大的地图应用。 OpenLayers的基础知识主要包括以下几个方面： 1. **地图初始化**：创建地图实例是使用OpenLayers的第一步，这涉及到设置地图的基本属性，如视图、投影...
使用openlayers展示对象的移动轨迹
05-19
使用openlayers展示对象的移动轨迹
openlayers编辑地图图层并保存到geoserver
05-09
这个程序示例展示了如何结合OpenLayers和GeoServer实现地图图层的编辑功能，这在GIS（地理信息系统）开发中是非常常见的需求。GeoServer是一个开源的GIS服务器，能够发布地图数据并提供WFS（Web Feature Service）等...
OpenLayers优秀的开源WEBGIS
03-16
随着技能的提升，可以尝试使用OpenLayers与其他GIS库（如Leaflet、Mapbox GL JS）进行比较，或者结合现代前端框架（如React、Vue）进行集成开发。 6. **最佳实践**：在实际项目中，合理使用OpenLayers的缓存机制、...
并发编程系列之Phaser用法简介
Nicky's blog
11-29 1471
对Phaser阶段协同器的理解，Phaser适用于多个线程协作的任务，分为多个阶段，每个阶段都可以有任意个参与者，线程可以随时注册并参与某个阶段；当一个阶段中所有任务都成功完成后，Phaser的onAdvance()被调用，然后Phaser释放等待线程，自动进入下个阶段。如此循环，直到Phaser不再包含任何参与者。
openlayers动态添加自定义div图层 具有筛选功能 和浮窗
weixin_43863505的博客
08-07 9893
openlayers动态加自定义div图层 并且具有筛选功能 和浮窗效果,代码拿过去就可以用 联系方式:45664741@qq.com 效果图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="vi
【前端小记】--OpenLayers--2.地图进行移动并放大视野动画后定位到一个点
am_xiao_hui的博客
09-14 1518
在地图的图层中，有些需要和用户进行交互，比如现在有个需求：列表中是点位名称，点击列表的某一行后在地图上定位到所点击到点位，这个过程需要有一个缩放移动视野的动画。
openlayer拖动图标消失以及绘线穿越地图问题
qq_35332639的博客
04-25 832
最近用openlayer开发地图网站遇到了一个问题,我绘制的linestring线条，在穿越LONGITUDE：180 到-179的时候，会穿越地图一圈。 当我把LONGITUDE设为181而非-179时，则不会穿越地图一圈，但在放大或拖拽地图时，线条会消失。 放大消失 努力了好久，最终找到解决方法。 当绘制的特性需要穿过180 到 -180时 VectorSource 的 warpx属性应设为:False. new VectorLayer({ source: new VectorSource
openlayers：实现拖放图像矢量 (附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
01-28 50
openlayers：实现拖放图像矢量 (附完整源码）
请写一个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、付费专栏及课程。

余额充值