【回顾】前4篇交代了JsAPI的背景、资源如何获取,简介了数据与视图分离的概念与实现,剖析了页面的大骨架。

这篇开始,讲Map类。

转载注明出处,博客园/CSDN/B站/知乎:秋意正寒

目录:https://www.cnblogs.com/onsummer/p/9080204.html

1. Map类的属性与方法

Map类继承自Accessor,有子类WebMap , WebScene。

这玩意儿是什么?通俗说,Map就是一张地图,它属于数据部分,需要用视图展示它。

视图,在jsAPI中,就是View,它负责把Map描绘出来,用WebGL的手段。

那么,Map类如何组织数据呢?用图层。对,图层,Layer!(至于Layer那是后话了,我们先谈Map数据的组织)

所以,你看到的很多Map类的方法,都是控制图层的。

属性 方法
  • ground:高程,Ground类型
  • basemap:底图,Basemap类型
  • allLayers:全部平面图层,Collection类型
  • layers:全部可操作图层,Coolection类型
  • add():添加一个图层,可指定图层位置
  • addMany():添加多个图层,可指定位置
  • findLayerById():根据ID寻找图层
  • remove():移除指定图层
  • removeAll():移除全部图层
  • removeMany():移除多个图层
  • reorder():对某个图层进行重排序(id变换)

方法都很简单,自行查阅官方API就知道怎么写了,我重点讲一下属性,尤其是ground属性、basemap属性。

有人说为什么不讲layers和allLayers?图层固然是Map的组成,但是这里是说Map,数据的承载体——Layer,还要等到下篇再说。

2. 属性:basemap详解

这个词直译是基础地图,我通俗地翻译为底图。就是最底下的图,像桌布一样。

2.1 Basemap类

本质上,basemap还是图层。

basemap是Basemap类型的,Basemap类型的对象是如何创建的呢?

当然还是由服务器上的各种数据服务创建的,查阅Basemap的构造器,其实basemap就是一堆堆的“layer”组成的。

如果需要自定义底图,可以深入研究研究Basemap类如何实例化。

2.2 预置basemap

如果对自定义底图没什么功夫,其实可以直接用官方给的预置图层,只需将basemap属性赋予几个预置的字符串即可。

例如:

var map = new Map(
{
basemap: "streets",
ground: "world-elevation"
}
);

basemap就指定为街道图了(打开好像是OpenStreetMap)

官方预置了十几种底图,有兴趣可以去看看。

3. 属性:ground详解

这单词直译是地面,形象翻译为高程。与底图一样,允许你使用字符串的方式,使用官方给的预置世界高程信息。

如果有更精确的或者符合自己坐标系需要的高程信息,这可能就需要通过实例化Ground对象来赋值了。

实际上,Ground类,也是由图层构成的。

它是由服务器上的高程影像服务组成的,前端这边叫高程图层——ElevationLayer类。

例如:

var worldElevation = ElevationLayer({
url: "//elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer"
});
var customElevation = ElevationLayer({
url: "http://my.server.com/arcgis/rest/service/MyElevationService/ImageServer"
});
var map = new Map({
basemap: "topo",
ground: new Ground({
layers: [ worldElevation, customElevation ]
})
});

4. 总结

实际上,Map就是个图层容器,只不过官方对各种图层的功能进行了分类。

底图做底,高程作高度信息,还有其他的图层,展示各种地理信息,构成了三层式体系。

下一节,我就简单说说“其他的图层”,有哪些,怎么创建,这可能要提及服务端了。

plus:要断更比较长的时间,暂时把这个写上,见谅。

ArcGIS API for JavaScript 入门教程[5] 再讲数据——Map类之底图与高程的更多相关文章

  1. ArcGIS API for JavaScript 入门教程[6] 再讲数据——Map类之可操作图层

    [回顾]上篇交代了Map是各种图层(不管是实际上的图层还是由图层构成的对象)的容器,是数据的容器,并不作显示(由视图类绘制).并重点讲解了由图层构成的复杂图层——高程属性ground和底图属性base ...

  2. ArcGIS API for JavaScript 入门教程[7] 再讲视图——View的基本属性

    [回顾]上篇花大篇幅讲了ArcGIS Server上的数据服务与部分常用可操作图层的创建关系,还讲了OGC的几个规范. 本篇回到JsAPI 4.x的新特性——视图类中来. 在第3篇讲过,4.x将视图从 ...

  3. ArcGIS API for JavaScript 入门教程[0] 目录

    随时翻看. 转载注明出处,博客园/CSDN/B站:秋意正寒. Part 1 必看 ArcGIS API for JavaScript 入门教程[1] 渊源 你还真不一定知道这是啥.非得学吗? ArcG ...

  4. ArcGIS API for JavaScript 入门教程[1] 渊源

    ->对于萌新,你可能需要了解一下这个东西是什么 ->对于已经知道要用这个东西的开发者,你可能需要了解一下它的底层机制 不针对大牛.龟速更新ing. 转载注明出处.博客园&CSDN& ...

  5. ArcGIS API for JavaScript 入门教程[4] 代码的骨架

    [回顾与本篇预览] 上篇简单介绍了JsAPI中的数据与视图,并告诉大家这两部分有什么用.如何有机连接在一起. 这一篇快速介绍一下前端代码的骨架.当然,假定你已经熟悉HTML5.CSS3和JavaScr ...

  6. ArcGIS API for JavaScript 入门教程[2] 授人以渔

    这篇仍然不讲怎么做,但是我要告诉你如何获取资源. 目录:https://www.cnblogs.com/onsummer/p/9080204.html 转载注明出处,博客园/CSDN/B站:秋意正寒. ...

  7. ArcGIS API for JavaScript 入门教程[3] 你看得到:数据与视图分离

    这篇开始正式讲API. 数据和视图分离不是什么奇怪的事情了,这是一个著名的设计--数据与视图分开. 转载注明出处,博客园/CSDN/B站:秋意正寒. 目录:https://www.cnblogs.co ...

  8. ArcGIS API for JavaScript 4.2学习笔记[24] 【IdentifyTask类】的使用(结合IdentifyParameters类)(第七章完结)

    好吧,我都要吐了. 接连三个例子都是类似的套路,使用某个查询参数类的实例,结合对应的Task类,对返回值进行取值.显示. 这个例子是Identify识别,使用了TileLayer这种图层,数据来自Se ...

  9. 【1】ArcGIS API for JavaScript 4.5/4.6 本地部署

    惭愧,和我的学弟比起来,我所开始接触前端开发,ArcGIS API for JavaScript的时间和深度远远不及于他. 一年之尾,亦是一年之始,我也将正式开始我的博客生涯.本人在校学习并且做项目, ...

随机推荐

  1. IOC 的理解与解释

    IOC 是什么? Ioc-Inversion of Control,即"控制反转",不是什么技术,而是一种设计思想.在Java开发中,Ioc意味着将你设计好的对象交给容器控制,而不 ...

  2. __BEGIN_DECLS 和 __END_DECLS

    扩充C语言在编译的时候按照C++编译器进行统一处理,使得C++代码能够调用C编译生成的中间代码. 由于C语言的头文件可能被不同类型的编译器读取,因此写C语言的头文件必须慎重. 我们编写代码,经常需要c ...

  3. SpringCloud实战-Feign声明式服务调用

    在前面的文章中可以发现当我们通过RestTemplate调用其它服务的API时,所需要的参数须在请求的URL中进行拼接,如果参数少的话或许我们还可以忍受,一旦有多个参数的话,这时拼接请求字符串就会效率 ...

  4. java,maven工程打tar.gz包执行main方法

    一,需要在pom.xml文件添加plugin, 项目目录结构 <build> <plugins> <plugin> <artifactId>maven- ...

  5. JS for循环有关变量类型的问题/魔兽世界样式的tooltip

    <script> var num = 100; for (var i=num-5;i<num+5;i++){ // console.log(typeof(i)); console.l ...

  6. Java 读书笔记 (八) 修饰符

    Java语言提供了很多修饰符,主要分为以下两类: 访问修饰符 非访问修饰符 访问控制修饰符 default (即缺省,什么也不写): 在同一包内可见,不使用任何修饰符.使用对象.类.接口.变量.方法. ...

  7. Intellij Idea中如何debug本地maven项目

    方法一:使用maven中的jetty插件调试本地maven项目 1.打断点 2.右击"jetty:run",选择Debug运行 3.浏览器发送http请求,开始调试 方法二:利用远 ...

  8. Go 语言之三驾马车

    interface Go是一门面向接口编程的语言,interface的设计自然是重中之重.Go中对于interface设计的巧妙之处就在于空的interface可以被当作"Duck" ...

  9. 在使用MFC对话框时遇到的用户交互

    有时我们需要点击对话框上的一个按钮的时候,对话框隐藏起来,然后执行完某个操作后,对话框又弹出来, 这时我们可以使用BeginEditorCommand()和CompleteEditorCommand( ...

  10. 【最小生成树】BZOJ1016: [JSOI2008]最小生成树计数

    Description 现在给出了一个简单无向加权图.你不满足于求出这个图的最小生成树,而希望知道这个图中有多少个不同的最小生成树.(如果两颗最小生成树中至少有一条边不同,则这两个最小生成树就是不同的 ...