1. 程式人生 > >ArcGIS API for JavaScript3.x 學習筆記[4] 加載底圖(三)【Open Street Map開放街道地圖】

ArcGIS API for JavaScript3.x 學習筆記[4] 加載底圖(三)【Open Street Map開放街道地圖】

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 &amp; 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開放街道地圖】