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