ArcGIS API for JavaScript3.x 學習筆記[4] 加載底圖（三）【Open Street Map開放街道地圖】
阿新 • • 發佈：2017-09-13
asc 裏的 指定 訪問 utf-8 gis sca utf 同方
Open Street Map
OpenStreetMap（簡稱OSM，中文是開放街道地圖）是一個網上地圖協作計劃，目標是創造一個內容自由且能讓所有人編輯的世界地圖。
OSM是一款由網絡大眾共同打造的免費開源、可編輯的地圖服務。OpenStreetMap它是利用公眾集體的力量和無償的貢獻來改善地圖相關的地理數據。OSM是非營利性的，它將數據回饋給社區重新用於其它的產品與服務。而其他地圖則是將大多數的地圖數據出售給第三方。
OSM的地圖由用戶根據手提GPS裝置、航空攝影照片、其他自由內容甚至單靠地方智慧繪制。網站裏的地圖圖像及向量數據皆以共享創意姓名標示-相同方式分享2.0授權。 通過esri/layers/OpenStreetMapLayer類，可以將開放街道圖作為基礎底圖。<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>訪問開放街道圖</title> <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css"> <style> html, body, #mapDiv { padding: 0; margin: 0; height: 100%; } /*設置圖為灰度圖*/ #mapDiv_osmLayer img { filter: url(filters.svg#grayscale) !important; /* Firefox 3.5+ */ filter: gray !important; /* IE5+ */ -webkit-filter: grayscale(1) !important; /* Webkit Nightlies & Chrome Canary */ } </style> <script src="http://js.arcgis.com/3.9/"></script> <script> require(["esri/map", "esri/layers/OpenStreetMapLayer", "dojo/domReady!"], function (Map, OpenStreetMapLayer) { // 以下是創建地圖與加入底圖的代碼 var map = new Map("mapDiv"); var osm = new OpenStreetMapLayer({ id: ‘osmLayer‘ }); map.addLayer(osm); }); </script> </head> <body class="tundra"> <div id="mapDiv"></div> </body> </html>
ArcGIS API for JavaScript為每個圖層創建html元素的命名規則是“地圖DIV的id”+“圖層的id”，那麽由於我們在實例化 OpenStreetMapLayer類時，指定了圖層的id為"osmLayer"，而地圖所在的元素id為“mapDiv”，那麽該圖層對應的元素id為“mapDiv_osmLayer”。
實現效果：
ArcGIS API for JavaScript3.x 學習筆記[4] 加載底圖（三）【Open Street Map開放街道地圖】