我正在用 javascript API 開發一個專案，我正在開發視線小部件，在我的代碼中，觀察者設定在現有建筑物的上層。此外，它還顯示了如果在其前面建造了新建筑物，觀察者的視線將如何受到阻礙。
但是在我的代碼中，當我改變觀察者在地圖上的方向或位置時，它不會產生任何影響。任何解決方法或想法？
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.21/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.21/"></script>
<script>
require([
"esri/WebScene",
"esri/views/SceneView",
"esri/widgets/LineOfSight",
"esri/widgets/Expand",
"esri/geometry/Point",
"esri/Graphic",
"esri/core/watchUtils"
], (
WebScene,
SceneView,
LineOfSight,
Expand,
Point,
Graphic,
watchUtils
) => {
const scene = new WebScene({
portalItem: {
id: "82127fea11d6439abba3318cb93252f7"
}
});
const view = new SceneView({
map: scene,
container: "viewDiv"
});
const lineOfSight = new LineOfSight({
view: view,
container: "losWidget"
});
const viewModel = lineOfSight.viewModel;
const intersectionSymbol = {
type: "point-3d",
symbolLayers: [
{
type: "object",
resource: { primitive: "inverted-cone" },
material: { color: [255, 100, 100] },
height: 10,
depth: 10,
width: 10,
anchor: "relative",
anchorPosition: { x: 0, y: 0, z: -0.7 }
}
]
};
function setIntersectionMarkers() {
view.graphics.removeAll();
viewModel.targets.forEach((target) => {
if (target.intersectedLocation) {
const graphic = new Graphic({
symbol: intersectionSymbol,
geometry: target.intersectedLocation
});
view.graphics.add(graphic);
}
});
}
viewModel.observer = new Point({
latitude: 42.3521,
longitude: -71.0564,
z: 139
});
viewModel.targets = [
createTarget(42.3492, -71.0529),
createTarget(42.3477, -71.0542),
createTarget(42.3485, -71.0533),
createTarget(42.3467, -71.0549)
];
function createTarget(lat, lon, z) {
return {
location: new Point({
latitude: lat,
longitude: lon,
z: z || 0
})
};
}
viewModel.start();
watchUtils.whenEqualOnce(viewModel, "state", "creating", () => {
viewModel.stop();
});
const expand = new Expand({
expandTooltip: "Expand line of sight widget",
view: view,
content: document.getElementById("menu"),
expanded: true
});
view.ui.add(expand, "top-right");
view.when(() => {
const plannedBuildingsLayer = view.map.layers
.filter((layer) => {
return (
layer.title === "Boston major projects - MajorProjectsBuildings"
);
})
.getItemAt(0);
document
.getElementById("layerVisibility")
.addEventListener("change", (event) => {
plannedBuildingsLayer.visible = event.target.checked;
});
});
});
</script>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
#menu {
padding: 1em;
}
</style>
</head>
<body>
<div id="viewDiv">
<div id="viewDiv">
<div id="menu" class="esri-widget">
<h3>Line of sight analysis</h3>
<input type="checkbox" id="layerVisibility" checked /><label
for="layerVisibility"
>Show development layer</label
>
<div id="losWidget"></div>
</div>
</div>
</div>
</body>
</html>
uj5u.com熱心網友回復：
你沒有包括代碼，當觀察者位置發生變化時，以及何時添加或洗掉新目標。
請按如下方式更新您的代碼：
viewModel.watch("observer", (value) => {
setIntersectionMarkers();
});
viewModel.targets.on("change", (event) => {
event.added.forEach((target) => {
setIntersectionMarkers();
// for each target watch when the intersection changes
target.watch("intersectedLocation", setIntersectionMarkers);
});
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/336593.html