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>

更多的詳情見：GIS之家小專欄

文章尾部提供源代碼下載，對本專欄感興趣的話，能夠關注一波