OpenLayers 图形交互编辑

最新推荐文章于 2024-10-27 00:00:00 发布
最新推荐文章于 2024-10-27 00:00:00 发布
阅读量123 收藏
点赞数
文章标签： 交互
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u011585682/article/details/134660684
版权

<!DOCTYPE html>

<html lang="en">

  <head>

    <meta charset="UTF-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>OpenLayers 图形交互编辑</title>

    <link rel="stylesheet" href="./include/ol.css" />

    <script src="./include/ol.js"></script>

  </head>

  <body>

    <div id="map"></div>

    <script>

      var pointFeature = new ol.Feature({

        geometry: new ol.geom.Point([114.1947, 30.5255]),

        name: "Point Feature",

      });

      var lineFeature = new ol.Feature({

        geometry: new ol.geom.LineString([

          [114.2218, 30.5695],

          [114.2829, 30.4912],

        ]),

        name: "Line Feature",

      });

      var polygonFeature = new ol.Feature({

        geometry: new ol.geom.Polygon([

          [

            [114.2757, 30.5822],

            [114.3526, 30.5879],

            [114.3608, 30.5367],

            [114.3234, 30.5187],

            [114.2826, 30.553],

          ],

        ]),

        name: "Polygon Feature",

      });

      var source = new ol.source.Vector({

        features: [pointFeature, lineFeature, polygonFeature],

      });

      var vectorLayer = new ol.layer.Vector({

        source: source,

        style: new ol.style.Style({

          fill: new ol.style.Fill({

            color: "rgba(255, 255, 255, 0.2)",

          }),

          stroke: new ol.style.Stroke({ color: "#f00", width: 2 }),

          image: new ol.style.Circle({

            radius: 7,

            fill: new ol.style.Fill({

              color: "#f00",

            }),

          }),

        }),

      });

      var map = new ol.Map({

        layers: [

          new ol.layer.Tile({

            title: "天地图矢量地图",

            source: new ol.source.XYZ({

              url: "http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=您的天地图密钥",

              wrapX: false,

            }),

          }),

          new ol.layer.Tile({

            title: "天地图矢量地图",

            source: new ol.source.XYZ({

              url: "http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=您的天地图密钥",

              wrapX: false,

            }),

          }),

        ],

        target: "map",

        view: new ol.View({

          center: [114.2905, 30.5607],

          projection: "EPSG:4326",

          minZoom: 2,

          zoom: 12,

        }),

      });

      map.addLayer(vectorLayer);

      // 图形编辑

      var Modify = {

        init: function () {

          this.select = new ol.interaction.Select();

          map.addInteraction(this.select);

          this.modify = new ol.interaction.Modify({

            features: this.select.getFeatures(),

          });

          map.addInteraction(this.modify);

          this.setEvents();

        },

        setEvents: function () {

          var selectedFeatures = this.select.getFeatures();

          this.select.on("change:active", function () {

            selectedFeatures.forEach(selectedFeatures.remove, selectedFeatures);

          });

        },

        setActive: function (active) {

          this.select.setActive(active);

          this.modify.setActive(active);

        },

      };

      Modify.init();

      Modify.setActive(true);

    </script>

  </body>

</html>

LDM-Star
关注
使用openlayers实现在瓦片图层上做图像编辑
ThinkLess404的专栏
03-16 486
对区域边界添加边界线来重点显示区域。要实现此功能，需要用到openlayers中Layer类的 preCompose 和 postCompose，这样我们可以获取到context用来操作画布。
210：vue+openlayers 编辑矢量图形（放缩、平移、变形、旋转）
大剑师兰特的GIS世界
03-07 898
第210个本示例的目的是介绍演示如何在vue+openlayers中编辑图形，这里可以缩放，变形、旋转、平移等。启动编辑时候，可以编辑，停止编辑，去掉相应的操作。
openlayers3 -在图片图层（自己的图片）上select、modify和draw(选中、绘制和编辑要素）
axuan_1217的博客
11-15 900
openlayers3 -在图片图层（自己的图片）上select、modify和draw(选中、绘制和编辑要素）前言一、如何导入图片图层二、全部代码1.下载2.输出结果总结 前言 使用openlays，首先导入自己的图片，在使用modify和draw进行标记 一、如何导入图片图层 这部分网上有很多实例，可以查询 二、全部代码 1.下载 首先你可以先下载openlayers的相关包（也有其他方法可以导入） 官网链接: https://openlayers.org/ 下载链接:https://openlay
OpenLayers Editor 使用教程
gitblog_00345的博客
08-30 423
OpenLayers Editor 使用教程 openlayers-editorOpenLayers Editor项目地址:https://gitcode.com/gh_mirrors/op/openlayers-editor 1、项目介绍 OpenLayers Editor (OLE) 是一个基于 OpenLayers 的扩展编辑工具，提供了一系列用于空间数据编辑的控件。OLE 支持几何对齐的...
Openlayers的交互功能（六）——编辑图斑
m0_46410110的博客
09-28 779
本文对图斑的编辑进行了简单的介绍，后续将继续更新Feature的平移、框选平移等操作。如有错误，请批评指正！欢迎关注星林社区文章将同步更新在星林社区中！
OpenLayers - 加载静态图片（十二）
小小的前端
04-26 3926
简介 本文讲解，如何使用OpenLayers在载静态图片上添加标记，预览图片。主要使用ol.source.ImageStatic用于显示单个静态图像的图层源。使用OpenLayers的好处有，地图的放大、缩小等view视图功能都可以使用，根据地理坐标绘制标注也能很好的使用，对于演示而言，无疑加快了开发效率。 开始使用 初始化地图 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /
Openlayers高级交互（9/20）：编辑图形（放缩、平移、变形、旋转），停止编辑
最新发布
大剑师兰特的GIS世界
10-27 199
本示例演示如何在vue+openlayers中编辑图形，这里可以缩放，变形、旋转、平移等。启动编辑时候，可以编辑，停止编辑，去掉相应的操作。
Openlayers 教程 04 - 图形要素对象 Feature 的移动和编辑
linzi19900517的博客
06-05 4792
Openlayers 开发中经常会遇到需要操作图形要素 Feature，本示例介绍单体要素 Feature 和 矢量图层所有要素的编辑和平移操作。
Openlayers实现图形绘制
10-14
在OpenLayers中实现图形绘制是一项常见的任务，尤其对于地理信息系统（GIS）开发人员来说，它提供了丰富的功能来绘制和编辑地图上的几何形状。OpenLayers是一个强大的JavaScript库，用于在Web浏览器中显示地图，并且...
Openlayers图形绘制详解及实战代码示例
Openlayers是一个强大的JavaScript库，专用于处理地图和地理信息。本篇文章详细介绍如何使用Openlayers实现图形绘制，旨在帮助...通过阅读和实践这些代码示例，你将能够掌握Openlayers图形绘制的核心技术和应用技巧。
20个 openlayers 高级交互应用（包含示例效果图和源代码）
大剑师兰特的GIS世界
10-15 903
本专栏列出Openlayers的高级应用20个示例，对有一定基础的Openlayers开发者帮助非常大。 除了本高级应用外，作者还有提供Openlayers另两个专栏供学习。https://dajianshi.blog.csdn.net/article/details/132230735https://blog.csdn.net/cuclife/article/details/127420739https://blog.csdn.net/cuclife/article/details/126779219ht
openlayers-editor:OpenLayers编辑器
05-24
Openlayers编辑器 OpenLayers编辑器（OLE）基于并提供了一组用于扩展空间数据编辑的控件。 欢迎捐款！ 随时添加更多控件并扩展当前功能。 此外，构建过程目前非常基本，可以进行优化。 翻译也很好。 特征 几何对齐的CAD工具 绘制线，点和面要素 移动和旋转几何 修改几何 删除几何 使用拓扑操作：缓冲区，并集，交集，差值 用于激活和停用控件的工具栏 演示版 有关演示，请访问 。 依存关系 节点和npm 入门 克隆此存储库 安装： npm install 构建： npm run build 运行： npm start 打开浏览器并访问 用法 var editor = new ole . Editor ( map ) ; var cad = new ole . control . CAD ( { source : editLayer . getSource ( )
openlayers对矢量图（多边形） 的增删改查
07-24
openlayers对矢量图（多边形） 的增删改查，三角形、矩形、五边形，你想几边就几边；添加、删除矢量图，修改矢量图，旋转、平移、拉伸
vue+openlayers中实现图片展示与图片的拖拽和放大缩小（一）
浩星
11-26 5791
前言： openlayers中渲染图片是有多种方法的，Icon ，Image 等等都可以实现将图片放到地图上面，但是操作图片的话，方法比较少了，这里是配合 ol-ext 来实现的。 相关资料: 1、ol-ext官方地址：入口 2、ol-ext 对应的资料地址：入口 3、ol-ext 源码gitee地址：入口 4、openlayers 最新官网：入口 5、openlayers 官网api：入口 6、实际坐标转换视图坐标（getPixelFromCoordinate）：入口 ...
OpenLayers Editor 项目教程
gitblog_00309的博客
08-30 439
OpenLayers Editor 项目教程 openlayers-editorOpenLayers Editor项目地址:https://gitcode.com/gh_mirrors/op/openlayers-editor 1. 项目的目录结构及介绍 OpenLayers Editor (OLE) 是一个基于 OpenLayers 的扩展编辑工具，提供了丰富的空间数据编辑功能。以下是项目的目...
openlayers 入门教程（十四）：第三方插件
大剑师兰特的GIS世界
05-06 2338
Openlayers第三方插件的开发和维护状态经常更新，直接提供每个插件的详细网址和介绍可能会过时。不过，我可以引导你如何找到这些信息，并提供一些已知的、有影响力的第三方插件的概览及一般获取方式。
openlayers3-interaction之select、modify和draw(选中、绘制和编辑要素)
qq_41156424的博客
07-10 2889
交互效果可以单独去设置样式. 1.select select可以用来选择并获取要素的属性,可以用来实现一些点击交互效果 this.select = new ol.interaction.Select({ multi: false //单选 }); this.select.setActive(true); this._map.addInteraction(this.select); //select交互开启之后选择就会触发,选中和点击空白处都会触发该方法 this.select.on("s
【OpenLayers】Select Interaction 手动添加选择的要素
a571574085的博客
07-26 1536
追踪选中要素时的调用堆栈可知 ./node_modules/_ol@6.3.1@ol/interaction/Select.js.Select.applySelectedStyle_ @ Select.js:353 ./node_modules/_ol@6.3.1@ol/interaction/Select.js.Select.addFeature_ @ Select.js:329 ./node_modules/_ol@6.3.1@ol/events/Target...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值