ArcGIS Web Development

ArcGIS overview

 

1、Create a map with common map options

require(["esri/map"], function (Map) {
  var map = new Map("map", {
    basemap: "streets",
    center: [-118.2095, 34.0866],
    zoom: 10,
  });
});

2、Listens click event of map instance

 

3、QueryTasks 

require([
  "dojo/dom",
  "dojo/on",
  "dojo/_base/array",
  "dojo/_base/Color",
  "esri/map",
  "esri/tasks/query",
  "esri/tasks/QueryTask",
  "esri/symbols/SimpleMarkerSymbol",
], function (dom, on, array, Color, Map, Query, QueryTask, SimpleMarkerSymbol) {
  var map = new Map("map", {
      basemap: "streets",
      autoResize: true,
      center: [-118.2095, 34.0866],
      zoom: 10,
    }),
    url =
      "http://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/" +
      "la_county_labor_centroid/FeatureServer/0",
    markerSymbol = new SimpleMarkerSymbol(
      SimpleMarkerSymbol.STYLE_SQUARE,
      10,
      null,
      new Color([50, 50, 255])
    );
  function onQuerySuccess(featureSet) {
    map.graphics.clear();
    array.forEach(featureSet.features, function (feature) {
      feature.setSymbol(markerSymbol);
      map.graphics.add(feature);
    });
  }
  function onError(error) {
    console.error("An error ocurred in the query: ", error);
  }
  on(dom.byId("population"), "change", function (e) {
    var population = e.target.value;
    if (population.length > 0) {
      var queryTask = new QueryTask(url);
      var query = new Query();
      query.where = "TOTAL_POP > " + population;
      query.returnGeometry = true;
      queryTask.execute(query).then(onQuerySuccess, onError);
    }
  });
});

4、GeometryService && FeatureLayer

require([...], function (
  Map,
  Graphic,
  FeatureLayer,
  Draw,
  GeometryService,
  BufferParameters,
  Query,
  symbol,
  dom,
  on,
  Color,
  arrayUtils
) {
  var map = new Map("map", { basemap: "gray",  center: [-122.4348, 37.7582], zoom: 13, }),
    geometryService = new GeometryService(
      "http://tasks.arcgisonline.com/ArcGIS/rest/services/" + "Geometry/GeometryServer"
    ),
    featureLayer = new FeatureLayer(
      "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/" + "Demographics/ESRI_Census_USA/MapServer/1", { mode: FeatureLayer.MODE_SELECTION, outFields: ["*"] }
    ),
    drawTool;
  map.addLayer(featureLayer);
  map.on("load", function () {
    drawTool = new Draw(map);
    on(drawTool, "draw-end", function (e) {
      drawTool.deactivate();
      var ptSymbol = new symbol.SimpleMarkerSymbol(symbol.SimpleMarkerSymbol.STYLE_CIRCLE,  10, null, new Color([255, 0, 0, 1])  ),
        params = new BufferParameters();
      map.graphics.add(new Graphic(e.geometry, ptSymbol));
      params.geometries = [e.geometry];
      params.distances = [1];
      params.unit = GeometryService.UNIT_KILOMETER;
      params.outSpatialReference = map.spatialReference;
      geometryService.buffer(params, function (geometries) {
        var fill = new symbol.SimpleFillSymbol(
          symbol.SimpleFillSymbol.STYLE_SOLID,
          new symbol.SimpleLineSymbol(
            symbol.SimpleLineSymbol.STYLE_SOLID,
            new Color([255, 0, 0, 0.65]),
            2
          ),
          new Color([255, 0, 0, 0.35])
        );
        arrayUtils.forEach(geometries, function (geom) {
          map.graphics.add(new Graphic(geom, fill));
          var query = new Query();
          query.geometry = geom;
        });
      });
    });
  });
  on(dom.byId("drawPoint"), "click", function () {
    drawTool.activate(Draw.POINT);
  });
});

5、set Define expression