ArcGIS for JavaScript 根據 Graphic 幾何範圍自動縮放地圖

需求場景

在 ArcGIS API for JavaScript 中，根據一個或多個 esri.Graphic 的幾何範圍，自動調整 esri.Map 的縮放級別與中心點，使所有圖形完整顯示在可視區域內。

核心代碼實現

// 1. 定義符號樣式（可選）
var symbol = new esri.symbol.SimpleFillSymbol(
  esri.symbol.SimpleFillSymbol.STYLE_SOLID,
  new esri.symbol.SimpleLineSymbol(
    esri.symbol.SimpleLineSymbol.STYLE_SOLID,
    new dojo.Color([255, 255, 255, 0.35]), 1
  ),
  new dojo.Color([125, 125, 125, 0.35])
);

// 2. 創建圖形幾何體（以圓為例）
var judgeCircle = new esri.geometry.Circle({
  center: pointCenter,      // esri.geometry.Point
  geodesic: true,           // 大地測量模式
  radius: valuerd * 1000    // 半徑（米）
});

// 3. 構建 Graphic 並添加到地圖圖形層
var graphicCircle = new esri.Graphic(judgeCircle, symbol);
map.graphics.add(graphicCircle);

// 4. 關鍵步驟：根據幾何體範圍自動縮放
map.setExtent(judgeCircle.getExtent());

關鍵點解析

• geometry.getExtent()：返回該幾何體的外包矩形（esri.geometry.Extent），包含 xmin, ymin, xmax, ymax 及空間參考。
• map.setExtent(extent)：將地圖視野設置為指定範圍，API 內部會自動計算合適的縮放級別（Level）並居中顯示。
• 若有多個 Graphic，可先遍歷收集所有幾何體，利用 esri.graphicsExtent(graphics) 獲取聯合範圍，再調用 map.setExtent()。

進階：多圖形聯合縮放

var graphics = map.graphics.graphics; // 獲取所有圖形
if (graphics.length > 0) {
  var fullExtent = esri.graphicsExtent(graphics);
  // 可選：適當擴大範圍，避免邊緣貼邊
  fullExtent = fullExtent.expand(1.2);
  map.setExtent(fullExtent);
}

注意事項

1. 確保地圖已加載完成（map.on("load", ...)）後再調用 setExtent。
2. 若圖形空間參考與地圖不一致，需先投影（esri.geometry.project）。
3. API 版本差異：3.x 與 4.x 寫法略有不同，本文基於 3.x 風格；4.x 建議使用 MapView.goTo()。