使用arcgis 画3D行政区划需要使用 SceneView这种视图方式,个人认为需要注意的两个属性camera、viewingMode
- 使用
camera来调整地图在屏幕中的位置需要注意
viewingMode来调整地图的视图方式有两个对应的参数local 和 global默认是global
具体使用方法可以看下api 文档
视图调整完毕后我们使用polygon-3d来创建我们行政区划,polygon-3d中有很多类型的面
这里我们用到的是ExtrudeSymbol3DLayer 它可以创建有高度的图形只需要调整它的size就OK 了
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<title>3D行政区划</title>
<link rel="stylesheet" href="https://js.arcgis.com/4.20/esri/themes/light/main.css" />
<script src="https://js.arcgis.com/4.20/"></script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script>
require([
"esri/Map",
"esri/views/SceneView",
"esri/layers/GeoJSONLayer"
], function (Map, SceneView, GeoJSONLayer) {
// 初始化地图
const map = new Map({
basemap: "satellite"
});
// 初始化3D视图
const sceneView = new SceneView({
container:'viewDiv',
camera: {
position: [119.232248,27.449448,114000],
tilt: 75,
fov:85
},
map:map,
viewingMode:'local'
})
// 加载杭州市区划
const hzsLayer = new GeoJSONLayer({
url: 'https://geo.datav.aliyun.com/areas_v3/bound/330100_full.json',
id: "hzsLayer",
popupEnabled: false,
renderer: {
type: 'simple',
symbol: {
type: "polygon-3d", // autocasts as new PolygonSymbol3D()
symbolLayers: [{
type: "extrude", // autocasts as new ExtrudeSymbol3DLayer()
size: 5000, // Height of the extrusion in meters
material: { color: { r: 33, g: 130, b: 255, a: .8} },
edges: {
type: "solid", // autocasts as new SolidEdges3D()
color: [255, 255, 255, 1]
},
}]
}
}
});
map.add(hzsLayer)
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
