最近忙着整地图,都忘记了总结来沉淀自己,自我检讨一下。

总结一下最近使用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。的更多相关文章

  1. Asp.net中存储过程拖拽至dbml文件中,提示无法获得返回值

    Asp.net中存储过程拖拽至dbml文件中,提示无法获得返回值,去属性表中设置这时候会提示你去属性表中更改返回类型. 其实存储过程返回的也是一张表,只不过有时候存储过程有点复杂或者写法不规范的话不能 ...

  2. HTML5中的对象的拖拽

    拖拽: draggable="true"页面上就能实现拖拽事件: ondragstart 拖拽开始事件 ondrag 拖拽中 ondragend 拖拽结束事件 投放区事件: ond ...

  3. Unity输出PC端(Windows) 拖拽文件到app中

    需求:给策划们写一个PC端(Window)的Excel导表工具.本来用OpenFile打开FileExplorerDialog后让他们自己选择想要添加的Excel文件就行了,结果有个需求是希望能拖拽E ...

  4. 移动端的拖拽排序在react中实现 了解一下

    最近做一个拖拽排序的功能找了好几个有一个步骤简单,结合redux最好不过了,话不多说上代码 第一步: npm install react-draggable-tags --save 第二步 sort. ...

  5. QQ中未读气泡拖拽消失的实现(参照一位年轻牛B的博主的思路自己实现了一下)

    原文链接:http://kittenyang.com/drawablebubble/,博主年轻却很有思想.相仿的年纪,很佩服他! 首先分析拖拽时的图,大圆.不规则的图(实际上时有规律的不然也画不出来, ...

  6. winform中文本框添加拖拽功能

    对一个文本框添加拖拽功能: private void txtFolder_DragEnter(object sender, DragEventArgs e) { if (e.Data.GetDataP ...

  7. Android中的ScrollView实现 拖拽反弹效果

    public class BounceScrollView extends ScrollView { private View inner;// 孩子View private float y;// 点 ...

  8. (原创)[C#] 一步一步自定义拖拽(Drag&Drop)时的鼠标效果:(一)基本原理及基本实现

    一.前言 拖拽(Drag&Drop),属于是极其常用的基础功能. 无论是在系统上.应用上.还是在网页上,拖拽随处可见.同时拖拽时的鼠标效果也很漂亮,像这样: 这样: 还有这样: 等等等等. 这 ...

  9. WPF中元素拖拽的两个实例

    今天结合之前做过的一些拖拽的例子来对这个方面进行一些总结,这里主要用两个例子来说明在WPF中如何使用拖拽进行操作,元素拖拽是一个常见的操作,第一个拖拽的例子是将ListBox中的子元素拖拽到ListV ...

随机推荐

  1. @codeforces - 1186F@ Vus the Cossack and a Graph

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 给定一个 n 点 m 边的图(n, m<=10^6),记第 ...

  2. ITA 15.5 Optimal binary search trees

    p400 页最后一段 When j >= i , we need to select a root kr from among ki ... kj and then make an optima ...

  3. 【原生JS】评论编辑器 文本操作

    效果图: HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...

  4. 9 个必须知道的实用 PHP 函数和功能 [转]

    9 个必须知道的实用 PHP 函数和功能 [转] 即使使用 PHP 多年,也会偶然发现一些未曾了解的函数和功能.其中有些是非常有用的,但没有得到充分利用.并不是所有人都会从头到尾一页一页地阅读手册和函 ...

  5. POJ 2763"Housewife Wind"(DFS序+树状数组+LCA)

    传送门 •题意 一对夫妇居住在 xx村庄,给村庄有 $n$ 个小屋: 这 $n$ 个小屋之间有双向可达的道路,不会出现环,即所构成的图是个树: 从 $a_i$ 小屋到 $b_i$ 小屋需要花费 $w_ ...

  6. Vue 小实例 跑马灯效果

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. P1064 连续自然数和

    题目描述 对一个给定的自然数 M ,求出所有的连续的自然数段,这些连续的自然数段中的全部数之和为 M . 例子:1998+1999+2000+2001+2002=10000 ,所以从 1998 到 2 ...

  8. 2019-8-31-git-通过-SublimeMerge-处理冲突

    title author date CreateTime categories git 通过 SublimeMerge 处理冲突 lindexi 2019-08-31 16:55:59 +0800 2 ...

  9. P1028 过河问题

    题目描述 为了躲避黑暗大魔王的追杀,zifeiy与他的伙伴们共N人连夜逃出了黑暗城堡,他们走到一条河的东岸边,想要过河到西岸.而东岸边有一条小船. 船太小了,一次只能乘坐两人.每个人都有一个渡河时间T ...

  10. Dbvisualizer各种中文乱码问题解决方法

    1.SQL Commander里中文显示成‘口’ 解:进入Tools -> Tool Properties -> General -> Appearence -> Fonts, ...