openlayers4 官網的 api 文檔介紹地址 openlayers4 api,裏面詳細的介紹 openlayers4 各個類的介紹,還有就是在線例子:openlayers4 官網在線例子,這個也是學習 openlayers4 的好素材。html
openlayers4 入門開發系列的地圖服務基於 Geoserver 發佈的,關於 Geoserver 方面操做的博客,能夠參考如下幾篇文章:api
1.基於 openlayers4 實現地圖標繪
2.源代碼 demo 下載學習
本篇的重點內容是利用 openlayers4 實現地圖標繪功能,效果圖以下:spa
<!-- 標繪面板 --> <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之家小專欄設計
文章尾部提供源代碼下載,對本專欄感興趣的話,能夠關注一波code