写在前面
本笔记各标记
- 二级标题为本篇主题
- 三级标题为该块主题（一般包括）
- 代码注释
- 完整代码
- 进一步学习内容
Intro to SceneView - Create a 3D map
代码注释
<meta charset="utf-8">
- meta: 提供有关页面的元信息
- charset: 字符编码
<link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">
- rel: 规定当前文档与被连接文档之间的关系
- stylesheet: 样式表
<script>
require([
"esri/Map",
"esri/views/SceneView",
"dojo/domReady!"
], function(Map, SceneView) {
// Code to create the map and view will go here
});
</script>
- dojo/domReady!: 确保在执行代码之前DOM可用。
In addition to dojo/domReady! (the bang or exclamation point denotes that domReady is an AMD loader plug-in), Dojo also provides dojo/ready
. The difference between domReady! and ready is that the former waits to fire the callback provided to require until the DOM is available while the latter waits for the DOM to be ready and waits for all outstanding require calls to finish. For more information, see the Dojo documentation for dojo/ready. In simple cases, dojo/domReady! should be used. If an app uses parseOnLoad: true
, Dojo Dijits, widgets from the Esri library, or custom dijits, dojo/ready should be used.
完整代码
<!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>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">
<script src="https://js.arcgis.com/4.5/"></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", // Reference to the scene div created in step 5
map: map, // Reference to the map object created before the scene
scale: 50000000, // Sets the initial scale to 1:50,000,000
center: [-101.17, 21.78] // Sets the center point of view with lon/lat
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
扩展
- 学习Map
- 学习views/SceneView
- 学习DOJO
Intro to layers
代码注释
var housingLyr = new TileLayer({
url: "https://tiles.arcgis.com/tiles/nGt4QxSblgDfeJn9/arcgis/rest/services/New_York_Housing_Density/MapServer",
id: "ny-housing",
opacity: 0.9
});
- url: 连接一个地图底图服务
- id: 地图图层的id，便于之后调用
- visible: 默认是true
- opacity: 不透明度
var map = new Map({
basemap: "oceans",
layers: [housingLyr]
});
map.add(transportationLyr);
- 添加图层的方式，第一种是直接在底图创建时，用数组的方式加入，另一种是使用map.add()函数
var view = new SceneView({
container: "viewDiv",
map: map
});
- SceneView
- map: An instance of Map or WebScene
- container: DOM元素的id，必须是一个真实的DOM元素
view.on("layerview-create", function(event) {
if (event.layer.id === "ny-housing") {
// Explore the properties of the population layer's layer view here
console.log("LayerView for male population created!", event.layerView);
}
if (event.layer.id === "streets") {
// Explore the properties of the transportation layer's layer view here
// Explore the properties of the transportation layer's layer view here
console.log("LayerView for streets created!", event.layerView);
}
});
- dojo/on or dojo/view : On method(绑定事件类型Events summary table和触发的事件):
- on(type, modifiersOrHandler, handler)
- type: the name of event or the events to listen for，including
- modifiersOrHandler: string[] or Function : eg: ["shift"] or function()
- Handler: function()
- on(type, modifiersOrHandler, handler)
- layerview-create: Fires after each layer in the map has a corresponding layerView created and rendered in the view.
view.then(function() {
housingLyr.then(function() {
view.goTo(housingLyr.fullExtent);
});
});
- Layer.then() and View.then(): Parameters include callback(The function to call when the promise resolves),errback,progback
完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Intro to layers - 4.5</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.5/esri/css/main.css">
<script src="https://js.arcgis.com/4.5/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#layerToggle {
top: 20px;
right: 20px;
position: absolute;
z-index: 99;
background-color: white;
border-radius: 8px;
padding: 10px;
opacity: 0.75;
}
</style>
<script>
require([
"esri/Map",
"esri/views/SceneView",
"esri/layers/TileLayer",
"dojo/dom",
"dojo/on",
"dojo/domReady!"
],
function(
Map, SceneView, TileLayer, dom, on
) {
/*****************************************************************
* Create two TileLayer instances. One pointing to a
* cached map service depicting U.S. male population and the other
* pointing to a layer of roads and highways.
*****************************************************************/
var transportationLyr = new TileLayer({
url: "https://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Transportation/MapServer",
// This property can be used to uniquely identify the layer
id: "streets",
visible: false
});
var housingLyr = new TileLayer({
url: "https://tiles.arcgis.com/tiles/nGt4QxSblgDfeJn9/arcgis/rest/services/New_York_Housing_Density/MapServer",
id: "ny-housing",
opacity: 0.9
});
/*****************************************************************
* Layers may be added to the map in the map's constructor
*****************************************************************/
var map = new Map({
basemap: "oceans",
layers: [housingLyr]
});
/*****************************************************************
* Or they may be added to the map using map.add()
*****************************************************************/
map.add(transportationLyr);
var view = new SceneView({
container: "viewDiv",
map: map
});
/*****************************************************************
* The map handles the layers' data while the view and layer views
* take care of renderering the layers
*****************************************************************/
view.on("layerview-create", function(event) {
if (event.layer.id === "ny-housing") {
// Explore the properties of the population layer's layer view here
console.log("LayerView for male population created!", event.layerView);
}
if (event.layer.id === "streets") {
// Explore the properties of the transportation layer's layer view here
// Explore the properties of the transportation layer's layer view here
console.log("LayerView for streets created!", event.layerView);
}
});
/*****************************************************************
* Layers are promises that resolve when loaded, or when all their
* properties may be accessed. Once the population layer has loaded,
* the view will animate to it's initial extent.
*****************************************************************/
view.then(function() {
housingLyr.then(function() {
view.goTo(housingLyr.fullExtent);
});
});
var streetsLyrToggle = dom.byId("streetsLyr");
/*****************************************************************
* The visible property on the layer can be used to toggle the
* layer's visibility in the view. When the visibility is turned off
* the layer is still part of the map, which means you can access
* its properties and perform analysis even though it isn't visible.
*******************************************************************/
on(streetsLyrToggle, "change", function() {
transportationLyr.visible = streetsLyrToggle.checked;
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
<span id="layerToggle">
<input type="checkbox" id="streetsLyr"> Transportation
</span>
</body>
</html>
