使用 ArcGIS JavaScript API 4.0,我想在单击列表项时更改 ArcGIS webmap 视图。
我想为 extA、extB、extC 等定义不同的范围。
我已经尝试了下面的代码,但我无法得到它。
require([
"esri/views/MapView",
"esri/WebMap",
"esri/widgets/Compass",
"esri/widgets/Search",
"esri/widgets/BasemapToggle",
"esri/widgets/Home",
"esri/layers/FeatureLayer",
"esri/geometry/Extent",
"esri/geometry/SpatialReference",
"dojo/dom-construct",
"dojo/domReady!"
], function(
MapView, WebMap, Compass, Search, BasemapToggle, Home, FeatureLayer, Extent, SpatialReference, domConstruct
) {
var webmap = new WebMap({
portalItem: { // autocasts as new PortalItem()
id: "b3e185396c874f939265fcfc54d4909c"
}
});
var view = new MapView({
map: webmap,
container: "viewDiv",
extent: { // autocasts as new Extent()
xmin: 29.00,
ymin: 32.00,
xmax: 42.00,
ymax: 46.00,
spatialReference: 4326
}
});
document.getElementById("extA").addEventListener("click", function(){
var extA = new Extent((25.77392578125, 38.03466796875, 31.300048828125, 42.9345703125, new SpatialReference({wkid:4326})), false);
var viewupd = new MapView({
map: webmap,
container: "viewDiv",
extent: extA
});
view: viewupd
});
<html lang="en" class="no-js demo">
<head>
<link rel="stylesheet" href="https://js.arcgis.com/4.0/esri/css/main.css">
<link rel="stylesheet" href="https://js.arcgis.com/4.0/esri/css/calcite/calcite.css">
<script src="https://js.arcgis.com/4.0/"></script>
</head>
<body>
<div class="item">
<div class="side">
<ul class='menu'>
<li id="extA"><a href="#">extent A</a></li>
<li id="extB"><a href="#">extent B</a></li>
<li id="extC"><a href="#">extent C</a></li>
<li id="extD"><a href="#">extent D</a></li>
<li id="extE"><a href="#">extent E</a></li>
</ul>
</div>
<div class="side">
<div id="viewDiv"></div>
</div>
</div>
https://developers.arcgis.com/javascript/latest/api-reference/esri-geometry-Extent.html