开始ArcGIS JS开发之旅--创建一个 2D/3D 地图
商飞翮
要创建一个地图应用，首先我们要先创建一个包含底图的地图。
本文将创建一个 2D/3D 的地图，展示一个居中于加州的圣莫妮卡山脉的底图。
先把HTML框架填上，并把我们要用的JS库和CSS库连接上：“https://js.arcgis.com/4.15/esri/css/main.css”，“https://js.arcgis.com/4.15/”。
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>ArcGIS API for JavaScript Hello World App</title>
<style>
html, body, #viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<link rel="stylesheet" href="https://js.arcgis.com/4.15/esri/css/main.css">
<script src="https://js.arcgis.com/4.15/"></script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
然后我们来写 展示2D底图的JS代码。
创建一个 Map，这里用的是 “topo-vector”；再创建一个 MapView 用来展示你的 Map，container 填写你放地图的 html id；center是底图中心，zoom 是缩放。
<script>
require([
"esri/Map",
"esri/views/MapView"
], function(Map, MapView) {
var map = new Map({
basemap: "topo-vector"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-118.80500, 34.02700], // longitude, latitude
zoom: 13
});
});
</script>
然后我们来写 展示3D场景的JS代码。
同样，3D 的不同在于中心变成了 position，z 就是海拔，tilt 是观看角度。
<script>
require([
"esri/Map",
"esri/views/SceneView"
], function(Map, SceneView) {
var map = new Map({
basemap: "topo-vector",
ground: "world-elevation" // show elevation
});
var view = new SceneView({
container: "viewDiv",
map: map,
camera: {
position: { // observation point
x: -118.80800,
y: 33.96100,
z: 25000 // altitude in meters
},
tilt: 65 // perspective in degrees
}
});
});
</script>
底图的选择也是有很多的，在上面的例子里我们用的 basemap 都是 “topo-vector”；除此之外，还可以选择 light-gray-vector，dark-gray-vector, satellite, streets-relief-vector, and streets-navigation-vector 等。
也可以在应用中同时加两个底图，然后进行选择。
require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/BasemapToggle",
"esri/widgets/BasemapGallery"
], function(Map, MapView, BasemapToggle, BasemapGallery) {
var map = new Map({
basemap: "dark-gray-vector"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-118.71511, 34.09042],
zoom: 11
});
var basemapToggle = new BasemapToggle({
view: view,
nextBasemap: "satellite"
});
view.ui.add(basemapToggle, "bottom-right");
}）；
或者使用 ArcGIS Online Group 的底图进行选择。
require([
"esri/Map",
"esri/views/MapView",
"esri/widgets/BasemapToggle",
"esri/widgets/BasemapGallery"
], function(Map, MapView, BasemapToggle, BasemapGallery) {
var map = new Map({
basemap: "dark-gray-vector"
});
var basemapGallery = new BasemapGallery({
view: view,
source: {
portal: {
url: "https://www.arcgis.com",
useVectorBasemaps: true // 加载 vector 底图，如果写 false 就是加载 raster 底图
}
}
});
view.ui.add(basemapGallery, "top-right");
}）；
就到这里啦，下章开始往底图上加特征层。
类似资料：