编程模式

1
2
3
require(["geoscene/Map", "geoscene/views/MapView"], (Map, MapView) => {
  // The application logic using `Map` and `MapView` goes here
});

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: [ -122, 38 ],
  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";           // Set a property

const viewProps = {                    // Object with property data
  container: "map-div",
  map: map,
  scale: 5000,
  center: [ -122, 38 ]
};

view.set(viewProps);                   // Use a setter

1
2
3
4
const basemapTitle = null;
if (map.basemap) {                     // Make sure `map.basemap` exists
  basemapTitle = map.basemap.title;
}

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

1
2
3
view.center = [ -100, 40 ];
view.zoom = 6;
map.basemap = "oceans";

1
2
3
4
5
6
const newViewProperties = {
  center: [ -100, 40 ],
  zoom: 6
};

view.set(newViewProperties);

1
2
3
4
5
6
7
8
9
10
11
12
const handle = reactiveUtils.watch(
  // getValue function
  () => object.value,
  // Callback function
  (newValue, oldValue) => {
    console.log("New value: ", newValue, "Old value: ", oldValue);
  },
  // Optional parameters
  {
    initial: true
  }
);

1
handle.remove();

1
2
3
4
5
6
const handle = reactiveUtils.watch(
  () => view.updating,
  (updating) => {
    console.log(`View is updating: ${updating}`);
  }
);

1
2
3
4
5
6
const handle = reactiveUtils.watch(
  () => view.map.allLayers.every((layer) => layer.visible),
  (allVisible) => {
      console.log(`All layers are visible = ${allVisible}`);
  }
);

1
2
3
4
5
6
7
8
9
const handle = reactiveUtils.watch(
  () => [view.stationary, view.zoom],
  ([stationary, zoom]) => {
    // Only print the new zoom value when the view is stationary
    if(stationary){
      console.log(`Change in zoom level: ${zoom}`);
    }
   }
);

1
2
3
4
5
6
const handle = reactiveUtils.watch(
 () => view.environment?.atmosphereEnabled,
 (newValue) => {
     console.log(`Atmosphere enabled = ${newValue}`);
 }
);

1
2
3
4
5
6
7
8
const handle = view.watch(
  "scale",
  (newValue, oldValue, property, object) => {
    console.log("New value: ", newValue,
              "<br>Old value: ", oldValue,
              "<br>Watched property: ", property,
              "<br>Watched object: ", object);
});

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
) => {

  const layer = new FeatureLayer({
    url: "url",
    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: "url",
    renderer: {                        // autocasts as new SimpleRenderer()
      symbol: {                        // autocasts as new SimpleMarkerSymbol()
        type: "simple-marker",
        style: "diamond",
        color: [ 255, 128, 45 ],       // autocasts as new Color()
        outline: {                     // autocasts as new SimpleLineSymbol()
          style: "dash-dot",
          color: [ 0, 0, 0 ]           // autocasts as new Color()
        }
      }
    }
  });

});

1
2
3
4
5
6
7
8
const diamondSymbol = {
  type: "simple-marker",
  outline: {
    type: "simple-line", // Not needed, as type `simple-line` is implied
    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
7
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 = "url";

    const projectParams = new ProjectParameters({
      geometries: [points],   // assuming these are defined elsewhere
      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
  const checkZoomLevel = async () => {
    await reactiveUtils.once(() => view.zoom > 20);
    console.log("Zoom level is greater than 20!");
  }

  checkZoomLevel();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  // Async function
  const compileStatistics = async () => {
    const layerView = await view.whenLayerView(layer); // assume layer is defined elsewhere
    await reactiveUtils.whenOnce(() => !layerView.updating);
    return await runStats();
  }

  // Async function fulfills or rejects a promise
  compileStastics().then((stats) => {
    console.log(stats);
  })
  .catch((error) => {
    console.error(error);
  });

  // This function runs in parallel
  queryPopulation();

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
const view = new MapView({
  map: map
});

view.when(() => {
  // do something when the view finishes loading
  view.goTo([-112, 38]);
}, (error) => {
  // console an error if the view does not load successfully
  console.log("error loading the view: ", error.message)
});

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) => {
  // SimpleMarkerSymbol as a JSON response generated from GeoScene REST API query
  const smsJson = {
    "type": "simple-marker",
    "style": "square",
    "color": [ 76,115,0,255 ],
    "size": 8,
    "angle": 0,
    "xoffset": 0,
    "yoffset": 0,
    "outline":
    {
      "color": [ 152,230,0,255 ],
      "width": 1
    }
  };

  // Create a SimpleMarkerSymbol from the JSON representation
  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 = {               // renderer object obtained via REST request
     "authoringInfo":null,
     "type":"uniqueValue",
     "field1":"CLASS",
     "field2":null,
     "field3":null,
     "expression":null,
     "fieldDelimiter":null,
     "defaultSymbol":{
        "color":[
           235,
           235,
           235,
           255
        ],
        "type":"simple-marker",
        "width":3,
        "style":"square"
     },
     "defaultLabel":"Other major roads",
     "uniqueValueInfos":[
        {
           "value":"I",
           "symbol":{
              "color":[
                 255,
                 170,
                 0,
                 255
              ],
              "type":"simple-marker",
              "width":10,
              "style":"square"
           },
           "label":"Interstate"
        },
        {
           "value":"U",
           "symbol":{
              "color":[
                 223,
                 115,
                 255,
                 255
              ],
              "type":"simple-marker",
              "width":7,
              "style":"square"
           },
           "label":"Highway"
        }
     ]
  };

  // Create a renderer object from its JSON representation
  const flRenderer = rendererJsonUtils.fromJSON(rendererJSON);

  // Set the renderer on a layer
  const layer = new FeatureLayer({
    renderer: flRenderer
  });
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
const polygonSymbol = {
  type: "simple-fill", // autocasts as new SimpleFillSymbol()
  color: "#F2BC94",
  outline: {
    // autocasts as new SimpleLineSymbol()
    color: "#722620",
    width: 3
  }
};

const sketchViewModel = new SketchViewModel({
  view: view,
  layer: graphicsLayer,
  polygonSymbol: polygonSymbol,
});