openlayers中实现点的拖拽(modify),在layer中增加修改删除point。
最近忙着整地图,都忘记了总结来沉淀自己,自我检讨一下。
总结一下最近使用openlayer时学习的内容,先说下我的业务逻辑吧,在室内地图中
1,点击新增在地图上新增一个可以拖拽的点,拖拽完成后确定位置,添加其他数据,保存入库。
2,增加后展示点,点上面有序号。
3,修改时,当选中一条记录的时候需要地图上面的点高亮,这个时候可拖动位置,修改表单数据,修改后保存。
4,删除也是选中一条记录,记录删除地图点删除。

由于基于老版本开发的,本文中用到的方法都是openlayer4.6.5版本,具体问题还是必须参考api,遇到问题先看api,官网地址:https://openlayers.org/
我也是初学者,我就站在初学者的角度思考问题,来解决问题,首先是添加点。
等下我先简单说下我对openlayers的理解啊:
直接上图,可以看出纯手工打造

首先地图五大核心,map,你要声明地图就的有他,没他啥也干不了。
view,里面是坐标系(中心点),zoom(缩放)等级等等。
control控件,地图上面显示按钮
layer 图层,地图的核心,其实地图都是一层一层叠起来的可不是在一个平面上。
soure 数据源这个是重点
source也分好多种这个先不说,说下这个geometry,他的中文意思就是地物/图形的意思,一个图形是由点线面构成吧,
所以
Geometry = Features + 属性;
对于新手来说,不知道如何生成地图上的点,思路是这样的。
1,在图层(layer)上定义

2,在layer上我们来添加这个style,


这两个方法在api中都可以找到。
其实我们需要定义style,告诉他我们想要什么样的点。



你需要定义或者添加到图层上面才可以。
其实整的来看就两不,定义style,把return的style,添加到你的图层中,也可以在图层中直接定义。
实现点拖拽,需要添加modify方法。

这样定义就可以拖拽了。

这是监听拖拽完以后发生的事件,

也可以移除modify
不管怎样有啥不会的,先去api找方法。
openlayers中实现点的拖拽(modify),在layer中增加修改删除point。的更多相关文章
- Asp.net中存储过程拖拽至dbml文件中,提示无法获得返回值
Asp.net中存储过程拖拽至dbml文件中,提示无法获得返回值,去属性表中设置这时候会提示你去属性表中更改返回类型. 其实存储过程返回的也是一张表,只不过有时候存储过程有点复杂或者写法不规范的话不能 ...
- HTML5中的对象的拖拽
拖拽: draggable="true"页面上就能实现拖拽事件: ondragstart 拖拽开始事件 ondrag 拖拽中 ondragend 拖拽结束事件 投放区事件: ond ...
- Unity输出PC端(Windows) 拖拽文件到app中
需求:给策划们写一个PC端(Window)的Excel导表工具.本来用OpenFile打开FileExplorerDialog后让他们自己选择想要添加的Excel文件就行了,结果有个需求是希望能拖拽E ...
- 移动端的拖拽排序在react中实现 了解一下
最近做一个拖拽排序的功能找了好几个有一个步骤简单,结合redux最好不过了,话不多说上代码 第一步: npm install react-draggable-tags --save 第二步 sort. ...
- QQ中未读气泡拖拽消失的实现(参照一位年轻牛B的博主的思路自己实现了一下)
原文链接:http://kittenyang.com/drawablebubble/,博主年轻却很有思想.相仿的年纪,很佩服他! 首先分析拖拽时的图,大圆.不规则的图(实际上时有规律的不然也画不出来, ...
- winform中文本框添加拖拽功能
对一个文本框添加拖拽功能: private void txtFolder_DragEnter(object sender, DragEventArgs e) { if (e.Data.GetDataP ...
- Android中的ScrollView实现 拖拽反弹效果
public class BounceScrollView extends ScrollView { private View inner;// 孩子View private float y;// 点 ...
- (原创)[C#] 一步一步自定义拖拽(Drag&Drop)时的鼠标效果:(一)基本原理及基本实现
一.前言 拖拽(Drag&Drop),属于是极其常用的基础功能. 无论是在系统上.应用上.还是在网页上,拖拽随处可见.同时拖拽时的鼠标效果也很漂亮,像这样: 这样: 还有这样: 等等等等. 这 ...
- WPF中元素拖拽的两个实例
今天结合之前做过的一些拖拽的例子来对这个方面进行一些总结,这里主要用两个例子来说明在WPF中如何使用拖拽进行操作,元素拖拽是一个常见的操作,第一个拖拽的例子是将ListBox中的子元素拖拽到ListV ...
随机推荐
- util.date
package com.sxt.utils.date1; import java.util.Date; /* * util.date */ public class TestDate { public ...
- 全面解读Python Web开发框架Django,利用Django构建web应用及其部署
全面解读Python Web开发框架Django Django是一个开源的Web应用框架,由Python写成.采用MVC的软件设计模式,主要目标是使得开发复杂的.数据库驱动的网站变得简单.Django ...
- ES6学习笔记第一天
## 三.const和let **3.1 const** const用来定义常量,所谓的常量就是值一旦给定后就不变,一次定义终身不变的量 const a = 10; a = 20; 上面的a就是一个常 ...
- Native memory allocation (mmap) failed to map xxx bytes for committing reserved memory
遇到问题 在服务器上运行 nexus 出现Native memory allocation (mmap) failed to map 838860800 bytes for committing re ...
- no_expand优化案例
bond 来看一个烂语句: select a.*,b.dn from temp_allcrmuser a, phs_smc_user b where a.USERNUMBER=b.dn and ( ...
- 2018-8-10-C#-代码占用的空间
title author date CreateTime categories C# 代码占用的空间 lindexi 2018-08-10 19:16:52 +0800 2018-2-13 17:23 ...
- Xshell + SVN使用
切换目录 cd+想跳转到的目录下 文件浏览 ls ll (ll 信息全) svn更新 svn up 编辑 vi vi的命令 文件保存与退出: :q 在文件未作任何修改的情况下退出. :q! 强制退出, ...
- Roslyn 使用 Directory.Build.props 管理多个项目配置
在一些大项目需要很多独立的仓库来做,每个仓库之间都会有很多相同的配置,本文告诉大家如何通过 Directory.Build.props 管理多个项目配置 在我的 MVVM 框架需要三个不同的库,一个是 ...
- js 设置当前时间的后24小时、后一小时等相对时间
不管是设置相对当前时间有多久时间差的时间,思路:先获取当前时间的时间戳,再根据需求加减时间获得新的时间戳,然后取年月日与时分秒.实例: // 设置默认时间——先转化为毫秒数,加上 24 小时的毫秒数, ...
- jQuery 工具类函数-使用$.extend()扩展Object对象
除使用$.extend扩展工具函数外,还可以扩展原有的Object对象,在扩展对象时,两个对象将进行合并,当存在相同属性名时,后者将覆盖前者,调用格式为: $. extend (obj1,obj2,… ...