为ArcGIS JavaScript Sandbox模板添加双模态面板并配置关联功能

Hey there! Let's break down exactly how to add and set up those modal panels in the ArcGIS JavaScript Sandbox template for layer management and parcel data display. I'll walk you through each part with practical code snippets you can drop right into the sandbox.

First, we'll start by adding the basic HTML structure for the modals directly in the sandbox's HTML section. We'll use simple, styled modal containers that work seamlessly with the ArcGIS JS map.

<!-- Add this inside the <body> tag, after the map div -->
<!-- Left Layer Modal -->
<div id="layerModal" class="modal">
  <div class="modal-content left-modal">
    <span class="close">&times;</span>
    <h3>Layer Management</h3>
    <div id="layerList"></div>
  </div>
</div>

<!-- Top Parcel Info Modal -->
<div id="parcelModal" class="modal">
  <div class="modal-content top-modal">
    <span class="close">&times;</span>
    <h3>Parcel Details</h3>
    <div id="parcelInfo"></div>
  </div>
</div>

<!-- Add some basic CSS to style the modals -->
<style>
.modal {
  display: none; /* Hidden by default */
  position: fixed;
  z-index: 1000; /* Ensure it's above the map */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0,0,0,0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 15px;
  padding: 20px;
  border: 1px solid #888;
  border-radius: 4px;
}

.left-modal {
  width: 280px;
  position: absolute;
  left: 0;
  top: 60px;
  height: calc(100% - 80px);
  overflow-y: auto;
}

.top-modal {
  width: 600px;
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}
</style>

Next, we'll add JavaScript to handle showing/hiding the modals, and populate them with data. In the sandbox's JavaScript section, we'll integrate this with ArcGIS JS API components like LayerList for the left panel, and feature layer click events for the parcel info.

Left Panel: Layer Management #

We'll use the ArcGIS JS LayerList widget to populate the left modal, so users can toggle layers on/off. Add this to your JavaScript:

require([
  "esri/Map",
  "esri/views/MapView",
  "esri/widgets/LayerList",
  "esri/layers/FeatureLayer"
], function(Map, MapView, LayerList, FeatureLayer) {
  // Initialize your map and view as usual
  const map = new Map({
    basemap: "topo-vector"
  });

  const view = new MapView({
    container: "viewDiv",
    map: map,
    zoom: 12,
    center: [-118.805, 34.027] // Example LA coordinates
  });

  // Add sample layers (replace with your own)
  const parcelsLayer = new FeatureLayer({
    url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/LA_County_Parcels/FeatureServer/0"
  });
  map.add(parcelsLayer);

  // Create LayerList widget
  const layerList = new LayerList({
    view: view,
    listItemCreatedFunction: function(event) {
      const item = event.item;
      item.panel = {
        content: "legend",
        open: true
      };
    }
  });

  // Get modal elements
  const layerModal = document.getElementById("layerModal");
  const layerCloseBtn = document.querySelector("#layerModal .close");
  // Add a button to open the layer modal (add this HTML to your page too)
  const openLayerBtn = document.createElement("button");
  openLayerBtn.innerHTML = "Layers";
  openLayerBtn.style.position = "absolute";
  openLayerBtn.style.top = "10px";
  openLayerBtn.style.left = "10px";
  openLayerBtn.style.zIndex = "999";
  document.body.appendChild(openLayerBtn);

  // Wire up modal events
  openLayerBtn.onclick = function() {
    layerModal.style.display = "block";
    // Add LayerList to modal if not already added
    if (!document.getElementById("layerList").hasChildNodes()) {
      document.getElementById("layerList").appendChild(layerList.domNode);
    }
  }

  layerCloseBtn.onclick = function() {
    layerModal.style.display = "none";
  }

  // Close modal when clicking outside
  window.onclick = function(event) {
    if (event.target == layerModal || event.target == parcelModal) {
      event.target.style.display = "none";
    }
  }

Top Panel: Parcel Information #

Now we'll set up the top modal to show parcel details when a user clicks on a parcel feature. Add this to the same JavaScript block:

// Handle parcel click events
  view.on("click", function(event) {
    view.hitTest(event).then(function(response) {
      if (response.results.length > 0) {
        const feature = response.results[0].graphic;
        if (feature.layer === parcelsLayer) {
          // Populate parcel info
          let infoHtml = "<ul>";
          for (let attr in feature.attributes) {
            if (feature.attributes.hasOwnProperty(attr)) {
              infoHtml += `<li><strong>${attr}:</strong> ${feature.attributes[attr]}</li>`;
            }
          }
          infoHtml += "</ul>";
          document.getElementById("parcelInfo").innerHTML = infoHtml;

          // Open the parcel modal
          const parcelModal = document.getElementById("parcelModal");
          parcelModal.style.display = "block";
          const parcelCloseBtn = document.querySelector("#parcelModal .close");
          parcelCloseBtn.onclick = function() {
            parcelModal.style.display = "none";
          }
        }
      }
    });
  });
});

Quick Notes #

• Make sure to replace the sample parcel layer URL with your actual layer service URL.
• You can customize the modal styles (colors, sizes, positions) by tweaking the CSS to match your needs.
• The LayerList widget comes with built-in layer toggle and legend support, which saves you from building those controls from scratch.

内容的提问来源于stack exchange，提问作者userPyGeo