ArcGIS JSAPI 學習教程 - 可視域分析圖層介紹-創建與編輯
- 完整代碼
- 在線示例
本文主要介紹一下可視域分析圖層介紹。
arcgis js 新版本更新了可視域分析圖層類，相對於之前的用法，操作起來更加方便。
本文主要介紹一下，可視域圖層的創建、編輯與創建可視域分析。
本文包括 完整代碼以及在線示例。
完整代碼
<html>
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"/>
<title>
可視域分析多圖層 | ArcGIS API for JavaScript 4.33
</title>
<style>
html,
body {
padding: 0;
margin: 0;
height: 100%;
}
#viewDiv .esri-attribution {
display: none;
}
#myCustomGroup {
position: absolute;
top: 150px;
left: 64px;
}
</style>
<script type="module" src="https://openlayers.vip/arcgis_api/calcite-components/2.8.1/calcite.esm.js"></script>
<link rel="stylesheet" href="https://openlayers.vip/arcgis_api/4.33/esri/themes/light/main.css"/>
<script src="https://openlayers.vip/arcgis_api/4.33/init.js"></script>
<script>
var _hmt = _hmt || [];
(function () {
var hm = document.createElement("script");
hm.src = "https://hm.baidu.com/hm.js?f80a36f14f8a73bb0f82e0fdbcee3058";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<script>
require([
"esri/Map",
"esri/views/SceneView",
'esri/layers/IntegratedMeshLayer',
'esri/layers/ViewshedLayer',
'esri/analysis/ViewshedAnalysis',
'esri/analysis/Viewshed',
"esri/geometry/Point",
'esri/widgets/LayerList'], (
Map,
SceneView,
IntegratedMeshLayer,
ViewshedLayer,
ViewshedAnalysis,
Viewshed,
Point,
LayerList
) => {
// 創建傾斜攝影
var layer = new IntegratedMeshLayer({
title: '傾斜攝影圖層',
url: "https://gs3d.geosceneonline.cn/server/rest/services/Hosted/hk1/SceneServer",
});
// 創建場景
const map = new Map({
layers: [layer],
});
// 創建可視域分析對象
const viewshedAnalysis = new ViewshedAnalysis({
viewsheds: [
// 可視域對象
new Viewshed({
// 觀察點
observer: new Point({
spatialReference: {
latestWkid: 3857,
wkid: 102100,
},
x: 12710561.590172164,
y: 2541654.800844678,
z: 80.210722059971886,
}),
// 可視域參數
farDistance: 300,
heading: 64,
tilt: 84,
// 可視域觀察角度
horizontalFieldOfView: 360,
verticalFieldOfView: 180,
})
]
});
// 創建可視域圖層
const viewshedLayer = new ViewshedLayer({
// 可視域分析對象
title: '可視域分析',
});
// 創建可視域圖層
const viewshedLayerSphere = new ViewshedLayer({
// 可視域分析對象
source: viewshedAnalysis,
title: '球形可視域分析',
});
// 添加到地圖彙總
map.add(viewshedLayer);
map.add(viewshedLayerSphere);
const view = new SceneView({
container: "viewDiv",
map: map
});
view.when(function () {
view.extent = layer.fullExtent;
})
// 開啓編輯
view.whenLayerView(viewshedLayerSphere).then(
// 可視域圖層視圖
function (viewshedLayerView_) {
// 開啓交互編輯
viewshedLayerView_.interactive = true;
}
)
let viewshedLayerView;
view.whenLayerView(viewshedLayer).then(
// 可視域圖層視圖
function (viewshedLayerView_) {
viewshedLayerView = viewshedLayerView_;
}
)
let activateCreateViewsheds = true;
// Toggle button to enable/disable the custom render node
const renderNodeToggle = document.getElementById("renderNodeToggle");
renderNodeToggle.addEventListener("calciteSwitchChange", () => {
// 開啓標繪創建可視域
if (activateCreateViewsheds) {
viewshedLayerView?.createViewsheds();
} else {
viewshedLayerView.interactive = false;
}
activateCreateViewsheds = !activateCreateViewsheds;
});
const layerList = new LayerList({
view: view
});
view.ui.add(layerList, {
position: "top-left",
index: 0
});
});
</script>
</head>
<body>
<div id="viewDiv" style="float: left; width: 100%; height: 100%">
</div>
<div id="myCustomGroup">
<calcite-block open heading="是否開啓可視域繪製" id="renderNodeUI">
<calcite-label layout="inline">
關閉
<calcite-switch id="renderNodeToggle"></calcite-switch>
開啓
</calcite-label>
</calcite-block>
</div>
</body>
</html>
在線示例
ArcGIS Maps SDK for JavaScript 在線示例：可視域分析圖層介紹
