【ArcGis for javascript从零开始】之一 ArcGis加载天地图

最近做项目需要用到ArcGis来进行数据展示和数据分析。以前从来没有接触过与Gis有关的东西，一切需要从头开始学。没有时间从头系统地学习了，只能用到哪个学习哪里了，本系列只是对学习的路径进行记录。ArcGis在网上没有找到中文的API，只有官网的英文API和Demo，而且用到了大量dojo的API，dojo也没有接触过，这方面也是需要学习的……

一、ArcGis加载

引入css 和js

[html] view plain copy

  1. <link rel= "stylesheet" href ="https://js.arcgis.com/3.15/esri/css/esri.css">
  2. <script src= "https://js.arcgis.com/3.15/" ></script>

html

[html] view plain copy

  1. <div id= "map" ></div>

初始化地图

[javascript] view plain copy

  1. require(["esri/map", "dojo/domReady!" ], function(Map) {
  2. <span style="white-space:pre">    </span>var map = new Map("map" , {
  3. <span style="white-space:pre">        </span>center: [-118, 34.5],
  4. <span style="white-space:pre">        </span>zoom: 8,
  5. <span style="white-space:pre">        </span>basemap: "topo"
  6. <span style="white-space:pre">   </span>});
  7. });

以上代码为ArcGis首页上的demo，是最简单的地图了。地图上什么多余的功能都没有……

显示的效果是这样子的↓↓↓

二、加载天地图

能显示出地图了，很好，下一步是加载天地图了！上面那个地图全是英文的，我们给客户就不能用这样式的，而且还因为给特殊用户做的，所以只能暂时选定天地图了。哎，废话就不多说了。

在ArcGis的Sample Code中，有一个叫做Dynamic Layers的示例，动态图层。我理解的是地图中就一层一层的，底层是地图，上面可以覆盖上其他的标注，再往上可以是描的点，and so on……这个我在后面研究散点的时候有了更深刻的体会，散点下次再说。

扯远了，再扯回来，那个动态图层的Sample Code地址，加载两个动态图层：点我打开官方demo

[javascript] view plain copy

  1. //加载天地图
  2. var baseMap = new WebTiledLayer("http://\${subDomain}.tianditu.com/DataServer?T=vec_c&X=\${col}&Y=\${row}&L=\${level}" , {
  3. <span style="white-space:pre">    </span>"copyright" : "Tianditu",
  4. <span style="white-space:pre">    </span>"id": "Tianditu" ,
  5. <span style="white-space:pre">    </span>"subDomains" : ["t0", "t1", "t2" ]
  6. });
  7. map.addLayer(baseMap);

我按照他们的代码，显示出来的是一片空白的屏幕。

这个原因是ArcGis与天地图采用的是两套投影体系，这样直接搬过来是没有什么用的。需要加上一些配置。↓↓↓

[javascript] view plain copy

  1. <span style="white-space:pre">    </span>var tileInfo = new esri.layers.TileInfo({
  2. "rows" : 256,
  3. "cols" : 256,
  4. "compressionQuality" : 0,
  5. "origin" : {
  6. "x" : -180,
  7. "y" : 90
  8. },
  9. "spatialReference" : {
  10. "wkid" : 4326
  11. },
  12. "lods" : [
  13. {
  14. "level" : 2,
  15. "resolution" : 0.3515625,
  16. "scale" : 147748796.52937502
  17. },
  18. {
  19. "level" : 3,
  20. "resolution" : 0.17578125,
  21. "scale" : 73874398.264687508
  22. },
  23. {
  24. "level" : 4,
  25. "resolution" : 0.087890625,
  26. "scale" : 36937199.132343754
  27. },
  28. {
  29. "level" : 5,
  30. "resolution" : 0.0439453125,
  31. "scale" : 18468599.566171877
  32. },
  33. {
  34. "level" : 6,
  35. "resolution" : 0.02197265625,
  36. "scale" : 9234299.7830859385
  37. },
  38. {
  39. "level" : 7,
  40. "resolution" : 0.010986328125,
  41. "scale" : 4617149.8915429693
  42. },
  43. {
  44. "level" : 8,
  45. "resolution" : 0.0054931640625,
  46. "scale" : 2308574.9457714846
  47. },
  48. {
  49. "level" : 9,
  50. "resolution" : 0.00274658203125,
  51. "scale" : 1154287.4728857423
  52. },
  53. {
  54. "level" : 10,
  55. "resolution" : 0.001373291015625,
  56. "scale" : 577143.73644287116
  57. },
  58. {
  59. "level" : 11,
  60. "resolution" : 0.0006866455078125,
  61. "scale" : 288571.86822143558
  62. },
  63. {
  64. "level" : 12,
  65. "resolution" : 0.00034332275390625,
  66. "scale" : 144285.93411071779
  67. },
  68. {
  69. "level" : 13,
  70. "resolution" : 0.000171661376953125,
  71. "scale" : 72142.967055358895
  72. },
  73. {
  74. "level" : 14,
  75. "resolution" : 8.58306884765625e-005,
  76. "scale" : 36071.483527679447
  77. },
  78. {
  79. "level" : 15,
  80. "resolution" : 4.291534423828125e-005,
  81. "scale" : 18035.741763839724
  82. },
  83. {
  84. "level" : 16,
  85. "resolution" : 2.1457672119140625e-005,
  86. "scale" : 9017.8708819198619
  87. },
  88. {
  89. "level" : 17,
  90. "resolution" : 1.0728836059570313e-005,
  91. "scale" : 4508.9354409599309
  92. },
  93. {
  94. "level" : 18,
  95. "resolution" : 5.3644180297851563e-006,
  96. "scale" : 2254.4677204799655
  97. }
  98. ]
  99. });

又长又难看，强迫症表示忍不了，每一个页面都有写之么长一段，好烦，我给拿到一个单独的js里了。

这样， 天地图的图层需要加上这么一句，见下面代码加粗部分：

[javascript] view plain copy

  1. <span style="white-space:pre">    </span>var baseMap = new WebTiledLayer("http://\${subDomain}.tianditu.com/DataServer?T=vec_c&X=\${col}&Y=\${row}&L=\${level}" , {
  2. "copyright" : "Tianditu",
  3. "id": "Tianditu" ,
  4. "subDomains" : ["t0", "t1", "t2" ],
  5. <strong>"tileInfo" :tileInfo</strong>
  6. });

这样显示出来是下面的样子，好一片蔚蓝的大海。

我们把地图缩小一下再看：

地图上是没有标注的，这个就需要再加载一个再标注的图层才可以的。

[javascript] view plain copy

  1. //底图标注
  2. var baseMapMarker = new WebTiledLayer("http://\${subDomain}.tianditu.com/DataServer?T=cva_c&X=\${col}&Y=\${row}&L=\${level}" , {
  3. "copyright" : "Tianditu",
  4. "id": "Tianditu2" ,
  5. "subDomains" : ["t0", "t1", "t2" ],
  6. "tileInfo" :tileInfo
  7. });
  8. map.addLayer(baseMapMarker);

显示效果变成这个样子：

这样基本就完工喽，最后设置一下初始的中心位置和缩放比例吧，我们就以我们的首都为例吧：

[javascript] view plain copy

  1. <span style="white-space:pre">    </span>map.centerAndZoom(new esri.geometry.Point({
  2. "x": 116.40969,
  3. "y": 39.89945,
  4. "spatialReference": {
  5. "wkid": 4326
  6. }
  7. }),12);

最终效果，至于显示div的样式，铺满全屏什么的，这就是CSS的问题了，不多说了，上一张完工图：

我写的demo，html版的，可以稍微借鉴一下吧 ^_^ 点我下载

学习是一个很复杂的过程，把这个学习研究的过程讲出来，也挺累的……好了，本宝宝该接着上班了。

下集预告：安装部署引入本地ArcGis

时间： 2024-08-28 05:35:53

【ArcGis for javascript从零开始】之一 ArcGis加载天地图的相关文章

18 ArcGIS API for JavaScript4.X 系列加载天地图（经纬度）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

使用ArcGIS JavaScript API 3.18 加载天地图

对于中国开发者在创建GIS应用的时候,往往比较头疼的是底图资源的缺乏.其实国家测绘地信局就提供一个很好的免费资源:天地图.使用ArcGIS API的开发人员可以直接利用该资源作为地图应用的底图. ArcGIS JavaScript API最近新推出了3.18版本.所以下面示例代码将基于该版本. <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf

arcgis api for javascipt 加载天地图、百度地图

写在前面的话: 1.百度地图是自己定义的坐标系统,wkid=102100.百度地图数据是加密的产物.下文将附上百度坐标与WGS84,谷歌等坐标系统转换方法(地理-地理),此方法并未亲测,据说准 2.百度地图可以直接加载经纬度坐标 3.百度地图如果加载的arcgis api中会出现坐标偏移,1.中已经解决了地理坐标转换,那么找到百度投影-地理坐标的转换方式,则arcgis就可以直接无偏加载了,网上很多方法,但是亲测不行. 4.天地图不是涉密数据,根据本文提供的类库,arcgis api for j

Arcgis for js，Openlayers中加载GeoJSON

概述: 在前文中,讲述了在JAVA环境下如何将shp转换为GeoJSON,在本文,分别讲述在Arcgis for js,Openlayers2和Openlayers3中加载展示GeoJSON. 实现: 1.Openlayers2中加载GeoJSON 在OL2中,可以直接调用OL2的借口实现GeoJSON的加载,代码示例: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UT

Javascript图片的懒加载与预加载

1. 缓载.预载的概念 这些技术不仅限于图片加载,但我们首先讨论最常用的图片加载. 缓载:延迟加载图片或符合某些条件时才加载某些图片. 预载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染. 两种技术的本质:两者的行为是相反的,一个是提前加载,一个是迟缓甚至不加载.缓载对服务器前端有一定的缓解压力作用,预载则会增加服务器前端压力. 2. 缓载的意义与实现 缓载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数. 主要体现在三种模式上: 第一种是纯粹的延迟加载,使用setTimeOut

使用JavaScript判断图片是否加载完成的三种实现方式

有时需要获取图片的尺寸,这需要在图片加载完成以后才可以.有三种方式实现,下面一一介绍. 一.load事件 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>img - load event</title> </head> <body> <img id="img1" src="http:/

javascript不依赖JS加载顺序事件对象实现

背景: 在现在WEB开发中,稍复杂一点的页面,都会涉及到多个模块,尤其是类似seajs.LABjs.requireJS等模块工具出来后,前端开发者分模块开发已经慢慢变成一种习惯了,但是多个模块间的常常有各种交集,需要通信.需要互相调用,这时监听者模式便是必不可少的一种设计模式了,在前端表现事件操作.backbone和jquery都有提供了很好的事件处理方式. 但是,真正开发需求的时候我们常常会遇到文件加载顺序跟事件监听与更新不一致的需求,比如说:在一个视频网站里面,有一个视频处理的JS模块和用户

JavaScript判断图片是否加载完成

一.load事件 <!DOCTYPE HTML><html> <head>     <meta charset="utf-8">    <title>img - load event</title></head> <body>    <img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb

JavaScript判断图片是否加载完成的三种方式

一.load事件 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <!DOCTYPE HTML> <html> <head>     <meta charset="utf-8">     <title>img - load event</title> </head> <body>     <img id="img1" src=&qu