前言
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之家小專欄
文章尾部提供源代碼下載，對本專欄感興趣的話，可以關注一波