當(dāng)前位置：
首頁 >
Openlayers之加载Stamen地图
發(fā)布時間：2023/12/14
48
豆豆
生活随笔
收集整理的這篇文章主要介紹了
Openlayers之加载Stamen地图
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
1、Stamen地圖瓦片構(gòu)成
我們使用瀏覽器打開Stamen地圖，按下F12查看網(wǎng)絡(luò)資源，可以發(fā)現(xiàn)其瓦片URL非常直觀明了，與OpenStreetMap的地圖瓦片URL差不多，最終可以得到其通用URL：http://{a-d}.tile.stamen.com/toner/{z}/{x}/{y}.png，下面我們就來使用Openlayers加載Stamen地圖；
2、代碼實現(xiàn)
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title></title><script src="../lib/ol/ol.js"></script><link href="../css/ol.css" rel="stylesheet" /><script type="text/javascript">window.onload = function () {var stamenMapLayer = new ol.layer.Tile({source: new ol.source.XYZ({url: 'http://{a-d}.tile.stamen.com/toner/{z}/{x}/{y}.png'})});var map = new ol.Map({layers: [stamenMapLayer],view: new ol.View({center: [106.51, 29.55],projection: 'EPSG:4326',zoom: 10}),target: 'map'});};</script> </head> <body><div id="map"></div> </body> </html> 3、結(jié)果展示
總結(jié)
以上是生活随笔為你收集整理的Openlayers之加载Stamen地图的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 基于Java的项目人力资源管理系统【附：
- 下一篇： 关联矩阵