ArcGIS API for JavaScript 4.9学习笔记一(创建2D/3D地图)
2D:
代码:
<!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>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">
<script src="https://js.arcgis.com/4.9/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView"
], function(Map, MapView){
var map = new Map({
basemap: "streets"
});
var view = new MapView({
container: "viewDiv", // Reference to the scene div created in step 5
map: map, // Reference to the map object created before the scene
zoom: 4, // Sets zoom level based on level of detail (LOD)
center: [15, 65] // Sets center point of view using longitude,latitude
});
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
代码解读:
-
引入CDN上托管的文件:
<link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css"> <script src="https://js.arcgis.com/4.9/"></script>
-
require函数
require([ "esri/Map", "esri/views/MapView" ], function(Map, MapView){ var map = new Map({ basemap: "streets" }); var view = new MapView({ container: "viewDiv", // Reference to the scene div created in step 5 map: map, // Reference to the map object created before the scene zoom: 4, // Sets zoom level based on level of detail (LOD) center: [15, 65] // Sets center point of view using longitude,latitude }); }); </script>
1.require入口函数的第一个参数是一个数组,与Java中的#import类似,是对第二个参数所需要的功能进行引用,第二个参数是一个函数,注意前后加载的功能一定要一致,如加载的第一个参数是“esri Map",那么,回调函数中第一个参数必须是“Map”。
2.Map中有basemap属性,可供选择地图样式
ESRI提供的底图样式有:streets ,satellite ,hybrid, topo, gray,dark-gray, oceans, national-geographic,terrain, osm, dark-gray-vector, gray-vector,streets-vector, streets-night-vector, streets-relief-vector, streets-navigation-vector,topo-vector.terrain, dark-gray, dark-gray-vector, gray-vector, streets-vector,streets-night-vector, streets-relief-vector, streets-navigation-vector , topo-vector等
3.回调函数的第二个参数中传入了一个视图,视图有两种类型MapView(用于查看2D地图)和SceneView(用于查看3D地图)。
- 在MapView中container用于绑定给地图提供的DIV id,** 不需要写# **
- map用于绑定上面创建的map模块
- zoom用于设置缩放的级别(3~18)
- center以经纬度来是设置地图中心
3D:
代码:
<!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.9/esri/css/main.css">
<script src="https://js.arcgis.com/4.9/"></script>
<script>
require([
"esri/Map",
"esri/views/SceneView"
], 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>
与2D不同,3D示例代码中回调函数new了一个SceneView构造函数(这也是在创建2D地图与3D地图的最大不同之处),构造函数中的使用scale定义比例尺。