ArcGIS API for JavaScript 学习笔记（一）

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

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

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

如何初始化地图

前端：

 1 html,body {
 2     padding-top: 25px;
 3     margin: 0;
 4     height: 100%;
 5 }
 6 
 7 #map {
 8     height: 100%;
 9     width: 100%;
10     margin: 0;
11     padding: 0;
12     position: relative;
13 }

View Code

这很重要如果不定义html和body的高度你的地图只有400的行号或者你定义了map的高度只能是map的高度不能自适应屏幕

脚本：

 1 var map, pieChart, buffGeom;
 2         require(["esri/map",
 3                 "esri/basemaps",
 4                 "dojo/domReady!"],
 5             function (Map, esriBasemaps, dom) {
 6                 esriBasemaps.tdtvec = {
 7                     baseMapLayers: [{ url: "http://..." },
 8                                     { url: "http://..." }],
 9                     thumbnailUrl: "../Content/image/vectormap.png",
10                     title: "基础地形"
11                 };
12 
13                 esriBasemaps.tdtimg = {
14                     baseMapLayers: [{ url: "http://..." },
15                                     { url: "http://..." }],
16                     thumbnailUrl: "../Content/image/imagemap.png",
17                     title: "影像地图"
18                 };
19 
20                 map = new Map("map", {
21                     basemap: "tdtvec",
22                     center: [120.756, 30.766],
23                     zoom: 13
24                 });
25             });

View Code

这里我自定义了需要叠加的底图（天地图）

如何添加一些小工具

前端：

就是将那些工具定位在地图上这里就不写出来了注意的一点是 map的样式上面需要加上position: relative; 这样这些工具会随着地图变动位置跟着移动

脚本：

 1 var map, msr;
 2         require(["esri/map",
 3                 "esri/basemaps",
 4                 "esri/units",
 5 
 6                 "esri/dijit/BasemapToggle",
 7                 "esri/dijit/HomeButton",
 8                 "esri/dijit/Scalebar",
 9                 "esri/dijit/Measurement",
10 
11                 "dojo/dom",
12                 "dojo/domReady!"],
13             function (Map, esriBasemaps, Units,BasemapToggle, HomeButton, Scalebar, Measurement, dom) {
14                 esriBasemaps.tdtvec = {
15                     baseMapLayers: [{ url: "http://..." },
16                                     { url: "http://..." }],
17                     thumbnailUrl: "../Content/image/vectormap.png",
18                     title: "基础地形"
19                 };
20 
21                 esriBasemaps.tdtimg = {
22                     baseMapLayers: [{ url: "http://..." },
23                                     { url: "http://..." }],
24                     thumbnailUrl: "../Content/image/imagemap.png",
25                     title: "影像地图"
26                 };
27 
28                 map = new Map("map", {
29                     basemap: "tdtvec",
30                     center: [120.756, 30.766],
31                     logo: false,
32                     zoom: 13
33                 });
34 
35                 //底图切换
36                 var toggle = new BasemapToggle({
37                     map: window.map,
38                     basemap: "tdtimg"
39                 }, "BasemapToggle");
40                 toggle.startup();
41 
42                 //比例尺
43                 var scalebar = new Scalebar({
44                     map: window.map,
45                     scalebarUnit: "metric"
46                 });
47 
48                 //HOME按钮
49                 var home = new HomeButton({
50                     map: window.map
51                 }, "HomeButton");
52                 home.startup();
53 
54                 //测量工具
55                 if (!msr) {
56                     msr = new Measurement({
57                         map: window.map,
58                         defaultAreaUnit: Units.SQUARE_KILOMETERS,
59                         defaultLengthUnit: Units.KILOMETERS
60                     }, dom.byId("measurementDiv"));
61                     msr.startup();
62 
63                     msr.on("measure-end", function (evt) {
64                         this.setTool(evt.toolName, false);
65                     });
66                 }
67             });

View Code

下面是实际样式：

ArcGIS API for JavaScript 学习笔记（一）

转载请注明地址：http://www.cnblogs.com/CoffeeEddy/p/5643949.html

ArcGIS API for JavaScript 学习笔记（一）

相关推荐