图层和数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
  "places": [
    {
      "id": 1,
      "address": "200 N Spring St, Los Angeles, CA 90012",
      "longitude": -118.24354,
      "latitude": 34.05389
    },
    {
      "id": 2,
      "address": "419 N Fairfax Ave, Los Angeles, CA 90036",
      "longitude": -118.31966,
      "latitude": 34.13375
    }
  ]
} 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
var graphics = places.map(function (place) {
  return new Graphic({
    attributes: {
      ObjectId: place.id,
      address: place.address
    },
    geometry: {
      type: "point",
      longitude: place.longitude,
      latitude: place.latitude
    },
    symbol: {
      // autocasts as new SimpleMarkerSymbol()
      type: "simple-marker",
      color: [226, 119, 40],
      outline: {
        // autocasts as new SimpleLineSymbol()
        color: [255, 255, 255],
        width: 2
      }
    }
  });
}); 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
var featureLayer = new FeatureLayer({
  source: graphics,
  renderer: {
    type: "simple",                    // autocasts as new SimpleRenderer()
    symbol: {                          // autocasts as new SimpleMarkerSymbol()
      type: "simple-marker",
      color: "#102A44",
      outline: {                       // autocasts as new SimpleLineSymbol()
        color: "#598DD8",
        width: 2
      }
    }
  },
  popupTemplate: {                     // autocasts as new PopupTemplate()
    title: "Places in Los Angeles",
    content: [{
      type: "fields",
      fieldInfos: [
        {
          fieldName: "address",
          label: "Address",
          visible: true
        }
      ]
    }]
  },
  objectIdField: "ObjectID",           // This must be defined when creating a layer from `Graphic` objects
  fields: [
    {
      name: "ObjectID",
      alias: "ObjectID",
      type: "oid"
    },
    {
      name: "address",
      alias: "address",
      type: "string"
    }
  ]
});

map.layers.add(featureLayer); 

1
2
3
4
5
var layer = new FeatureLayer({
  url: "https://www.geosceneonline.cn/arcgis/rest/services/Trailheads/FeatureServer/0"
});

map.layers.add(layer); 

1
2
3
4
5
6
7
8
var layer = new FeatureLayer({
  portalItem: {
    id: "883cedb8c9fe4524b64d47666ed234a7",
    portal: "https://www.geosceneonline.cn/geoscene"               // Default: The GeoScene Online Portal
  }
});

map.layers.add(layer); 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
var pointGraphic = new Graphic({
  attributes: {
    name: "LA City Hall",
    address: "200 N Spring St, Los Angeles, CA 90012"
  },
  geometry: {
    type: "point",                     // autocasts as new Point()
    longitude: -118.24354,
    latitude: 34.05389
  },
  symbol: {
    type: "simple-marker",             // autocasts as new SimpleMarkerSymbol()
    color: [ 226, 119, 40 ],
    outline: {                         // autocasts as SimpleLineSymbol()
      color: [ 255, 255, 255 ],
      width: 2
    }
  },
  popupTemplate: {                     // autocasts as new PopupTemplate()
    title: "Places in Los Angeles",
    content: [{
      type: "fields",
      fieldInfos: [
        {
          fieldName: "name",
          label: "Name",
          visible: true
        },
        {
          fieldName: "address",
          label: "Address",
          visible: true
        }
      ]
    }]
  },
});

var graphicsLayer = new GraphicsLayer({
  graphics: [ pointGraphic ]
});

map.layers.add(graphicsLayer); 

1
2
3
4
5
6
7
8
var earthquakesLayer = new CSVLayer({
  url: "https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.csv",
  copyright: "USGS Earthquakes",
  latitudeField: "latitude", // Defaults to "latitude"
  longitudeField: "longitude" // Defaults to "longitude"
});

map.layers.add(earthquakesLayer) 

1
2
3
var Map = new Map({
  basemap: "geoscene-blue"
})