# ArcGIS API 升級4.X程式碼對照

### graphicsExtent、getCenter

// 原 3.X
var ext = esri.graphicsExtent(tempLyr.graphics);
var point = ext.getCenter();

// 修正後 4.X
var ext = lyr.graphics.getItemAt(0).geometry.extent;
lyr.graphics.forEach((graphic) => {
  let gextent = graphic.geometry.extent;
  if (!gextent.equals(ext)) {//this should only skip the first one
    ext = ext.union(gextent);
  }
});
var point = ext.center;

---
### SimpleLineSymbol

// 原 3.X
var polylineSymbol = new esri.SimpleLineSymbol(
  esri.SimpleLineSymbol.STYLE_SOLID,
  new dojo.Color([204, 90, 76]),
  4
);
graphic.setSymbol(polylineSymbol);

// 修正後 4.X
let polylineSymbol = {
  type: "simple-line",  // autocasts as new SimpleLineSymbol()
  color: [204, 90, 76],
  width: "4",
  style: "solid"
};
graphic.symbol = polylineSymbol;

---
### SimpleMarkerSymbol

// 原 3.X
var symbol = new esri.SimpleMarkerSymbol(
  "square",
  10,
  new esri.SimpleLineSymbol(),
  new dojo.Color([0, 255, 0, 0.75])
);

// 修正後 4.X
let symbol = {
  type: "simple-marker",  // autocasts as new SimpleMarkerSymbol()
  style: "square",
  color: [0, 255, 0, 0.75],
  size: "10",  // pixels
  outline: {  // autocasts as new SimpleLineSymbol()
    color: [255, 255, 0],
    width: 0  // points
  }
};

---
### SimpleFillSymbol

// 原 3.X
graphic.setSymbol(
  new esri.SimpleFillSymbol().set(
    "color",
    new dojo.Color([255, 255, 0, 0.25])
  )
);

// 修正後 4.X
let symbol = {
  type: "simple-fill",  // autocasts as new SimpleFillSymbol()
  color: [255, 255, 0, 0.25],
  style: "solid",
};
graphic.symbol = symbol;

---
### queryTask.execute CallBack

// 原 3.X
queryTask.execute(query, showResults);

// 修正後 4.X
queryTask.execute(query).then(function (results) {
  showResults(results);
}); 

---
### centerAt、setExtent、setLevel

// 原 3.X
map.centerAt(centroid);
map.setExtent(newExtent);
map.setLevel(14);

// 修正後 4.X
mapView.goTo(centroid);
mapView.goTo(newExtent);
mapView.zoom = 14;

---
### popup、infoWindow、setInfoTemplate

// 原 3.X
map.popup.removeAll();
map.infoWindow.clearFeatures();
map.infoWindow.visible = false;
map.infoWindow.setContent(
      '<div style="display: block;" class="loading-content"><div class="lds-css ng-scope"><div style="width: 100%; height: 100%" class="lds-ellipsis"><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div></div></div></div>'
    );
var g_template = new esri.InfoTemplate(g_titleHtml, g_contentHtml);
obj.setInfoTemplate(g_template);

// 修正後 4.X
mapView.popup.clear();
mapView.popup.features = [];
mapView.popup.set("visible", false);
mapView.popup.content = '<div style="display: block;" class="loading-content"><div class="lds-css ng-scope"><div style="width: 100%; height: 100%" class="lds-ellipsis"><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div><div><div></div></div></div></div></div>';
var g_template = new esri.PopupTemplate({
  title: g_titleHtml,
  content: g_contentHtml
});
obj.popupTemplate = g_template;

---
### setInfoTemplate、setFeatures、show

// 原 3.X
var template = new esri.InfoTemplate(
  eval(popupName_t),
  eval(popupName_c)
);
map.infoWindow.setFeatures(deferArr);
map.infoWindow.show(evt.mapPoint);

// 修正後 4.X
var template = new esri.PopupTemplate({
  title: eval(popupName_t),
  content: eval(popupName_c)
});
mapView.popup.features = deferArr;
mapView.popup.viewModel.location = evt.mapPoint;

---
### map coordinates

// 原 3.X
document.getElementById(Id_Coordinates).innerHTML =
    "坐標 TWD97： X=" + evt.x.toFixed(0) + ", Y=" + evt.y.toFixed(0);

// 修正後 4.X
var point = mapView.toMap({ x: evt.x, y: evt.y })
document.getElementById(Id_Coordinates).innerHTML =
    "坐標 TWD97： X=" + point.x.toFixed(0) + ", Y=" + point.y.toFixed(0);

---
### layerid

// 原 3.X
var index = map.layerIds.indexOf("afasi_image");

// 修正後 4.X
var index = map.layers.items.map(o => o.id).indexOf("afasi_image");

---
### setVisibility、setOpacity、suspend

// 原 3.X
lyr.setVisibility(newVisible);
lyr.setOpacity(opacityValue);
lyr.suspend();

// 修正後 4.X
lyr.visible = newVisible;
lyr.opacity = opacityValue;
lyr.suspended = true;

---
### add、removeLayer

// 原 3.X
map.add(layer);
map.removeLayer(tocLayers[idx][0]);
var x = map.extent.getCenter().x.toString();
var y = map.extent.getCenter().y.toString();
var level = map.getLevel().toString();

// 修正後 4.X
map.layers.add(layer);
map.layers.remove(tocLayers[idx][0]);
var x = mapView.extent.center.x.toString();
var y = mapView.extent.center.y.toString();
var level = mapView.zoom.toString();