图层和数据

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
  "places": [
    {
      "id": 1,
      "address": "地址A",
      "longitude": 118.24354,
      "latitude": 34.05389
    },
    {
      "id": 2,
      "address": "地址B",
      "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: "地名",
    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: "{FeatureServiceLayerURL}"
});

map.layers.add(layer);

1
2
3
4
5
6
7
8
var layer = new FeatureLayer({
  portalItem: {
    id: "{itemID}",
    portal: "https://www.geosceneonline/geoscene"               // 默认值，GeoScene Online门户
  }
});

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: "地名A",
    address: "地址A"
  },
  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: "地名",
    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://mgHostName.geoscene/test/earthquake.csv",
  latitudeField: "latitude", // Defaults to "latitude"
  longitudeField: "longitude" // Defaults to "longitude"
});

map.layers.add(earthquakesLayer)

1
2
3
var Map = new Map({
  basemap: "tianditu-vector"
})