ArcGIS API for JavaScript 入门教程[3] 你看得到：数据与视图分离
这篇开始正式讲API。
数据和视图分离不是什么奇怪的事情了，这是一个著名的设计——数据与视图分开。
转载注明出处，博客园/CSDN/B站：秋意正寒。
请跟我做，把以下折叠的代码复制到新建的html文件中，并双击打开。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Intro to MapView - Create a 2D map - 4.7</title>
<style>
html,
body,
#viewDiv {
padding: 0; margin: 0;
height: 100%; width: 100%;
}
</style> <link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css">
<script src="https://js.arcgis.com/4.7/"></script> <script>
require([
"esri/Map","esri/views/MapView","dojo/domReady!"
], function(Map, MapView) { var map = new Map({
basemap: "streets"
}); var view = new MapView({
container: "viewDiv",
map: map,
zoom: 4,
center: [15, 65] // longitude, latitude
}); });
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
复制它！
大概是这样：
打开后是这样的：
（环境说明：Chrome 65浏览器）
那我们再复制另一个代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Intro to SceneView - Create a 3D map - 4.7</title>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style> <link rel="stylesheet" href="https://js.arcgis.com/4.7/esri/css/main.css">
<script src="https://js.arcgis.com/4.7/"></script> <script>
require([
"esri/Map",
"esri/views/SceneView",
"dojo/domReady!"
], function(Map, SceneView) { var map = new Map({
basemap: "streets",
ground: "world-elevation"
}); var view = new SceneView({
container: "viewDiv",
map: map,
scale: 50000000,
center: [-101.17, 21.78]
}); });
</script>
</head> <body>
<div id="viewDiv"></div>
</body>
</html>
再试试我
得到的结果是：
1. 解释
本着能不解释代码就不解释代码的精神，我先给大家讲一下我讲这个JsAPI的思路。
它分五个主要学习的部分：
- 数据
- 视图
- 空间分析
- 符号渲染
- 小部件
其他不说不代表不会用到，但是相对于入门而言，这五个部分足够了。其重点讲解前三部分。
如果看文字不舒服，那么上个结构图：
而上面两个案例，拿同一份数据结合二三维视图作了展示。
抛开代码细节（如入口、引用、页面组织、样式等）不谈，我首先把代码中用于表示“数据”和“视图”的Js代码抽取出来：
左边是二维的，右边是三维的。
分别用两个对象来描述“数据”和“视图”，
用Map类实例出来的【map对象】以描述数据；用MapView类、SceneView类实例出来的【view对象】以描述视图。
那么你可能会问了，倘若已经在代码里做出来了数据与视图，有什么桥梁可以连接它们呢？我们把view的代码展开。
我们知道，在Js中通过new关键字实例化一个类，SceneView类的构造函数指定了一个Js中的Object对象作为参数，这个Object对象是这样的：
{
container: "viewDiv",
map: map,
scale: 50000000,
center: [-101.17, 21.78]
}
其中，就有一个Map类型的属性叫map，将上面实例化的map对象赋予给它就实现了视图（SceneView、MapView）与数据（Map）的连接。
其他的属性我们暂且不管，至少，在Js代码中，我们知道了哪些代码用于构造地理数据——用Map类、我们知道了哪些代码用于构造视图——View类。
哦对了，SceneView和MapView都继承自View类。虽然我们知道Js是弱类型的语言，但是Dojo帮我们做了一些面向对象的工作。
在这里，我沿用更广泛的说法，那就是用“类”这个称呼去替代官方的“模块”这个称呼，其实MapView、Map、SceneView都是模块，它们存在于js包里面。
2. 补充
如果上面看得懂，这里可以作为补充材料来阅读。
2.1 数据如何组织
相信肯定有筒子开始疑问Map对象的构造参数中应该如何组织属性了吧，这个时候就需要去查示例代码和官方API参考了。
我可以简单说一说。先看一下这个类的继承关系图：
清晰看到Map类的位置。
有趣的是，Map有WebMap和WebScene两个子类，由于继承和多态的特征，说明视图中map属性也可以设为WebMap和WebScene。
这有什么区别呢？暂且不说后期展开。
再展开Map类的属性：
常用的有三个属性，底图、可操作图层集合、地形图层。
- basemap属性可使用预置的底图，也可以使用自定义的Basemap对象；
- [★]layers属性是可操作的Layer对象的集合，Layer类有很多子类，如几何图层、地图图层、要素图层等，这些到以后会讲，这些都是赤果果的数据组成啊！
- ground属性表示地图高程，可以用预置的世界高程数据，也可以自定义高程图层，后期会讲。
哦对了，对数据的在线简单编辑、绘制，也是由数据部分组织的，后面展开。
2.2 视图有什么用
视图是管理“看得到”的东西的。
其一，我们看得到的二三维地图、场景都是由它渲染的；
其二，我们需要对数据进行展示时，是由它进行弹窗（Popup）展示的；
这些业务和数据无关，任何一份数据都可以由视图进行前端渲染、数据展示，所以被抽取出来了，做到了高内聚低耦合、数据视图分离。
好啦，到这里，“数据”与“视图”已经有了个大概的了解了，下一篇将开始讲解如何代码入门，可以学一下Dojo用于预习，尤其是Dojo的模块化。
ArcGIS API for JavaScript 入门教程[3] 你看得到：数据与视图分离的更多相关文章
- ArcGIS API for JavaScript 入门教程[0] 目录
随时翻看. 转载注明出处,博客园/CSDN/B站:秋意正寒. Part 1 必看 ArcGIS API for JavaScript 入门教程[1] 渊源 你还真不一定知道这是啥.非得学吗? ArcG ...
- ArcGIS API for JavaScript 入门教程[1] 渊源
->对于萌新,你可能需要了解一下这个东西是什么 ->对于已经知道要用这个东西的开发者,你可能需要了解一下它的底层机制 不针对大牛.龟速更新ing. 转载注明出处.博客园&CSDN& ...
- ArcGIS API for JavaScript 入门教程[5] 再讲数据——Map类之底图与高程
[回顾]前4篇交代了JsAPI的背景.资源如何获取,简介了数据与视图分离的概念与实现,剖析了页面的大骨架. 这篇开始,讲Map类. 转载注明出处,博客园/CSDN/B站/知乎:秋意正寒 目录:http ...
- ArcGIS API for JavaScript 入门教程[2] 授人以渔
这篇仍然不讲怎么做,但是我要告诉你如何获取资源. 目录:https://www.cnblogs.com/onsummer/p/9080204.html 转载注明出处,博客园/CSDN/B站:秋意正寒. ...
- ArcGIS API for JavaScript 入门教程[4] 代码的骨架
[回顾与本篇预览] 上篇简单介绍了JsAPI中的数据与视图,并告诉大家这两部分有什么用.如何有机连接在一起. 这一篇快速介绍一下前端代码的骨架.当然,假定你已经熟悉HTML5.CSS3和JavaScr ...
- ArcGIS API for JavaScript 入门教程[6] 再讲数据——Map类之可操作图层
[回顾]上篇交代了Map是各种图层(不管是实际上的图层还是由图层构成的对象)的容器,是数据的容器,并不作显示(由视图类绘制).并重点讲解了由图层构成的复杂图层——高程属性ground和底图属性base ...
- ArcGIS API for JavaScript 入门教程[7] 再讲视图——View的基本属性
[回顾]上篇花大篇幅讲了ArcGIS Server上的数据服务与部分常用可操作图层的创建关系,还讲了OGC的几个规范. 本篇回到JsAPI 4.x的新特性——视图类中来. 在第3篇讲过,4.x将视图从 ...
- ArcGIS API for JavaScript 4.2学习笔记[8] 2D与3D视图同步
同一份数据不同视图查看可能用的比较少,因为3D视图放大很多后就和2D地图差不多了,畸变很小,用于超大范围的地图显示时有用,很多时候都是在平面地图上进行分析.查询.操作.教学需要可能会对这个有要求? 本 ...
- ArcGIS API for JavaScript 4.2学习笔记[0] AJS4.2概述、新特性、未来产品线计划与AJS笔记目录
放着好好的成熟的AJS 3.19不学,为什么要去碰乳臭未干的AJS 4.2? 4.2全线基础学习请点击[直达] 4.3及更高版本的补充学习请关注我的博客. ArcGIS API for JavaScr ...
随机推荐
- 数据库面试题目- ORACLE
Posted on 2009-06-08 17:38 漠北的天空 阅读(110) 评论(0) 编辑 收藏 1. 列举几种表连接方式 Answer:等连接(内连接).非等连接.自连接.外连 ...
- Python的基本数据数字、字符串、布尔值及其魔法
基本数据类型介绍 若要把Pyhton的基本数据类型:数字(int).字符串(str).布尔(bool).列表(list).元组(tuple).字典(dict)都分为一个个不同的角色 如:战士,魔法师, ...
- 【转】学习FFmpeg API – 解码视频
ffmpeg是编解码的利器,用了很久,以前看过dranger 的教程,非常精彩,受益颇多,是学习ffmpeg api很好的材料.可惜的是其针对的ffmpeg版本已经比较老了,而ffmpeg的更新又很快 ...
- maxSubArray
Description: Find the contiguous subarray within an array (containing at least one number) which has ...
- web 文件下载（.shp）
1. Open IIS Manager2. Select MIME Types 3. In the right pane, click Add…4. Enter the following infor ...
- Java数组的复制全解
1.将一个基本数据类型数组的引用赋值给另一个数组 public class Array_copy { int[] array1=new int[]{1,2,3,4,5,6}; int[] array2 ...
- Linux（二十一）Shell编程
21.1 为什么要学习Shell编程 (1)Linux运维工程师在进行服务器集群管理时,需要编写Shell程序来进行服务器管理. (2)对于JavaEE和Python程序员来说,工作的需要,你的老大会 ...
- Eeffective C++ 读书笔记（ 32-38）
条款三十二:确定你的public继承塑模出is-a关系 1.所谓最佳设计,取决于系统希望做什么事,包括现在和未来. 2.好的接口可以防止无效的代码通过编译,因此你应该宁可采取“在编译期拒绝企鹅飞行”的 ...
- 【转】javascript 浮点数运算问题
大多数语言在处理浮点数的时候都会遇到精度问题,但是在JS里似乎特别严重,来看一个例子 alert(45.6*13); 结果居然是592.800000000001,当然加法之类的也会有这个问题 那这是j ...
- 最详细的JavaWeb开发基础之java环境搭建(Windows版)
阅读文本大概需要 3 分钟. 首先欢迎大家来学习JavaWeb,在这里会给你比较详细的教程,从最基本的开始,循序渐进的深入.会让初学者的你少踩很多坑(大实话),如果你已经掌握了JavaWeb开发的基础 ...