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

一、ArcGis加载

引入css 和js

[html] view plaincopy

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

html

[html] view plaincopy

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

初始化地图

[javascript] view plaincopy

require(["esri/map", "dojo/domReady!" ], function(Map) {
var map = new Map("map" , {
center: [-118, 34.5],
zoom: 8,
basemap: "topo"
});
});

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

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

二、加载天地图

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

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

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

[javascript] view plaincopy

//加载天地图
var baseMap = new WebTiledLayer("http://\${subDomain}.tianditu.com/DataServer?T=vec_c&X=\${col}&Y=\${row}&L=\${level}" , {
"copyright" : "Tianditu",
"id": "Tianditu" ,
"subDomains" : ["t0", "t1", "t2" ]
});
map.addLayer(baseMap);

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

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

[javascript] view plaincopy

var tileInfo = new esri.layers.TileInfo({
"rows" : 256,
"cols" : 256,
"compressionQuality" : 0,
"origin" : {
"x" : -180,
"y" : 90
},
"spatialReference" : {
"wkid" : 4326
},
"lods" : [
{
"level" : 2,
"resolution" : 0.3515625,
"scale" : 147748796.52937502
},
{
"level" : 3,
"resolution" : 0.17578125,
"scale" : 73874398.264687508
},
{
"level" : 4,
"resolution" : 0.087890625,
"scale" : 36937199.132343754
},
{
"level" : 5,
"resolution" : 0.0439453125,
"scale" : 18468599.566171877
},
{
"level" : 6,
"resolution" : 0.02197265625,
"scale" : 9234299.7830859385
},
{
"level" : 7,
"resolution" : 0.010986328125,
"scale" : 4617149.8915429693
},
{
"level" : 8,
"resolution" : 0.0054931640625,
"scale" : 2308574.9457714846
},
{
"level" : 9,
"resolution" : 0.00274658203125,
"scale" : 1154287.4728857423
},
{
"level" : 10,
"resolution" : 0.001373291015625,
"scale" : 577143.73644287116
},
{
"level" : 11,
"resolution" : 0.0006866455078125,
"scale" : 288571.86822143558
},
{
"level" : 12,
"resolution" : 0.00034332275390625,
"scale" : 144285.93411071779
},
{
"level" : 13,
"resolution" : 0.000171661376953125,
"scale" : 72142.967055358895
},
{
"level" : 14,
"resolution" : 8.58306884765625e-005,
"scale" : 36071.483527679447
},
{
"level" : 15,
"resolution" : 4.291534423828125e-005,
"scale" : 18035.741763839724
},
{
"level" : 16,
"resolution" : 2.1457672119140625e-005,
"scale" : 9017.8708819198619
},
{
"level" : 17,
"resolution" : 1.0728836059570313e-005,
"scale" : 4508.9354409599309
},
{
"level" : 18,
"resolution" : 5.3644180297851563e-006,
"scale" : 2254.4677204799655
}
]
});

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

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

[javascript] view plaincopy

var baseMap = new WebTiledLayer("http://\${subDomain}.tianditu.com/DataServer?T=vec_c&X=\${col}&Y=\${row}&L=\${level}" , {
"copyright" : "Tianditu",
"id": "Tianditu" ,
"subDomains" : ["t0", "t1", "t2" ],
"tileInfo" :tileInfo
});

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

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

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

[javascript] view plaincopy

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

显示效果变成这个样子：

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

[javascript] view plaincopy

map.centerAndZoom(new esri.geometry.Point({
"x": 116.40969,
"y": 39.89945,
"spatialReference": {
"wkid": 4326
}
}),12);

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

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

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

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

转载于:https://www.cnblogs.com/telwanggs/p/5650684.html

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

arcgis android 天地图,Arcgis runtime for Android 100.5 加载天地图
说明一下,什么时候加载高德地图,什么时候加载天地图使用原生定位或者使用arcgis提供的LocationDisplay的定位时,需要加载天地图,因为原生定位返回的坐标是wgs84的坐标,而高德地图是 ...
arcgis for Android 100.1 在线加载天地图和谷歌地图
距离上一篇arcgis for Android 已经很久.其实年初的时候就测试了arcgis for Android 100.1版本.搜集网上各篇文章,最后自已测试代码.修改代码.这一篇来讲一下加载在 ...
arcgis for android（五）加载天地图
1.上一篇文章arcgis for android 入门与提高(四)去掉属性标记和水印arcgis for android 入门与提高(四)去掉属性标记和水印_郝大大的博客-CSDN博客,接下来介绍国 ...
使用ArcGIS JavaScript API 3.18 加载天地图
对于中国开发者在创建GIS应用的时候,往往比较头疼的是底图资源的缺乏.其实国家测绘地信局就提供一个很好的免费资源:天地图.使用ArcGIS API的开发人员可以直接利用该资源作为地图应用的底图. Ar ...
基于ArcGIS API for JavaScript加载天地图
文章目录前言效果图详细代码总结参考链接前言该篇主要介绍如何用ArcGIS JS API加载天地图,具体应用场景以及需求分析等,在上篇基于ArcGIS API for JavaScript ...
填坑 ---- arcgis api for javascript 加载天地图
写在前面首先要感谢 arcgis api for javascript 加载天地图这篇文章,帮助我完成了在网页中加载天地图. 在此就不再描述加载天地图的方法与过程,只记录我遇到的一个坑与填坑方法. ...
arcgis api for javascipt 加载天地图、百度地图
写在前面的话: 1.百度地图是自己定义的坐标系统,wkid=102100.百度地图数据是加密的产物.下文将附上百度坐标与WGS84,谷歌等坐标系统转换方法(地理-地理),此方法并未亲测,据说准 2.百 ...
（转）Arcgis for js加载天地图
http://blog.csdn.net/gisshixisheng/article/details/44494715 综述:本节讲述的是用Arcgis for js加载天地图的切片资源. 天地图的切 ...
ArcGIS 切片/瓦片的发布与加载
ArcGIS 切片/瓦片的发布与加载一.影像预处理二.瓦片的发布三.瓦片的加载 1.一些需要注意的点 2.代码实现 3.最终效果本文介绍了遥感影像在Arcmap上的发布与切片,并在网页通过Ar ...

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

一、ArcGis加载

二、加载天地图

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

最新文章

热门文章