openlayers4 入门开发系列之地图标绘篇(附源码下载)
2023-09-11 14:19:51 时间
前言
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之家小专栏
文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波
相关文章
- cesium1.65api版本贴地贴模型标绘工具效果(附源码下载)
- leaflet-webpack 入门开发系列六矢量瓦片(附源码下载)
- Cesium专栏-填挖方分析(附源码下载)
- arcgis api 4.x for js 集成 Echarts4 实现模拟迁徙图效果(附源码下载)
- cesium 入门开发系列矢量瓦片加载展示(附源码下载)
- arcgis api 3.x for js 地图加载多个气泡窗口展示(附源码下载)
- arcgis api 4.x for js 结合 react 入门开发系列react全家桶实现加载天地图(附源码下载)
- arcgis api 4.x for js 结合 react 入门开发系列初探篇(附源码下载)
- (0.2.2)如何下载mysql数据库(二进制、RPM、源码、YUM源)
- 秋式开源团队-Web1组-论坛-第一阶段源码发布并提供下载