ArcGIS API for JavaScript 學習筆記（一）

終於開始了 噩夢一般的ArcGIS 我特別不習慣這種結構化的程序寫法 寫起來特別吃力 特別是把幾個功能整合到同一個頁面去的時候。

寫程序的時候，一般我喜歡先寫個Demo然后再把Demo上面的功能加到頁面里面去 結果 加進去之后老是有問題 早了半天 問題還沒找到 新的問題又出現了 好了不吐槽了 慢慢來 

有關於ArcGIS的介紹 我就不再贅述了 網上有很多。

如何初始化地圖

前端：

html,body {
 padding-top: 25px;
 margin: 0;
 height: 100%;
}

#map {
 height: 100%;
 width: 100%;
 margin: 0;
 padding: 0;
 position: relative;
}

這很重要 如果不定義html和body的高度 你的地圖只有400的行號 或者你定義了map的高度 只能是map的高度不能自適應屏幕

腳本：

 

var map, pieChart, buffGeom;
        require(["esri/map",
                "esri/basemaps",
                "dojo/domReady!"],
            function (Map, esriBasemaps, dom) {
                esriBasemaps.tdtvec = {
                    baseMapLayers: [{ url: "http://..." },
                                    { url: "http://..." }],
                    thumbnailUrl: "../Content/image/vectormap.png",
                    title: "基礎地形"
                };

                esriBasemaps.tdtimg = {
                    baseMapLayers: [{ url: "http://..." },
                                    { url: "http://..." }],
                    thumbnailUrl: "../Content/image/imagemap.png",
                    title: "影像地圖"
                };

                map = new Map("map", {
                    basemap: "tdtvec",
                    center: [120.756, 30.766],
                    zoom: 13
                });
            });

 

 

 

這里我自定義了需要疊加的底圖（天地圖）

如何添加一些小工具

前端：

就是將那些工具定位在地圖上 這里就不寫出來了 注意的一點是 map的樣式上面 需要加上position: relative; 這樣 這些工具會隨着地圖變動 位置跟着移動

腳本：

var map, msr;
        require(["esri/map",
                "esri/basemaps",
                "esri/units",

                "esri/dijit/BasemapToggle",
                "esri/dijit/HomeButton",
                "esri/dijit/Scalebar",
                "esri/dijit/Measurement",

                "dojo/dom",
                "dojo/domReady!"],
            function (Map, esriBasemaps, Units,BasemapToggle, HomeButton, Scalebar, Measurement, dom) {
                esriBasemaps.tdtvec = {
                    baseMapLayers: [{ url: "http://..." },
                                    { url: "http://..." }],
                    thumbnailUrl: "../Content/image/vectormap.png",
                    title: "基礎地形"
                };

                esriBasemaps.tdtimg = {
                    baseMapLayers: [{ url: "http://..." },
                                    { url: "http://..." }],
                    thumbnailUrl: "../Content/image/imagemap.png",
                    title: "影像地圖"
                };

                map = new Map("map", {
                    basemap: "tdtvec",
                    center: [120.756, 30.766],
                    logo: false,
                    zoom: 13
                });

                //底圖切換
                var toggle = new BasemapToggle({
                    map: window.map,
                    basemap: "tdtimg"
                }, "BasemapToggle");
                toggle.startup();

                //比例尺
                var scalebar = new Scalebar({
                    map: window.map,
                    scalebarUnit: "metric"
                });

                //HOME按鈕
                var home = new HomeButton({
                    map: window.map
                }, "HomeButton");
                home.startup();

                //測量工具
                if (!msr) {
                    msr = new Measurement({
                        map: window.map,
                        defaultAreaUnit: Units.SQUARE_KILOMETERS,
                        defaultLengthUnit: Units.KILOMETERS
                    }, dom.byId("measurementDiv"));
                    msr.startup();

                    msr.on("measure-end", function (evt) {
                        this.setTool(evt.toolName, false);
                    });
                }
            });

 

 

下面是實際樣式：

轉載請注明地址：http://www.cnblogs.com/CoffeeEddy/p/5643949.html