[ArcGIS API for JavaScript 4.8] Sample Code-Get Started-MapView,SceneView简介
【官方文档：https://developers.arcgis.com/javascript/latest/sample-code/index.html】
一、Intro to MapView(2D)
在自己的HTML界面中创建并显示一个2D地图。
1.引入ArcGIS API for JavaScript
①编写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</title>
</head> <body>
</body>
</html>
②在<head>标签中，使用<script>和<link>标签引入JS API
<link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
2 <script src="https://js.arcgis.com/4.8/"></script>
注：部署JS API有两种方式，本地部署或者在线引用。上面的例子是使用在线的API，当API版本更新或者想使用其他版本的API时，只需要更改其中的4.x数字。如果在线API加载缓慢，请刷新或者耐心等候。
2.导入模块(modules)
从API中导入所需要的模块。
<script>
require([
"esri/Map",
"esri/views/MapView",
"dojo/domReady!"
],function(Map,MapView){
// 要编写的代码
});
</script>
这里的<script>标签还是写在<head>标签里，也可以写在外部的.js文件里，在<script>中引入。
Esri的JavaScript API是建立在Dojo框架之上的，require()是Dojo中的一个方法，用于导入模块。这里"esri/Map"，"esri/views/MapView"，"dojo/domReady!"就是3个不同的模块，相当于C语言中的#include<stdio.h>，C++中的#include<iostream>,C#中的using System。有了这些模块，才能使用其中的类。
这里，"esri/Map"是关于创建地图的模块，"esri/views/MapView"是关于以2D方式显示地图的模块，"dojo/domReady!"确保在执行代码前DOM是准备好的。关于dojo的相关信息，请参考https://developers.arcgis.com/javascript/3/jshelp/inside_dojo.html，https://developers.arcgis.com/javascript/3/jshelp/why_dojo.html。
这段代码的写法很奇怪，所有的代码都是写在require()中的。在这里，有两个参数。第一个是需要导入的模块数组，["module1","module2","module3",...,"module n"]。第二个参数是代码的关键部分，是一个匿名函数。需要实现的业务功能都要写在这个匿名函数的函数体中。函数需要参数，参数是下文中需要用到的类(class)，而使用这些类的前提是在前面已经导入了相应的模块。function(class1,class2,...,class n){ //to do }。
要习惯这种奇怪的写法，注意括号的匹配。
3.创建地图
这里需要先知道两个很重要的概念，Map和View。前面导入的两个模块"esri/Map"和"esri/views/MapView"就是为了提供这两个类的。
Map创建地图的内容，它决定要创建什么样的地图，显示什么内容。View是显示地图的窗口，Map只是创建了地图，有这个东西，但是如果要在HTML页面中显示，还是要通过View。举个例子，如果画一幅画，我知道要画些什么，就是我知道Map是什么。但是画在哪里，是纸上、竹子上、黑板上还是哪里，就是View决定的。
<script>
require([
"esri/Map",
"esri/views/MapView",
"dojo/domReady!"
],function(Map,MapView){
var map=new Map({
basemap:"streets"
});
10 });
</script>
这里，var map=new Map()创建一个Map对象。在构造函数中传入相关参数以设置Map实例的属性。这些参数要放在大括号{}中。这种构造函数的写法也很奇怪，要适应。
basemap是Map类的一个属性，决定了创建什么样子的地图，其他的选择还有：satellite,hybrid,topo,gray,dark-gray,oceans,osm,national-geographic。接触到Layer图层的知识后，basemap还可以是自己发布的地图服务等等。也可以是portal、ArcGIS Online里WebMap的id引用。
关于Map的其他属性，请查看参考文档：https://developers.arcgis.com/javascript/latest/api-reference/esri-Map.html。
可以使用Esri提供的沙盒(Sandbox)功能在线编辑查看：https://developers.arcgis.com/javascript/latest/sample-code/sandbox/index.html?sample=intro-mapview。
4.创建2D视图(view)
view是显示地图的窗口，但是view还是要寄托在HTML<div>标签上的，相当于<div>是view的一个载体，要不然view怎么知道在哪里显示呢？
<body>
<div id="viewDiv"></div>
</body>
要注意这里的id，后面会用到。
<script>
2 require([
"esri/Map",
"esri/views/MapView",
"dojo/domReady!"
],function(Map,MapView){
// 创建地图map
var map=new Map({
basemap:"streets"
}); // 创建视图view
var view=new MapView({
container:"viewDiv", // 对应div载体，viewDiv是其id
map:map, // 要显示的地图,前一个map是属性名，后一个map是前面创建的地图实例
center:[117,34], // 地图显示中心
zoom:4 // 缩放级别
});
19 });
</script>
这里，container和map都是MapView的属性。"viewDiv"是那个载体的id，map是前面创建的地图实例。
关于MapView的其他属性，请查看MapView的参考文档：https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html。
5.配置页面样式(style)
为了正确显示，设置页面css。
<style>
html,body,#viewDiv{
padding:0;
margin:0;
height:100%;
width:100%;
}
</style>
6.最终代码及运行效果
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<!-- 移动端优化 -->
<meta name="viewport" content="initial-scale=1,maximun-scale=1,user-scalable=no">
<title>Intro to MapView - Create a 2D map</title> <!-- JS API的引入 -->
<link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
<script src="https://js.arcgis.com/4.8/"></script> <script>
require([
"esri/Map",
"esri/views/MapView",
"dojo/domReady!"
],function(Map,MapView){
// 创建地图map
var map=new Map({
basemap:"streets"
}); // 创建视图view
var view=new MapView({
container:"viewDiv", // 对应div载体，viewDiv是其id
map:map, // 要显示的地图,前一个map是属性名，后一个map是前面创建的地图实例
center:[117,34], // 地图显示中心
zoom:4 // 缩放级别
});
});
</script> <style>
html,body,#viewDiv{
padding:0;
margin:0;
height:100%;
width:100%;
}
</style>
</head> <body>
<div id="viewDiv"></div>
</body>
</html>
二、Intro to SceneView(3D)
在自己的HTML页面中创建并显示一个3D地图（地球）。
显示3D地图与显示2D地图类似。
1.骨架代码
<!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</title> <!-- 引入JS API -->
<link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
<script src="https://js.arcgis.com/4.8/"></script> <script>
require([
"esri/Map",
"esri/views/SceneView", // 变动1
"dojo/domReady!"
],function(Map,SceneView){
// 创建地图
var map=new Map({
}); //创建视图
var view=new SceneView({ // 变动2
});
});
</script> <style>
html,body,#viewDiv{
padding:0;
margin:0;
height:100%;
width:100%;
}
</style>
</head> <body>
<div id="viewDiv"></div>
</body>
</html>
相比较显示2D地图，这里有两处变动。第一个变动是引入的视图模块，2D地图是"esri/views/MapView",而3D地图是"esri/views/SceneView"。第二个变动是function()中的类，2D地图是MapView，而3D地图是SceneView。也就是说MapView是承载2D地图的视图，而SceneView是承载3D地图的视图。Scene是场景的意思，即3D地图。
2.Map和SceneView代码
需要设置的属性和2D地图差不多，但也有不一样的地方。
1 var map=new Map({
2 basemap:"streets",
3 ground:"world-elevation" // 3D地图需要设置这个属性
4 });
5
6 //创建视图
7 var view=new SceneView({ // 变动2
8 container:"viewDiv",
9 map:map,
10 scale:50000000, //设置初始比例尺为 1:50,000,000
11 center:[117,34]
12 });
ground属性用于设置3D地图的地面属性(surface properties)，只在创建3D地图时设置。这里设置为"world-elevation"，设置了一个使用World Elevation Service的地面实例(ground instance)。
3.最终代码及运行效果
<!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</title> <!-- 引入JS API -->
<link rel="stylesheet" href="https://js.arcgis.com/4.8/esri/css/main.css">
<script src="https://js.arcgis.com/4.8/"></script> <script>
require([
"esri/Map",
"esri/views/SceneView", // 变动1
"dojo/domReady!"
],function(Map,SceneView){
// 创建地图
var map=new Map({
basemap:"streets",
ground:"world-elevation" // 3D地图需要设置这个属性
}); //创建视图
var view=new SceneView({ // 变动2
container:"viewDiv",
map:map,
scale:50000000, //设置初始比例尺为 1:50,000,000
center:[117,34]
});
});
</script> <style>
html,body,#viewDiv{
padding:0;
margin:0;
height:100%;
width:100%;
}
</style>
</head> <body>
<div id="viewDiv"></div>
</body>
</html>
【推荐文章：秋意正寒https://www.cnblogs.com/onsummer/p/9080463.html，https://www.cnblogs.com/onsummer/p/9085273.html】
[ArcGIS API for JavaScript 4.8] Sample Code-Get Started-MapView,SceneView简介的更多相关文章
- [ArcGIS API for JavaScript 4.8] Sample Code-Get Started-widgets简介
[官方文档:https://developers.arcgis.com/javascript/latest/sample-code/intro-widgets/index.html] 一.Intro ...
- [ArcGIS API for JavaScript 4.8] Sample Code-Get Started-layers简介
[官方文档:https://developers.arcgis.com/javascript/latest/sample-code/intro-layers/index.html] 一.Intro t ...
- [ArcGIS API for JavaScript 4.8] Sample Code-Popups-1-popupTemplate的概念和popup中属性字段值的多种表现形式
[官方文档:https://developers.arcgis.com/javascript/latest/sample-code/intro-popuptemplate/index.html] 一. ...
- [ArcGIS API for JavaScript 4.8] Sample Code-Get Started-popups简介
[官方文档:https://developers.arcgis.com/javascript/latest/sample-code/intro-popup/index.html] 一.Intro to ...
- 下载并部署 ArcGIS API for JavaScript 4.10
学习ArcGIS API for JavaScript 4.10 的第一步就是下载并部署该文件. 有的读者由于之间没接触过,不知道怎么下载和部署文件.这些读者要求作者详细的写一篇关于下载和部署的文章( ...
- ArcGIS API for JavaScript 4.2学习笔记[1] 显示地图
ArcGIS API for JavaScript 4.2直接从官网的Sample中学习,API Reference也是从官网翻译理解过来,鉴于网上截稿前还没有人发布过4.2的学习笔记,我就试试吧. ...
- ArcGIS API for JavaScript 4.4 版本加载谷歌地图
ArcGIS API for JavaScript 4.X 版本升级后,API发生了很大的变化. 其中就支持了WebEarth展示,主要是通过 esri/views/SceneView 实现的. 在新 ...
- 转：ArcGIS API For JavaScript官方文档（二十）之图形和要素图层——①Graphics概述
原文地址:ArcGIS API For JavaScript官方文档(二十)之图形和要素图层——①Graphics概述 ArcGIS JavaScript API允许在地图上绘制graphic(图形) ...
- arcgis api for JavaScript _加载三维图层(scene layer)
arcgis api for JavaScript _加载三维图层(scene layer) arcgis api for JavaScript 4.x 版本增加对三维的支持. 关于三维图层(sce ...
随机推荐
- Nordic nRF51/nRF52开发环境搭建
本文将详述Nordic nRF51系列(包括nRF51822/nRF51802/nRF51422等)和nRF52系列(包括nRF52832/nRF52810/nRF52840)开发环境搭建. 1. 强 ...
- redis两种持久化方法对比分析
1.前言 最近在项目中使用到Redis做缓存,方便多个业务进程之间共享数据.由于Redis的数据都存放在内存中,如果没有配置持久化,redis重启后数据就全丢失了,于是需要开启redis的持久化功能, ...
- 常用的HTML富文本编译器UEditor、CKEditor、TinyMCE、HTMLArea、eWebEditor、KindEditor简介
1.UEditor UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于BSD协议,允许自由使用和修改代码... 主要特点: 轻量级: ...
- Elasticsearch: 权威指南 » 深入搜索 » 多字段搜索 » 多数字段 good
跨字段实体搜索 » 多数字段编辑 全文搜索被称作是 召回率(Recall) 与 精确率(Precision) 的战场: 召回率 ——返回所有的相关文档:精确率 ——不返回无关文档.目的是在结果的 ...
- 2013-09-16 构建C1000K的服务器(1) – 基础
http://www.ideawu.net/blog/archives/740.html 著名的 C10K 问题提出的时候, 正是 2001 年, 到如今 12 年后的 2013 年, C10K 已经 ...
- linux下怎么样上传下载文件夹
Linux下目录复制:本机->远程服务器 scp -r /home/shaoxiaohu/test1 zhidao@192.168.0.1:/home/test2 test1为源目录,test2 ...
- kafka 三个配置文件
kafka的配置分为 broker.producter.consumer三个不同的配置 一 BROKER 的全局配置 最为核心的三个配置 broker.id.log.dir.zookeeper.c ...
- 从一个例子了解window.onload、$(function(){})、$(window).load(function(){})的加载顺序
最近遇到一个轮播需求: 1. ajax请求服务器,返回json,判断json数据里每一项中isFix属性是0还是1,0表示不轮播,1表示需要轮播. 2. 当isFix属性为0的时候,表示该图片不轮播, ...
- bzoj1547 周末晚会
我们要求方案数,还是旋转同构的,想burnside,如果我们能计算出转i位不变的满足条件的数量,那么这道题我们就解决了. 考虑转i位时,设tmp=gcd(i,n),那么就共有tmp个循环节. 当tmp ...
- POJ_3342_Party at Hali-Bula_树形DP
POJ_3342_Party at Hali-Bula_树形DP 题意:直接上司和本人不能同时参加,求最多参加人数,并回答是否唯一解. 分析:常规树形DP,需要再维护一下选/不选当前点取得最大值时是否 ...