添加点、线和面

了解如何在地图中显示点、线和面图形。

图形是用于在地图或场景中显示点、线、面和文本的视觉元素。图形由几何、符号和属性组成，单击时可以显示弹出窗口。通常可使用图形来显示未连接到数据库的地理数据。例如，GPS 位置。

在本教程中，将在地图上显示点、线和面以作为图形。

步骤

创建空代码模板

要开始使用，请完成显示地图教程或使用此 Pen。

添加模块

在 require 语句中，添加 Graphic 和 GraphicsLayer 模块。

GeoScene API for JavaScript 使用 AMD 模块。require 函数用于加载模块，以便它们可在主 function 中使用。保持模块引用和函数参数的顺序相同很重要。

Add line.Add line.Change line
<html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>GeoScene API for JavaScript Tutorials: 添加点、线和面</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
  <script src="https://js.geoscene.cn/4.23/"></script>
  <script>

  require([
    "geoscene/config",
    "geoscene/Map",
    "geoscene/views/MapView",

    "geoscene/Graphic",
    "geoscene/layers/GraphicsLayer"

    ], function(geosceneConfig,Map, MapView, Graphic, GraphicsLayer) {      const map = new Map({
        basemap: "tianditu-vector" //Basemap layer service
 　　　　 });

      const view = new MapView({
        map: map,
        center: [116.80500,39.02700], //Longitude, latitude
        zoom: 13,
        container: "viewDiv"
　　　　 });    });
</script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

添加图形图层

图形图层是图形的容器。它与地图视图一起使用以在地图上显示图形。您可以将多个图形图层添加到地图视图中。图形图层显示在所有其他图层之上。

创建并添加 GraphicsLayer 以存储图形。

Add line.Add line.
<html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>GeoScene API for JavaScript Tutorials: 添加点、线和面</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
  <script src="https://js.geoscene.cn/4.23/"></script>
  <script>

  require([
    "geoscene/config",
    "geoscene/Map",
    "geoscene/views/MapView",

    "geoscene/Graphic",
    "geoscene/layers/GraphicsLayer"

    ], function(geosceneConfig,Map, MapView, Graphic, GraphicsLayer) {      const map = new Map({
        basemap: "tianditu-vector" //Basemap layer service
  　　　　});

      const view = new MapView({
        map: map,
        center: [116.80500,39.02700], //经度、纬度
        zoom: 13,
        container: "viewDiv"
　　　　 });

     const graphicsLayer = new GraphicsLayer();
　　　　 map.add(graphicsLayer);
     });
</script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

添加点图形

可使用点和标记符号创建点图形。点可使用经度 (x) 和纬度 (y) 坐标进行定义，简单符号可使用颜色和轮廓进行定义。Point 和 SimpleMarkerSymbol 类可用于创建点图形。

如果您想在地图中显示具有空间参考（除 WKID 102100、3857 或 4326 之外）的图形，则必须在创建点、线或面几何时指定空间参考。否则，将忽略它，并应用地图视图的空间参考。可在空间参考中了解有关空间参考和坐标系的详细信息。

创建 point 和 simpleMarkerSymbol，以用于创建 Graphic。

Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>GeoScene API for JavaScript Tutorials: 添加点、线和面</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
  <script src="https://js.geoscene.cn/4.23/"></script>
  <script>

  require([
    "geoscene/config",
    "geoscene/Map",
    "geoscene/views/MapView",

    "geoscene/Graphic",
    "geoscene/layers/GraphicsLayer"

    ], function(geosceneConfig,Map, MapView, Graphic, GraphicsLayer) {      const map = new Map({
        basemap: "tianditu-vector" //Basemap layer service
 　　　　 });

      const view = new MapView({
        map: map,
        center: [116.80500,39.02700], //Longitude, latitude
        zoom: 13,
        container: "viewDiv"
　　　　 });

     const graphicsLayer = new GraphicsLayer();
　　　　 map.add(graphicsLayer);

     const point = { //创建点
        type: "point",
        longitude: 116.80657463861,
        latitude: 39.0005930608889
　　　　 };
     const simpleMarkerSymbol = {
        type: "simple-marker",
        color: [255, 0, 0],  // 红色
        outline: {
            color: [255, 255, 255], // 白色
            width: 1
  　　　　  }
　　　　 };
    });
</script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

创建 Graphic 并设置 geometry 和 symbol 属性。Graphic 类在构造时将自动转换 point 和 simpleMarkerSymbol。

点图形支持多种符号类型，例如 SimpleMarkerSymbol、PictureMarkerSymbol 和 TextSymbol。有关符号的更多信息，请参阅 API 文档。

Add line.Add line.Add line.Add line.Add line.
<html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>GeoScene API for JavaScript Tutorials: 添加点、线和面</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
  <script src="https://js.geoscene.cn/4.23/"></script>
  <script>

  require([
    "geoscene/config",
    "geoscene/Map",
    "geoscene/views/MapView",

    "geoscene/Graphic",
    "geoscene/layers/GraphicsLayer"

    ], function(geosceneConfig,Map, MapView, Graphic, GraphicsLayer) {      const map = new Map({
        basemap: "tianditu-vector" //Basemap layer service
　　　　  });

      const view = new MapView({
        map: map,
        center: [116.80500,39.02700], //Longitude, latitude
        zoom: 13,
        container: "viewDiv"
 　　　　});

     const graphicsLayer = new GraphicsLayer();
　　　　 map.add(graphicsLayer);

     const point = { //创建点
        type: "point",
        longitude: 116.80657463861,
        latitude: 39.0005930608889
　　　　 };
     const simpleMarkerSymbol = {
        type: "simple-marker",
        color: [255, 0, 0],  // 红色
        outline: {
            color: [255, 255, 255], // 白色
            width: 1
　　　　    }
　　　　 };

     const pointGraphic = new Graphic({
        geometry: point,
        symbol: simpleMarkerSymbol
　　　　 });
　　　　 graphicsLayer.add(pointGraphic);     });
</script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

验证点图形是否位正确。

添加线图形

可使用折线和线符号创建线图形。折线定义为一个点序列和一个空间参考。Polyline 和 SimpleLineSymbol 类可用于创建线图形。

定义 polyline 和 simpleLineSymbol，以用于创建 Graphic。

Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>GeoScene API for JavaScript Tutorials: 添加点、线和面</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
  <script src="https://js.geoscene.cn/4.23/"></script>
  <script>

  require([
    "geoscene/config",
    "geoscene/Map",
    "geoscene/views/MapView",

    "geoscene/Graphic",
    "geoscene/layers/GraphicsLayer"

    ], function(geosceneConfig,Map, MapView, Graphic, GraphicsLayer) {      const map = new Map({
        basemap: "tianditu-vector" //Basemap layer service
　　　　  });

      const view = new MapView({
        map: map,
        center: [116.80500,39.02700], //Longitude, latitude
        zoom: 13,
        container: "viewDiv"
　　　　 });

     const graphicsLayer = new GraphicsLayer();
　　　　 map.add(graphicsLayer);

     const point = { //Create a point
        type: "point",
        longitude: 116.80657463861,
        latitude: 39.0005930608889
　　　　 };
     const simpleMarkerSymbol = {
        type: "simple-marker",
        color: [255, 119, 40],  // 红色
        outline: {
            color: [255, 255, 255], // White
            width: 1
  　　　　  }
　　　　 };

     const pointGraphic = new Graphic({
        geometry: point,
        symbol: simpleMarkerSymbol
　　　　 });
　　　　 graphicsLayer.add(pointGraphic);

        // 创建线几何
     const polyline = {
        type: "polyline",
        paths: [
            [116.821527826096, 39.0139576938577], //经度、纬度
            [116.814893761649, 39.0080602407843], //经度、纬度
            [116.808878330345, 39.0016642996246]  //经度、纬度
    　　　　]
　　　　 };
     const simpleLineSymbol = {
        type: "simple-line",
        color: [255, 0, 0], // 红色
        width: 2
　　　　 }; 　});
</script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

创建 Graphic 并设置 geometry 和 symbol 属性。Graphic 类在创建时将自动转换 polyline 和 simpleLineSymbol。

折线图形支持多种符号类型，例如 SimpleLineSymbol 和 TextSymbol。有关符号的更多信息，请参阅 API 文档。

Add line.Add line.Add line.Add line.Add line.
<html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>GeoScene API for JavaScript Tutorials: 添加点、线和面</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
  <script src="https://js.geoscene.cn/4.23/"></script>
  <script>

  require([
    "geoscene/config",
    "geoscene/Map",
    "geoscene/views/MapView",

    "geoscene/Graphic",
    "geoscene/layers/GraphicsLayer"

    ], function(geosceneConfig,Map, MapView, Graphic, GraphicsLayer) {      const map = new Map({
        basemap: "tianditu-vector" //Basemap layer service
 　　　　 });
　　　　
      const view = new MapView({
        map: map,
        center: [116.80500,39.02700], //Longitude, latitude
        zoom: 13,
        container: "viewDiv"
　　　　 });
     const graphicsLayer = new GraphicsLayer();
　　　　 map.add(graphicsLayer);

     const point = { //Create a point
        type: "point",
        longitude: 116.80657463861,
        latitude: 39.0005930608889
　　　　 };
     const simpleMarkerSymbol = {
        type: "simple-marker",
        color: [255, 119, 40],  // 红色
        outline: {
            color: [255, 255, 255], // White
            width: 1
 　　　　   }
 　　　　};

     const pointGraphic = new Graphic({
        geometry: point,
        symbol: simpleMarkerSymbol
　　　　 });
　　　　 graphicsLayer.add(pointGraphic);

        // 创建线几何
     const polyline = {
        type: "polyline",
        paths: [
            [116.821527826096, 39.0139576938577], //经度、纬度
            [116.814893761649, 39.0080602407843], //经度、纬度
            [116.808878330345, 39.0016642996246]  //经度、纬度
  　　　　  ]
　　　　 };
     const simpleLineSymbol = {
        type: "simple-line",
        color: [255, 0, 0], // 红色
        width: 2
　　　　 };

     const polylineGraphic = new Graphic({
        geometry: polyline,
        symbol: simpleLineSymbol
　　　　 });
　　　　 graphicsLayer.add(polylineGraphic);    });
</script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

验证线图形是否正确。

添加面图形

可使用面和填充符号创建面图形。面是闭合边界的点序列 (环)，具有一个空间参考。Polygon 和 SimpleFillSymbol 类可用于创建和显示面图形。

定义 polygon 和 simpleFillSymbol，以用于创建 Graphic

Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>GeoScene API for JavaScript Tutorials: 添加点、线和面</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
  <script src="https://js.geoscene.cn/4.23/"></script>
  <script>

  require([
    "geoscene/config",
    "geoscene/Map",
    "geoscene/views/MapView",

    "geoscene/Graphic",
    "geoscene/layers/GraphicsLayer"

    ], function(geosceneConfig,Map, MapView, Graphic, GraphicsLayer) {      const map = new Map({
        basemap: "tianditu-vector" //Basemap layer service
　　　　  });

      const view = new MapView({
       map: map,
        center: [116.80500,39.02700], //Longitude, latitude
        zoom: 13,
        container: "viewDiv"
 　　　　});

     const graphicsLayer = new GraphicsLayer();
　　　　 map.add(graphicsLayer);
　　　　
     const point = { //Create a point
        type: "point",
        longitude: 116.80657463861,
        latitude: 39.0005930608889
　　　　 };
     const simpleMarkerSymbol = {
        type: "simple-marker",
        color: [255, 119, 40],  // 红色
        outline: {
            color: [255, 255, 255], // White
            width: 1
  　　　　  }
　　　　 };

     const pointGraphic = new Graphic({
        geometry: point,
        symbol: simpleMarkerSymbol
 　　　　});
　　　　 graphicsLayer.add(pointGraphic);

        // Create a line geometry
     const polyline = {
        type: "polyline",
        paths: [
            [116.821527826096, 39.0139576938577], //Longitude, latitude
            [116.814893761649, 39.0080602407843], //Longitude, latitude
            [116.808878330345, 39.0016642996246]  //Longitude, latitude
   　　　　 ]
　　　　 };
     const simpleLineSymbol = {
        type: "simple-line",
        color: [255, 119, 40], // 红色
        width: 2
　　　　 };

     const polylineGraphic = new Graphic({
        geometry: polyline,
        symbol: simpleLineSymbol
　　　　 });
　　　　 graphicsLayer.add(polylineGraphic);

     // 创建面几何
     const polygon = {
        type: "polygon",
        rings: [
            [116.818984489994, 39.0137559967283], //经度、纬度
            [116.806796597377, 39.0215816298725], //经度、纬度
            [116.791432890735, 39.0163883241613], //经度、纬度
            [116.79596686535, 39.008564864635],   //经度、纬度
            [116.808558110679, 39.0035027131376]  //经度、纬度
   　　　　 ]
 　　　　};

     const simpleFillSymbol = {
        type: "simple-fill",
        color: [255, 0, 0, 0.8],  // 红色，透明度 80%
        outline: {
            color: [255, 255, 255],
            width: 1
  　　　　  }
 　　　　};    });
</script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

创建 Graphic 并设置 geometry 和 symbol 属性。Graphic 类在创建时将自动转换 polygon 和 simpleFillSymbol。

面图形支持多种 Symbol 类型，例如 SimpleFillSymbol、PictureFillSymbol、SimpleMarkerSymbol 和 TextSymbol。还需注意的是，外多边形环坐标应按顺时针顺序添加，而内环坐标（岛）应按逆时针顺序添加。

Add line.Add line.Add line.Add line.Add line.Add line.
<html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>GeoScene API for JavaScript Tutorials: 添加点、线和面</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
  <script src="https://js.geoscene.cn/4.23/"></script>
  <script>

  require([
    "geoscene/config",
    "geoscene/Map",
    "geoscene/views/MapView",

    "geoscene/Graphic",
    "geoscene/layers/GraphicsLayer"

    ], function(geosceneConfig,Map, MapView, Graphic, GraphicsLayer) {      const map = new Map({
        basemap: "tianditu-vector" //Basemap layer service
 　　　　 });

      const view = new MapView({
        map: map,
        center: [116.80500,39.02700], //Longitude, latitude
        zoom: 13,
        container: "viewDiv"
　　　　 });

     const graphicsLayer = new GraphicsLayer();
　　　　 map.add(graphicsLayer);

     const point = { //Create a point
        type: "point",
        longitude: 116.80657463861,
        latitude: 39.0005930608889
　　　　 };
     const simpleMarkerSymbol = {
        type: "simple-marker",
        color: [255, 119, 40],  // 红色
        outline: {
            color: [255, 255, 255], // White
            width: 1
   　　　　 }
　　　　 };

     const pointGraphic = new Graphic({
        geometry: point,
        symbol: simpleMarkerSymbol
 　　　　});
　　　　 graphicsLayer.add(pointGraphic);

        // Create a line geometry
     const polyline = {
        type: "polyline",
        paths: [
            [116.821527826096, 39.0139576938577], //Longitude, latitude
            [116.814893761649, 39.0080602407843], //Longitude, latitude
            [116.808878330345, 39.0016642996246]  //Longitude, latitude
   　　　　 ]
　　　　 };
     const simpleLineSymbol = {
        type: "simple-line",
        color: [255, 119, 40], // 红色
        width: 2
　　　　 };

     const polylineGraphic = new Graphic({
        geometry: polyline,
        symbol: simpleLineSymbol
　　　　 });
　　　　 graphicsLayer.add(polylineGraphic);

     // 创建面几何
     const polygon = {
        type: "polygon",
        rings: [
            [116.818984489994, 39.0137559967283], //经度、纬度
            [116.806796597377, 39.0215816298725], //经度、纬度
            [116.791432890735, 39.0163883241613], //经度、纬度
            [116.79596686535, 39.008564864635],   //经度、纬度
            [116.808558110679, 39.0035027131376]  //经度、纬度
   　　　　 ]
　　　　 };

     const simpleFillSymbol = {
        type: "simple-fill",
        color: [255, 0, 0, 0.8],  // 红色，透明度 80%
        outline: {
            color: [255, 255, 255],
            width: 1
    　　　　}
 　　　　};
     const polygonGraphic = new Graphic({
        geometry: polygon,
        symbol: simpleFillSymbol,　　　　 });
 　　　　graphicsLayer.add(polygonGraphic);

    });
</script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

验证面图形是否正确。

创建弹出窗口

单击图形时，可以显示图形的弹出窗口。创建面图形并设置包含图形名称和描述的弹出窗口，首先代码中定义了 attribute 和 popupTemplate 变量。

在主函数中，定义 popupTemplate 和 attributes。

Add line.Add line.Add line.Add line.Add line.Add line.Add line.Add line.
<html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>GeoScene API for JavaScript Tutorials: 添加点、线和面</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
  <script src="https://js.geoscene.cn/4.23/"></script>
  <script>

  require([
    "geoscene/config",
    "geoscene/Map",
    "geoscene/views/MapView",

    "geoscene/Graphic",
    "geoscene/layers/GraphicsLayer"

    ], function(geosceneConfig,Map, MapView, Graphic, GraphicsLayer) {

  geosceneConfig.apiKey = "YOUR_API_KEY";

  const map = new Map({
    basemap: "tianditu-vector" //Basemap layer service
  });

  const view = new MapView({
    map: map,
    center: [116.80500,39.02700], //Longitude, latitude
    zoom: 13,
    container: "viewDiv"
 });

 const graphicsLayer = new GraphicsLayer();
 map.add(graphicsLayer);

 const point = { //Create a point
    type: "point",
    longitude: 116.80657463861,
    latitude: 39.0005930608889
 };
 const simpleMarkerSymbol = {
    type: "simple-marker",
    color: [255, 119, 40],  // 红色
    outline: {
        color: [255, 255, 255], // White
        width: 1
    }
 };

 const pointGraphic = new Graphic({
    geometry: point,
    symbol: simpleMarkerSymbol
 });
 graphicsLayer.add(pointGraphic);

    // Create a line geometry
 const polyline = {
    type: "polyline",
    paths: [
        [116.821527826096, 39.0139576938577], //Longitude, latitude
        [116.814893761649, 39.0080602407843], //Longitude, latitude
        [116.808878330345, 39.0016642996246]  //Longitude, latitude
    ]
 };
 const simpleLineSymbol = {
    type: "simple-line",
    color: [255, 119, 40], // 红色
    width: 2
 };

 const polylineGraphic = new Graphic({
    geometry: polyline,
    symbol: simpleLineSymbol
 });
 graphicsLayer.add(polylineGraphic);

 // Create a polygon geometry
 const polygon = {
    type: "polygon",
    rings: [
        [116.818984489994, 39.0137559967283], //Longitude, latitude
        [116.806796597377, 39.0215816298725], //Longitude, latitude
        [116.791432890735, 39.0163883241613], //Longitude, latitude
        [116.79596686535, 39.008564864635],   //Longitude, latitude
        [116.808558110679, 39.0035027131376]  //Longitude, latitude
    ]
 };

 const simpleFillSymbol = {
    type: "simple-fill",
    color: [255, 0, 0, 0.8],  // 红色，透明度 80%
    outline: {
        color: [255, 255, 255],
        width: 1
    }
 };

 const popupTemplate = {
    title: "{Name}",
    content: "{Description}"
 }
 const attributes = {
    Name: "Graphic",
    Description: "I am a polygon"
 }

 const polygonGraphic = new Graphic({
    geometry: polygon,
    symbol: simpleFillSymbol,

    attributes: attributes,
    popupTemplate: popupTemplate

 });
 graphicsLayer.add(polygonGraphic);

 });
</script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

修改 polygonGraphic ，将之前的变量赋给 popupTemplate 和 attribute 属性。

Add line.Add line.
<html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>GeoScene API for JavaScript Tutorials: 添加点、线和面</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.geoscene.cn/4.23/geoscene/themes/light/main.css">
  <script src="https://js.geoscene.cn/4.23/"></script>
  <script>

  require([
    "geoscene/config",
    "geoscene/Map",
    "geoscene/views/MapView",

    "geoscene/Graphic",
    "geoscene/layers/GraphicsLayer"

    ], function(geosceneConfig,Map, MapView, Graphic, GraphicsLayer) {

  geosceneConfig.apiKey = "YOUR_API_KEY";

  const map = new Map({
    basemap: "tianditu-vector" //Basemap layer service
  });

  const view = new MapView({
    map: map,
    center: [116.80500,39.02700], //Longitude, latitude
    zoom: 13,
    container: "viewDiv"
 });

 const graphicsLayer = new GraphicsLayer();
 map.add(graphicsLayer);

 const point = { //Create a point
    type: "point",
    longitude: 116.80657463861,
    latitude: 39.0005930608889
 };
 const simpleMarkerSymbol = {
    type: "simple-marker",
    color: [255, 119, 40],  // 红色
    outline: {
        color: [255, 255, 255], // White
        width: 1
    }
 };

 const pointGraphic = new Graphic({
    geometry: point,
    symbol: simpleMarkerSymbol
 });
 graphicsLayer.add(pointGraphic);

    // Create a line geometry
 const polyline = {
    type: "polyline",
    paths: [
        [116.821527826096, 39.0139576938577], //Longitude, latitude
        [116.814893761649, 39.0080602407843], //Longitude, latitude
        [116.808878330345, 39.0016642996246]  //Longitude, latitude
    ]
 };
 const simpleLineSymbol = {
    type: "simple-line",
    color: [255, 119, 40], // 红色
    width: 2
 };

 const polylineGraphic = new Graphic({
    geometry: polyline,
    symbol: simpleLineSymbol
 });
 graphicsLayer.add(polylineGraphic);

 // Create a polygon geometry
 const polygon = {
    type: "polygon",
    rings: [
        [116.818984489994, 39.0137559967283], //Longitude, latitude
        [116.806796597377, 39.0215816298725], //Longitude, latitude
        [116.791432890735, 39.0163883241613], //Longitude, latitude
        [116.79596686535, 39.008564864635],   //Longitude, latitude
        [116.808558110679, 39.0035027131376]  //Longitude, latitude
    ]
 };

 const simpleFillSymbol = {
    type: "simple-fill",
    color: [255, 0, 0, 0.8],  // 红色, opacity 80%
    outline: {
        color: [255, 255, 255],
        width: 1
    }
 };

 const popupTemplate = {
    title: "{Name}",
    content: "{Description}"
 }
 const attributes = {
    Name: "Graphic",
    Description: "I am a polygon"
 }

 const polygonGraphic = new Graphic({
    geometry: polygon,
    symbol: simpleFillSymbol,

    attributes: attributes,
    popupTemplate: popupTemplate

 });
 graphicsLayer.add(polygonGraphic);

 });
</script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html>

运行应用程序

在 CodePen 中，运行代码以显示地图。

地图应显示所有三个图形。单击面时，它应该显示一个弹出窗口。

下一步是什么？

要了解如何使用其他 API 功能，请参阅以下教程：

上一主题更改底图图层下一主题添加要素图层

GeoScene API for JavaScript

添加点、线和面

解决方案

估计时间