OpenLayers教程十一：多源数据加载之用最简单的方式加载瓦片地图
生活随笔
收集整理的這篇文章主要介紹了
OpenLayers教程十一：多源数据加载之用最简单的方式加载瓦片地图
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
目錄
一、加載OpenStreetMap
二、加載Stamen Map
三、加載Bing Map
? ? OpenLayers封裝了一些瓦片地圖源類用于加載瓦片地圖，這些類包括：
- ol.source.OSM? ? ——? ? 用于加載OpenStreetMap
- ol.source.Stamen? ? ——? ? 用于加載Stamen Map
- ol.source.BingMaps? ? ——? ? 用于加載Bing Map
一、加載OpenStreetMap
? ? loadOSM.html:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>加載OpenStreetMap</title><link rel="stylesheet" href="../../v5.3.0/css/ol.css" /><script src="../../v5.3.0/build/ol.js"></script> </head> <body><div id="map"></div><script>var map = new ol.Map({target: 'map',layers: [new ol.layer.Tile({ // 加載OpenStreetMapsource: new ol.source.OSM()})],view: new ol.View({center: [0, 0],zoom: 3})});</script> </body> </html>? ? 打開瀏覽器控制臺，可以發現瓦片一塊一塊從服務器被取回到瀏覽器：
二、加載Stamen Map
? ? loadStamenMap.html:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>加載Stamen Map</title><link rel="stylesheet" href="../../v5.3.0/css/ol.css" /><script src="../../v5.3.0/build/ol.js"></script> </head> <body><div id="map"></div><script>var map = new ol.Map({target: 'map',layers: [new ol.layer.Tile({ // 加載Stamen Mapsource: new ol.source.Stamen({layer: 'watercolor' // 指定加載的圖層名，可以被替換為'toner'或'terrain'})})],view: new ol.View({center: [0, 0],zoom: 3})});</script> </body> </html>三、加載Bing Map
? ? loadBingMap.html:
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>加載Bing Map</title><link rel="stylesheet" href="../../v5.3.0/css/ol.css" /><script src="../../v5.3.0/build/ol.js"></script> </head> <body><div id="map"></div><script>var map = new ol.Map({target: 'map',layers: [new ol.layer.Tile({ // 加載Bing Mapsource: new ol.source.BingMaps({// Bing Map的key，可以去官網申請key: 'AkjzA7OhS4MIBjutL21bkAop7dc41HSE0CNTR5c6HJy8JKc7U9U9RveWJrylD3XJ', imagerySet: 'AerialWithLabels' // 指定加載的圖層名，還可以替換為'Aerial'或'Road'})})],view: new ol.View({center: [0, 0],zoom: 3})});</script> </body> </html>?
總結
以上是生活随笔為你收集整理的OpenLayers教程十一：多源数据加载之用最简单的方式加载瓦片地图的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： MoM(五)解矩阵方程
- 下一篇： HCJ2：页面两栏式或三栏式布局