11 地圖新增OSM圖層
阿新 • • 發佈：2018-10-31
此示例主要是介紹通過預設的例項化方式來新增一個OpenStreetMap圖層，如下圖所示：
具體實現方式如下：
1 實現此功能的主要元件是“esri/layers/OpenStreetMapLayer”，所以在開始時要引入相關的元件，如下：
require([
"esri/map",
"esri/layers/OpenStreetMapLayer",
"dojo/domReady!"
], function (Map, OpenStreetMapLayer){
});2 然後例項化一個空白底圖，空白底圖的意思就是我們在例項化Map時只指定初始化中心和初始化級別，其餘的底圖之類等都不指定，如下：
map = new Map("esri-map-container", {
center: [104.072331,30.66303],
zoom: 11
});3 然後例項化一個OpenStreetMap，將其新增到底圖上面，如下所示：
openStreetMapLayer = new OpenStreetMapLayer();
map.addLayer(openStreetMapLayer);4 至此呢，我們就完成了將OSM的圖層載入到了ArcGIS的底圖上面。完整的程式碼如下所示：
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" /> <title>OpenStreetMap</title> <link rel="stylesheet" href="https://js.arcgis.com/3.25/esri/css/esri.css"> <style> html, body, #esri-map-container { padding: 0px; margin: 0px; height: 100%; } </style> <script src="https://js.arcgis.com/3.25/"></script> <script> require([ "esri/map", "esri/layers/OpenStreetMapLayer", "dojo/domReady!" ], function (Map, OpenStreetMapLayer){ var map, openStreetMapLayer; map = new Map("esri-map-container", { center: [104.072331,30.66303], zoom: 11 }); openStreetMapLayer = new OpenStreetMapLayer(); map.addLayer(openStreetMapLayer); }); </script> </head> <body> <div id="esri-map-container"></div> </body> </html>