openlayers4 入门开发系列之地图标绘篇(附源码下载)
前言
openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子,这个也是学习 openlayers4 的好素材。
openlayers4 入门开发系列的地图服务基于 Geoserver 发布的,关于 Geoserver 方面操作的博客,可以参考以下几篇文章:
内容概览
1.基于 openlayers4 实现地图标绘
2.源代码 demo 下载
本篇的重点内容是利用 openlayers4 实现地图标绘功能,效果图如下:
实现思路
- 标绘界面设计以及标绘面板控制
<!-- 标绘面板 -->
<div style="position:absolute;right:180px;top:80px;display:none;" id="map_toolbar_plot">
<ul class="map_toolbar_list_more map_toolbar_list_more-float clearfix">
<li plottype="freehandline">自由线<span class="map_toolbar_list_more_icon map_toolbar_list_more_icon-toolbar28"></span></li>
<li plottype="polyline">折线<span class="map_toolbar_list_more_icon map_toolbar_list_more_icon-toolbar29"></span></li>
<li plottype="arc">弧线<span class="map_toolbar_list_more_icon map_toolbar_list_more_icon-toolbar30"></span></li>
<li plottype="curve">曲线<span class="map_toolbar_list_more_icon map_toolbar_list_more_icon-toolbar31"></span></li>
<li plottype="freehandpolygon">手绘<span class="map_toolbar_list_more_icon map_toolbar_list_more_icon-toolbar32"></span></li>
<li plottype="polygon">多边形<span class="map_toolbar_list_more_icon map_toolbar_list_more_icon-toolbar33"></span></li>
<li plottype="rectangle">矩形<span class="map_toolbar_list_more_icon map_toolbar_list_more_icon-toolbar34"></span></li>
<li plottype="circle">圆形<span class="map_toolbar_list_more_icon map_toolbar_list_more_icon-toolbar35"></span></li>
<li plottype="assaultdirection">直角<span class="map_toolbar_list_more_icon map_toolbar_list_more_icon-toolbar36"></span></li>
<li plottype="squadcombat">简单<span class="map_toolbar_list_more_icon map_toolbar_list_more_icon-toolbar37"></span></li>
<li plottype="tailedsquadcombat">燕尾<span class="map_toolbar_list_more_icon map_toolbar_list_more_icon-toolbar38"></span></li>
<li plottype="gatheringplace">集结地<span class="map_toolbar_list_more_icon map_toolbar_list_more_icon-toolbar39"></span></li>
</ul>
</div>
更多的详情见:GIS之家小专栏
文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波
openlayers4 入门开发系列之地图标绘篇(附源码下载)的更多相关文章
- openlayers4 入门开发系列结合 echarts4 实现散点图(附源码下载)
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- leaflet-webpack 入门开发系列三地图分屏对比(附源码下载)
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...
- cesium 入门开发系列矢量瓦片加载展示(附源码下载)
前言 cesium 入门开发系列环境知识点了解:cesium api文档介绍,详细介绍 cesium 每个类的函数以及属性等等cesium 在线例子 内容概览 cesium 实现矢量瓦片加载效果 源代 ...
- arcgis api 3.x for js 入门开发系列十三地图最短路径分析(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api 3.x for js 入门开发系列十叠加 SHP 图层(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- openlayers4 入门开发系列之地图模态层篇(附源码下载)
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- openlayers4 入门开发系列之地图属性查询篇(附源码下载)
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- openlayers4 入门开发系列之地图空间查询篇(附源码下载)
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- leaflet-webpack 入门开发系列四图层控件样式优化篇(附源码下载)
前言 leaflet-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载地址 w ...
随机推荐
- msql索引
从网上找了两种解决方案: 最近要给一个表加一个联合唯一索引,但是表中的两个联合健有重复值,导致无法创建: 解决方案一:ignore(会删除重复的记录(重复记录只保留一条,其他的删除),然后建立唯一索引 ...
- 高质量的内容是SEO的关键
内容是最有效的SEO策略,但也是最难执行的 正确的目录对SEO(搜索引擎优化:search engine optimization)关乎重大.根据Ascend2在2014年4月对全球营销专业人士做的调 ...
- 实现pc端信纸留言板
效果如图: 我好像在哪里见过这样的形式,但却从来没有想过怎么实现,有种莫名的兴奋感.怎么控制什么时候换行,怎么控制中间的线条,这些视乎都是CSS无法实现的,我陷入了死局.寻找JS的做法,JS的挺复杂的 ...
- SSM-SpringMVC-11:SpringMVC中ParameterMethodNameResolver参数方法名称解析器
------------吾亦无他,唯手熟尔,谦卑若愚,好学若饥------------- 或许曾经的我们也见过一种方式http://localhost:8080/项目名/后台servlet?actio ...
- SSM-MyBatis-01:IDEA的安装,永久注册和简单的MyBatis用例
一,IDEA的安装和永久注册 1.安装: 那到安装包,下一步,选路径,上面可以选操作系统64/32位,下面是程序的默认打开方式,可以不必勾选,也可以全选 路径一定不包含中文,重点 2.永久注册: 将此 ...
- composer安装以及更新问题,配置中国镜像源。
配置国内镜像源 中国镜像源 https://pkg.phpcomposer.com/ composer 中文官网地址 http://www.phpcomposer.com/ 下载 Composer 安 ...
- github 用git bash上传项目 最后提示 Everything up-to-date 但没传上去
今天为了把本地的项目远程到githup远程仓库,把好久不用的githup命令重新用了起来,不用怀疑,很正常的出错了. 为了长点记性,总结错误与解决办法如下: 1.我犯得第一个简单错误,是忘了git c ...
- C. Liebig's Barrels
You have m = n·k wooden staves. The i-th stave has length ai. You have to assemble nbarrels consisti ...
- [UOJ#207. 共价大爷游长沙]——LCT&随机化
题目大意: 传送门 给一颗动态树,给出一些路径并动态修改,每次询问一条边是否被所有路径覆盖. 题解: 先%一发myy. 开始感觉不是很可做的样子,发现子树信息无论维护什么都不太对…… 然后打开题目标签 ...
- Python数据结构应用3——链表
linked list(链表) 建立 Node 链表的基本组成就是一个个Node,每个Node都需要包括两部分内容,一部分是自身的data,另一部分是下一个Node的reference. class ...