编程模式

1
2
3
require(["geoscene/Map", "geoscene/views/MapView"], (Map, MapView) => {
  // 此应用程序逻辑使用 'Map' 和 'MapView' 
});

1
2
3
4
5
6
7
8
9
10
const map = new Map({
  basemap: "tianditu-vector"
});

const view = new MapView({
  map: map,
  container: "map-div",
  center: [ 116, 39 ],
  scale: 5
});

1
2
3
4
5
6
7
8
9
10
11
12
13
const map = new Map();
const view = new MapView();

map.basemap = "tianditu-vector";           // 设置属性

const viewProps = {                    // 具有属性数据的对象
  container: "map-div",
  map: map,
  scale: 5000,
  center: [ 116, 39 ]
};

view.set(viewProps);                   // 使用 setter

1
2
3
4
const basemapTitle = null;
if (map.basemap) {                     // 确保 `map.basemap` 存在
  basemapTitle = map.basemap.title;
}

1
const basemapTitle = map.get("basemap.title");

1
2
3
view.center = [ 116, 39 ];
view.zoom = 6;
map.basemap = "tianditu-image";

1
2
3
4
5
6
const newViewProperties = {
  center: [ 116, 39 ],
  zoom: 6
};

view.set(newViewProperties);

1
2
3
4
5
6
7
8
9
10
11
12
const map = new Map({
  basemap: "tianditu-vector"
});

function titleChangeCallback (newValue, oldValue, property, object) {
  console.log("New value: ", newValue,
              "<br>Old value: ", oldValue,
              "<br>Watched property: ", property,
              "<br>Watched object: ", object);
};

const handle = map.watch('basemap.title', titleChangeCallback);

1
map.basemap = "geoscene-blue";

1
2
3
4
New value: geoscene-blue
Old value: tianditu-vector
Watched property: basemap.title
Watched object: ...                    // 这将记录地图对象

1
handle.remove();

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
require([
  "geoscene/Color",
  "geoscene/symbols/SimpleLineSymbol",
  "geoscene/symbols/SimpleMarkerSymbol",
  "geoscene/renderers/SimpleRenderer",
  "geoscene/layers/FeatureLayer",
], (
  Color, SimpleLineSymbol, SimpleMarkerSymbol, SimpleRenderer, FeatureLayer
) => {
r
  const layer = new FeatureLayer({
    url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/WorldCities/FeatureServer/0",
    renderer: new SimpleRenderer({
      symbol: new SimpleMarkerSymbol({
        style: "diamond",
        color: new Color([255, 128, 45]),
        outline: new SimpleLineSymbol({
          style: "dash-dot",
          color: new Color([0, 0, 0])
        })
      })
    })
  });

});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
require([ "geoscene/layers/FeatureLayer" ], (FeatureLayer) => {

  const layer = new FeatureLayer({
    url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/WorldCities/FeatureServer/0",
    renderer: {                        // 自动转换为新 SimpleRenderer()
      symbol: {                        // 自动转换为新 SimpleMarkerSymbol()
        type: "simple-marker",
        style: "diamond",
        color: [ 255, 128, 45 ],       // 自动转换为新 Color()
        outline: {                     // 自动转换为新 SimpleLineSymbol()
          style: "dash-dot",
          color: [ 0, 0, 0 ]           // 自动转换为新 Color()
        }
      }
    }
  });

});

1
2
3
4
5
6
7
8
const diamondSymbol = {
  type: "simple-marker",
  outline: {
    type: "simple-line", // 不需要，因类型 `simple-line` 是隐含的
    style: "dash-dot",
    color: [ 255, 128, 45 ]
  }
};

1
someAsyncFunction().then(callback, errorCallback);

1
2
3
4
5
6
someAsyncFunction()
  .then((resolvedVal) => {
    console.log(resolvedVal);
  }, (error) => {
    console.error(error);
  });

1
2
3
4
5
6
someAsyncFunction()
  .then((resolvedVal) => {
    console.log(resolvedVal);
  }).catch((error) => {
    console.error(error);
  });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
require([
  "geoscene/rest/geometryService",
  "geoscene/rest/support/ProjectParameters",
  ], (geometryService, ProjectParameters) => {

    const geoService = "https://sampleserver6.geosceneonline.cn/arcgis/rest/services/Utilities/Geometry/GeometryServer";

    const projectParams = new ProjectParameters({
      geometries: [points],            // 假设这些是在别处定义的
      outSR: outSR,
      transformation = transformation
    });

    geometryService.project(geoService, projectParams)
      .then((projectedGeoms) => {
       console.log("projected points: ", projectedGeoms);
      }, (error) => {
        console.error(error);
      });
});

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
  const bufferLayer = new GraphicsLayer();

  function bufferPoints(points) {
    return geometryEngine.geodesicBuffer(points, 1000, "feet");
  }

  function addGraphicsToBufferLayer(buffers) {
    buffers.forEach((buffer) => {
      bufferLayer.add(new Graphic(buffer));
    });
    return buffers;
  }

  function calculateArea(buffer) {
    return geometryEngine.geodesicArea(buffer, "square-feet");
  }

  function calculateAreas(buffers) {
    return buffers.map(calculateArea);
  }

  function sumArea(areas) {
    for (let i = 0, total = 0; i < areas.length; i++) {
      total += areas[i];
    }
    return total;
  }

  geoService.project(projectParams)
    .then(bufferPoints)
    .then(addGraphicsToBufferLayer)
    .then(calculateAreas)
    .then(sumArea)
    .catch((error) => {
      console.error("One of the promises in the chain was rejected! Message:", error);
    });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
const view = new MapView({
  container: "viewDiv"
});

const portal = new Portal({
  url: "https://myportal/"
});

const webmap = new WebMap({
  portalItem: {
    portal: portal,
    id: "f2e9b762544945f390ca4ac3671cfa72"
  }
});

webmap.load()
  .then(() => { view.map = webmap; })
  .catch((error) => {
    console.error("The resource failed to load: ", error);
  });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
require(["geoscene/symbols/SimpleMarkerSymbol"], (SimpleMarkerSymbol) => {
  // 作为从 GeoScene REST API 查询生成的 JSON 响应的 SimpleMarkerSymbol 
  const smsJson = {
    "type": "esriSMS",
    "style": "esriSMSSquare",
    "color": [ 76,115,0,255 ],
    "size": 8,
    "angle": 0,
    "xoffset": 0,
    "yoffset": 0,
    "outline":
    {
      "color": [ 152,230,0,255 ],
      "width": 1
    }
  };

  // 从 JSON 表达式创建 SimpleMarkerSymbol 
  const sms = SimpleMarkerSymbol.fromJSON(smsJson);
});

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
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
require([ "geoscene/renderers/support/jsonUtils",
          "geoscene/layers/FeatureLayer"
], ( rendererJsonUtils, FeatureLayer ) => {

  const rendererJSON = {               // 通过 REST 请求获取的渲染器对象
     "authoringInfo":null,
     "type":"uniqueValue",
     "field1":"CLASS",
     "field2":null,
     "field3":null,
     "expression":null,
     "fieldDelimiter":null,
     "defaultSymbol":{
        "color":[
           235,
           235,
           235,
           255
        ],
        "type":"esriSLS",
        "width":3,
        "style":"esriSLSShortDot"
     },
     "defaultLabel":"Other major roads",
     "uniqueValueInfos":[
        {
           "value":"I",
           "symbol":{
              "color":[
                 255,
                 170,
                 0,
                 255
              ],
              "type":"esriSLS",
              "width":10,
              "style":"esriSLSSolid"
           },
           "label":"Interstate"
        },
        {
           "value":"U",
           "symbol":{
              "color":[
                 223,
                 115,
                 255,
                 255
              ],
              "type":"esriSLS",
              "width":7,
              "style":"esriSLSSolid"
           },
           "label":"US Highway"
        }
     ]
  };

  // 从其 JSON 表达式创建渲染器对象
  const flRenderer = rendererJsonUtils.fromJSON(rendererJSON);

  // 在图层上设置渲染器
  const layer = new FeatureLayer({
    renderer: flRenderer
  });
});