openlayers3.0疊加天地圖底圖及註記後再疊加geoserverWMS服務
阿新 • • 發佈：2018-11-07
OpenLayers + 天地圖向量地圖 + 天地圖向量註記 + Geoserver WMS服務
1：程式碼
<!DOCTYPE html > < html lang= "en" >< head > < meta charset= "UTF-8" > < meta name= "viewport" content= "width=device-width, initial-scale=1.0"
var tianditu_cva_c = new ol. layer. Tile({ title: "天地圖經緯度向量註記", source: new ol. source. XYZ({ url: 'http://t0.tianditu.com/DataServer?T=cva_c&x={x}&y={y}&l={z}' }) }); map. addLayer( tianditu_cva_c);
var geoserver_wms = new ol. layer. Tile({ source: new ol. source. TileWMS({ url: 'http://192.9.104.68:8080/geoserver/test/wms', params: { 'LAYERS' : 'test:shengjie', //此處可以是單個圖層名稱，也可以是圖層組名稱，或多個圖層名稱 'TILED' : false }, serverType: 'geoserver' //伺服器型別 }) }); map. addLayer( geoserver_wms); } < / script > </ head >
< body onload= 'onLoad()' > < div id= 'map' ></ div > </ body >
</ html >
2：效果展示
3：備註
1).基於OpenLayers前端框架，首先新增天地圖向量地圖及向量註記，然後再疊加geoserverWMS服務
2).考慮到圖層的覆蓋問題，應注意圖層的疊加順序，天地圖向量地圖-天地圖向量註記-geoserverWMS服務
3).此處天地圖瓦片及geoserverWMS服務座標系為EPSG:4326與openlayers不同，所以此處效果圖位置有偏移。