备案控制台
探索云世界
开发者社区 开发与运维 文章 正文

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

2016-08-18 1641
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介： 原文:【ArcGis for javascript从零开始】之一 ArcGis加载天地图最近做项目需要用到ArcGis来进行数据展示和数据分析。以前从来没有接触过与Gis有关的东西，一切需要从头开始学。
原文: 【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.                 {  
  20.                     "level" : 3,  
  21.                     "resolution" : 0.17578125,  
  22.                     "scale" : 73874398.264687508  
  23.                 },  
  24.   
  25.                 {  
  26.                     "level" : 4,  
  27.                     "resolution" : 0.087890625,  
  28.                     "scale" : 36937199.132343754  
  29.                 },  
  30.   
  31.                 {  
  32.                     "level" : 5,  
  33.                     "resolution" : 0.0439453125,  
  34.                     "scale" : 18468599.566171877  
  35.                 },  
  36.   
  37.                 {  
  38.                     "level" : 6,  
  39.                     "resolution" : 0.02197265625,  
  40.                     "scale" : 9234299.7830859385  
  41.                 },  
  42.   
  43.                 {  
  44.                     "level" : 7,  
  45.                     "resolution" : 0.010986328125,  
  46.                     "scale" : 4617149.8915429693  
  47.                 },  
  48.   
  49.                 {  
  50.                     "level" : 8,  
  51.                     "resolution" : 0.0054931640625,  
  52.                     "scale" : 2308574.9457714846  
  53.                 },  
  54.   
  55.                 {  
  56.                     "level" : 9,  
  57.                     "resolution" : 0.00274658203125,  
  58.                     "scale" : 1154287.4728857423  
  59.                 },  
  60.   
  61.                 {  
  62.                     "level" : 10,  
  63.                     "resolution" : 0.001373291015625,  
  64.                     "scale" : 577143.73644287116  
  65.                 },  
  66.   
  67.                 {  
  68.                     "level" : 11,  
  69.                     "resolution" : 0.0006866455078125,  
  70.                     "scale" : 288571.86822143558  
  71.                 },  
  72.   
  73.                 {  
  74.                     "level" : 12,  
  75.                     "resolution" : 0.00034332275390625,  
  76.                     "scale" : 144285.93411071779  
  77.                 },  
  78.   
  79.                 {  
  80.                     "level" : 13,  
  81.                     "resolution" : 0.000171661376953125,  
  82.                     "scale" : 72142.967055358895  
  83.                 },  
  84.   
  85.                 {  
  86.                     "level" : 14,  
  87.                     "resolution" : 8.58306884765625e-005,  
  88.                     "scale" : 36071.483527679447  
  89.                 },  
  90.   
  91.                 {  
  92.                     "level" : 15,  
  93.                     "resolution" : 4.291534423828125e-005,  
  94.                     "scale" : 18035.741763839724  
  95.                 },  
  96.   
  97.                 {  
  98.                     "level" : 16,  
  99.                     "resolution" : 2.1457672119140625e-005,  
  100.                     "scale" : 9017.8708819198619  
  101.                 },  
  102.   
  103.                 {  
  104.                     "level" : 17,  
  105.                     "resolution" : 1.0728836059570313e-005,  
  106.                     "scale" : 4508.9354409599309  
  107.                 },  
  108.   
  109.                 {  
  110.                     "level" : 18,  
  111.                     "resolution" : 5.3644180297851563e-006,  
  112.                     "scale" : 2254.4677204799655  
  113.                 }  
  114.                 ]  
  115.             });  

又长又难看，强迫症表示忍不了，每一个页面都有写之么长一段，好烦，我给拿到一个单独的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
文章标签：
JavaScript
定位技术
前端开发
API
关键词：
JavaScript加载
Arcgis地图
JavaScript地图
JavaScript ArcGIS
Arcgis javascript
杰克.陈
目录
相关文章
前端技术栈
|
3月前
|
JavaScript 前端开发 Java
面试官：你的项目有什么亮点？我：解决了JS脚本加载失败的问题！
面试官：你的项目有什么亮点？我：解决了JS脚本加载失败的问题！
前端技术栈
42 0
点点GIS
|
6月前
|
人工智能 NoSQL 定位技术
标准地图的矢量模板，ArcGIS可打开
标准地图的矢量模板，ArcGIS可打开
点点GIS
89 0
jerrywangsap
|
7月前
|
自然语言处理 前端开发 JavaScript
使用 Promise 来改写 JavaScript 的加载逻辑
使用 Promise 来改写 JavaScript 的加载逻辑
jerrywangsap
57 0
jerrywangsap
|
7月前
|
JavaScript 前端开发 开发者
SAP UI5 应用的 Component.js 文件是如何在运行时被加载的？
SAP UI5 应用的 Component.js 文件是如何在运行时被加载的？
jerrywangsap
30 0
讓丄帝愛伱
|
5月前
|
缓存 JavaScript 应用服务中间件
Nginx+Tomcat代理环境下JS无法完全加载问题
Nginx+Tomcat代理环境下JS无法完全加载问题
讓丄帝愛伱
54 0
漏刻有时
|
9月前
|
数据可视化 搜索推荐 JavaScript
数据可视化大屏百度地图区域掩膜MapMask实现地图指定区域非省市县行政区显示的实战案例解析(JavaScript API GL、个性化地图定制、指定区域经纬度拾取转化)
数据可视化大屏百度地图区域掩膜MapMask实现地图指定区域非省市县行政区显示的实战案例解析(JavaScript API GL、个性化地图定制、指定区域经纬度拾取转化)
漏刻有时
691 0
java开发-郭老师
|
18天前
|
JavaScript 前端开发
EasyUi js 加载数据表格DataGrid
EasyUi js 加载数据表格DataGrid
java开发-郭老师
15 0
泡芙-草莓
|
23天前
|
JavaScript
理解DOM树的加载过程（js的问题）
理解DOM树的加载过程（js的问题）
泡芙-草莓
10 0
Boale_H
|
1月前
|
JavaScript
js判断图片是否加载完成
js判断图片是否加载完成
Boale_H
24 0
mrq4nk6ni2neg
|
2月前
|
缓存 JavaScript 前端开发
前端工程化：优化JS加载速度
在现代Web应用中，JavaScript已成为必不可少的一部分，但是随着业务复杂度的增加，JS文件的体积也越来越大，导致网页加载速度变慢，影响用户体验。本文将介绍前端工程化的优化策略，以提高JS文件的加载速度。
mrq4nk6ni2neg
19 2

热门文章

最新文章

  • 1
    JavaScript基础语法（codewhy版本）（一）
  • 2
    JavaScript 权威指南第七版（GPT 重译）（三）(1)
  • 3
    JavaScript高级笔记-coderwhy版本（六）
  • 4
    JavaScript 权威指南第七版（GPT 重译）（六）(4)
  • 5
    JavaScript 权威指南第七版（GPT 重译）（四）(4)
  • 6
    JavaScript 权威指南第七版（GPT 重译）（二）(1)
  • 7
    JavaScript 权威指南第七版（GPT 重译）（六）(3)
  • 8
    JavaScript 权威指南第七版（GPT 重译）（三）(2)
  • 9
    报错/ ./node_modules/axios/lib/platform/index.js Module parse failed: Unexpected token (5:2)怎么解决？
  • 10
    在Blazor中使用Chart.js快速创建图表
  • 1
    2024最新ArcGIS Pro 3.0.2 官方原版简体中文直装版
    96
  • 2
    ArcGIS Pro遥感影像分类：随机森林、支持向量机方法
    100
  • 3
    ArcGIS面要素最小外接矩形、外接圆的绘制方法
    31
  • 4
    ArcGIS手动分割矢量面要素从而划分为多个面部分的方式：Cut Polygons Tool
    57
  • 5
    ArcGIS导出AI或EPS格式的地图图片并在Adobe Illustrator中继续编辑
    98
  • 6
    ArcGIS批量拼接大量栅格遥感影像：Mosaic工具
    76
  • 7
    ArcGIS中ArcMap创建渔网Create Fishnet：生成指定大小的格网矢量文件
    59
  • 8
    ArcGIS中ArcMap栅格图像平滑滤波：焦点统计、滤波器、重采样
    87
  • 9
    ArcGIS中ArcMap分割栅格Split Raster工具没有结果的解决
    64
  • 10
    ArcGIS中ArcMap栅格重采样操作与算法选择
    58

    • 相关课程

    更多
  • JavaScript入门与实战
  • JavaScript 自学手册文档教程

    • 相关电子书

    更多
  • JavaScript异步编程
  • Delivering Javascript to World
  • 编程语言如何演化-以JS的private为例

    • 相关实验场景

    更多
  • Html5和Webpack2：Webpack5打包JS和样式表
    • 下一篇
    部署LAMP环境（Alibaba Cloud Linux 3）