博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
ArcGIS JavaScript API4.8 底图选择的几种方案
阅读量:4362 次
发布时间:2019-06-07

本文共 1922 字,大约阅读时间需要 6 分钟。

  创建一个HTML页面,引入ArcGIS JavaScript API,在<body>标签内创建一个div并添加ID值,在<head>标签内设置样式<style>,在<head>标签内编写JS API代码脚本<script>。在这个<script>中,所有代码都是写在require()中的。关于引用JS API及如何在HTML页面中使用的基本信息、Map和MapView的基本概念,请查看:。

  底图的选择有几种方案,这里列出3种:

  ①在Map对象的构造函数中,为basemap属性添加表示底图的字符串

  ②在WebMap对象的构造函数中,为portalItem属性添加portal或ArcGIS Online中的WebMap的ID值

  ③使用url创建切片图层(TileLayer),添加至Map对象中


一、代码框架

1  2  3     
4
5
6 ArcGIS JavaScript API4.8 底图选择的几种方案 7 8
9
10 11 12
13 21 22
23 26 27 28 29
30 31

二、添加底图

①在Map对象的构造函数中,为basemap属性添加表示底图的字符串

1     
2

   第一种方案

  basemap还可以有其他的值,可以进行尝试。

可以为basemap赋值的其他字符串

 

②在WebMap对象的构造函数中,为portalItem属性添加portal或ArcGIS Online中的WebMap的ID值

  打开portal或ArcGIS Online,找到喜欢的底图,点击查看,进入地图查看器,在上方的url地址栏上会显示一个ID值,复制这个ID值,后面会用到。

  1°portal:打开portal,图库-Esri专题内容,在左侧列表中选择“底图”,在右侧的页面中点击查看感兴趣的底图。

  portal

  进入地图查看器,上方的url地址栏中最后显示的一串数字,就是我们需要的WebMap的ID值。

  portalID

1     
2

  注意使用WebMap的ID创建地图时,在require()开头要引入WebMap模块而不是Map模块。

  portal底图显示

  2°ArcGIS Online:打开ArcGIS Online,在主页下方的图库中选择感兴趣的底图,点击进入地图查看器,上方url地址栏中最后一串数字就是我们需要的ID值。同样地,代码与调用portal的ID值相同。

  ArcGIS Online

  ArcGIS Online ID

1     
2

  ArcGIS Online底图显示

  这里要注意,引用Esri提供的portal或ArcGIS Online底图ID是不会有问题的,但如果是我们自己用ArcGIS Pro发布的WebMap,引用它的ID值会出现无法调用的错误。可能是因为我们要在代码中写上portal或ArcGIS Online的账户和密码。(没有解决)

 

③使用url创建切片图层(TileLayer),添加至Map对象中

  上面两种方法都是直接使用的Map或者WebMap,我们也可以创建切片图层,再将图层添加到空Map中,以达到底图的效果。。这个网站提供了一些切片图层的url,复制后写入TileLayer的构造函数中即可。点击查看“服务地址”,上方地址栏中的url即是我们需要引用的切片图层的url。

  智图官网

  智图切片图层url

1     
2

  切片图层作底图

  除了将切片图层赋值给Map构造函数中的layers属性,也可以在创建完空Map对象后,这样写:map.layers.add("切片图层名")。

三、总结

  三种方法都可以添加合适的底图,如果Esri提供的basemap底图字符串没有适合的,可以去portal或者ArcGIS Online的图库中找找。如果还是不符合需求,可以去智图等一些网站上找找提供的service(服务)的url。这里要注意,前两种方法的底图都是WGS84坐标系的,而第三种方法的切片图层是火星坐标系的。

  互联网地图使用三种坐标系统(这里的坐标系统指加密坐标系统,不是指地理坐标系或投影坐标系):WGS84坐标系、火星坐标系、百度坐标系。国外一些地图使用WGS84坐标系,火星坐标系是国家测绘局要求的对WGS84坐标系的加密,而百度坐标系是百度公司对火星坐标系的又一次加密。

文中例子的链接分享:

转载于:https://www.cnblogs.com/wangmengdx/p/9737694.html

你可能感兴趣的文章
fit_transform和transform的区别
查看>>
常用激活函数(激励函数)理解与总结
查看>>
DataFrame.to_dict(orient='dict')英文文档翻译
查看>>
DictVectorizer中的fit_transform
查看>>
HDFS优缺点
查看>>
排序算法(1) 快速排序 C++实现
查看>>
伙伴分配器的一个极简实现
查看>>
$.ajax所犯的错误。success后面不执行
查看>>
Spring注入方式及注解配置
查看>>
cocos2dx blender 骨骼动画实现
查看>>
ARM基础
查看>>
eclipse
查看>>
Mybatis参数传递及返回类型
查看>>
关于Ubuntu使用笔记
查看>>
调整Tomcat上的参数提高性能[转]
查看>>
在Ajax方式产生的浮动框中,点击选项包含某个关键字的选项
查看>>
SDK 操作 list-view control 实例 -- 遍历进程
查看>>
由于SSH配置文件的不匹配,导致的Permission denied (publickey)及其解决方法
查看>>
65. Valid Number
查看>>
检查MySQL主从数据一致性
查看>>