ArcGIS API for JavaScript 学习笔记（一）

终于开始了 噩梦一般的ArcGIS 我特别不习惯这种结构化的程序写法 写起来特别吃力 特别是把几个功能整合到同一个页面去的时候。

写程序的时候，一般我喜欢先写个Demo然后再把Demo上面的功能加到页面里面去 结果 加进去之后老是有问题 早了半天 问题还没找到 新的问题又出现了 好了不吐槽了 慢慢来

有关于ArcGIS的介绍 我就不再赘述了 网上有很多。

如何初始化地图

前端：

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

 #map {
     height: 100%;
     width: 100%;
     margin:;
     padding:;
     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