android 原生开发 3d地图 下载_openlayers4 入门开发系列之地图标绘篇（附源码下载）...

前言

openlayers4 官网的 api 文档介绍地址 openlayers4 api，里面详细的介绍 openlayers4 各个类的介绍，还有就是在线例子：openlayers4 官网在线例子，这个也是学习 openlayers4 的好素材。
openlayers4 入门开发系列的地图服务基于 Geoserver 发布的，关于 Geoserver 方面操作的博客，可以参考以下几篇文章：
geoserver 安装部署步骤
geoserver 发布地图服务 WMS
geoserver 发布地图服务 WMTS
geoserver 集成以及部署 arcgis server 瓦片数据

内容概览

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> 

//标绘例 
var plotFlag = false; 
$("#bPlot").click(function () { 
 if(!plotFlag){ 
                $("#map_toolbar_plot").show(); 
                plotFlag = true; 
            }else{ 
                bmap.setCurrentMutexInteraction(null); 
 if(bmap.dataClear){ 
                    bmap.dataClear.clear(); 
                } 
                $("#map_toolbar_plot").hide(); 
                plotFlag = false;             
            }             
}); 

• 标绘初始化以及核心代码实现

//标绘 
var plottypes = ["freehandline","polyline","arc","curve","freehandpolygon","polygon", 
 "rectangle","circle","assaultdirection","squadcombat","tailedsquadcombat","gatheringplace"]; 
for(var i = 0; i < plottypes.length; i++){ 
 var selector = '#map_toolbar_plot li[plottype="' + plottypes[i] + '"]'; 
        $(selector).on('click',function(){ 
 var id = "10006";//标绘工具 
 var tool = bmap.getIndexInteraction(id); 
            bmap.setCurrentMutexInteraction(tool); 
 //标绘类型 
 var plottype = $(this).attr("plottype"); 
            tool.setDrawType(plottype); 
        }) 
}

更多的详情见：

openlayers4 入门开发系列之地图标绘篇（附源码下载） － 小专栏​xiaozhuanlan.com

文章尾部提供源代码下载，对本专栏感兴趣的话，可以关注一波

GIS之家店铺：GIS之家
GIS之家源码咨询：GIS之家webgis入门开发系列demo源代码咨询