这篇开始正式讲API。

数据和视图分离不是什么奇怪的事情了,这是一个著名的设计——数据与视图分开。

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

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

请跟我做,把以下折叠的代码复制到新建的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类的属性:

常用的有三个属性,底图、可操作图层集合、地形图层。

  1. basemap属性可使用预置的底图,也可以使用自定义的Basemap对象;
  2. [★]layers属性是可操作的Layer对象的集合,Layer类有很多子类,如几何图层、地图图层、要素图层等,这些到以后会讲,这些都是赤果果的数据组成啊
  3. ground属性表示地图高程,可以用预置的世界高程数据,也可以自定义高程图层,后期会讲。

哦对了,对数据的在线简单编辑、绘制,也是由数据部分组织的,后面展开。

2.2 视图有什么用

视图是管理“看得到”的东西的。

其一,我们看得到的二三维地图、场景都是由它渲染的;

其二,我们需要对数据进行展示时,是由它进行弹窗(Popup)展示的;

这些业务和数据无关,任何一份数据都可以由视图进行前端渲染、数据展示,所以被抽取出来了,做到了高内聚低耦合、数据视图分离。


好啦,到这里,“数据”与“视图”已经有了个大概的了解了,下一篇将开始讲解如何代码入门,可以学一下Dojo用于预习,尤其是Dojo的模块化。

ArcGIS API for JavaScript 入门教程[3] 你看得到:数据与视图分离的更多相关文章

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

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

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

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

  3. ArcGIS API for JavaScript 入门教程[5] 再讲数据——Map类之底图与高程

    [回顾]前4篇交代了JsAPI的背景.资源如何获取,简介了数据与视图分离的概念与实现,剖析了页面的大骨架. 这篇开始,讲Map类. 转载注明出处,博客园/CSDN/B站/知乎:秋意正寒 目录:http ...

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

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

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

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

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

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

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

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

  8. ArcGIS API for JavaScript 4.2学习笔记[8] 2D与3D视图同步

    同一份数据不同视图查看可能用的比较少,因为3D视图放大很多后就和2D地图差不多了,畸变很小,用于超大范围的地图显示时有用,很多时候都是在平面地图上进行分析.查询.操作.教学需要可能会对这个有要求? 本 ...

  9. ArcGIS API for JavaScript 4.2学习笔记[0] AJS4.2概述、新特性、未来产品线计划与AJS笔记目录

    放着好好的成熟的AJS 3.19不学,为什么要去碰乳臭未干的AJS 4.2? 4.2全线基础学习请点击[直达] 4.3及更高版本的补充学习请关注我的博客. ArcGIS API for JavaScr ...

随机推荐

  1. 《MySQL必知必会》读书笔记_3

    PS:这次的信息量有点大. 聚集不同值 SELECT AVG(DISTINCT prod_price) AS avg_price FROM products WHERE vend_id = 1003 ...

  2. Markdown编辑技巧

    [前言] 保存Markdown的编辑技巧,写博客随笔,可以用下. [正文] 1.空格  //半角空格(英文)  //全角空格(中文)

  3. unity零基础开始学习做游戏(二)让你的对象动起来

    -------小基原创,转载请给我一个面子 小基认为电子游戏与电影最重要的区别就是交互,如果电子游戏没有让你输入的交互功能的话,全程都"只可远观,而不可鼓捣"的话,你可能是在看视频 ...

  4. Ubuntu系统下配置IP地址方法介绍

    配置IP方式有两种: 1.通过命令直接配置 sudo ifconfig eth0 IP地址 netmask 子网掩码------配置IP地 sudo route add default gw 网关-- ...

  5. 清理out的浏览器收藏夹发现的

    刚才清理了一下自己的浏览器书签,其实好几年不做收藏了,常用的直接放到书签栏里就行了. 发现不少之前的技术内容域名都被色情病毒经营者续费利用,相关技术内容都是VB.SQL.XMAPP这些过期的玩意,其中 ...

  6. Java内部抽象类的匿名类初始化

    说在前面的话,以前写过一次这个变态代码,后来重构,把那个new的语法简化了,最近又要整,差点都想不起来了,留个文档把 1.下面这个案例更变态,抽象类还有一个个泛型类:首先内部抽象类的定义: /* * ...

  7. Windows下配置vue的环境

    最近在学习vue.js,希望前端能用vue来作为主要框架.这里记录一下NPM在Windows中安装过程. 下载安装 下载地址 下载v6.11.0 LTS稳定版. 在C盘创建nodejs目录,并进行安装 ...

  8. windows下注册表的操作

    原博:https://blog.csdn.net/denghubu/article/details/5765921 1.       注册表简介 注册表是为Windows NT和Windows95中所 ...

  9. TCP的流量控制和拥塞处理

    1. 利用滑动窗口实现流量控制 如果发送方把数据发送得过快,接收方可能会来不及接收,这就会造成数据的丢失.所谓流量控制就是让发送方的发送速率不要太快,要让接收方来得及接收.    利用滑动窗口机制可以 ...

  10. Unity3D学习(四):小游戏Konster的整体代码重构

    前言 翻了下之前写的代码,画了个图看了下代码结构,感觉太烂了,有很多地方的代码重复啰嗦,耦合也紧,开个随笔记录下重构的过程. 过程 _____2017.10.13_____ 结构图: 目前发现的待改进 ...