1、HMTL 页面
## index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>第八讲-SceneView</title>
<link rel="stylesheet" href="http://127.0.0.1/arcgis_js_api/4.15/esri/css/main.css">
<link rel="stylesheet" href="css/index.css">
<script src="http://127.0.0.1/arcgis_js_api/4.15/init.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
2、样式设置
## index.css
html,
body {
height: 100%;
width: 100%;
padding: 0;
margin: 0;
}
#viewDiv {
height: 100%;
width: 100%;
}
.tool-btn {
position: absolute;
top: 20px;
right: 20px;
}
3、Javascript API 实现地图绘制
## index.js
require([
"esri/Map",
"esri/views/SceneView",
"esri/layers/MapImageLayer",
"esri/layers/TileLayer",
"esri/layers/ElevationLayer"
], function(Map, SceneView, MapImageLayer, TileLayer, ElevationLayer) {
var worldCities = new MapImageLayer({
url: "http://127.0.0.1:6080/arcgis/rest/services//SampleWorldCities/MapServer"
});
var nmgXzqhTileLayer = new TileLayer({
url: "http://127.0.0.1:6080/arcgis/rest/services/NMGXZQH/MapServer"
});
var worldCitiesTileLayer = new TileLayer({
url: "http://127.0.0.1:6080/arcgis/rest/services//SampleWorldCities/MapServer"
});
var nmgXzqhTileLayer = new TileLayer({
url: "http://127.0.0.1:6080/arcgis/rest/services/NMGXZQH/MapServer"
});
var nmg30dem = new ElevationLayer({
url: "http://127.0.0.1:6080/arcgis/rest/services/nm_dem_30m_w/ImageServer"
});
var map = new Map({
// basemap: "satellite"
// basemap: "osm"
// basemap: "streets"
basemap: "hybrid",
// ground: "world-elevation",
// layers: [nmgXzqhTileLayer]
ground: {
layers: [nmg30dem]
},
layers: []
});
// map.ground.layers.add(nmg30dem);
var view = new SceneView({
container: "viewDiv",
map: map,
center: [111.43, 40.85],
zoom: 10
});
});
4、实现效果
