添加点、线和面

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

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

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

步骤 ​

创建新 Pen ​

1. 要开始使用，请完成显示地图教程 。

添加模块 ​

1. 通过 require 引入 Graphic 和 GraphicsLayer 模块。

   更多内容

   GeoScene Maps SDK for JavaScript 提供了 AMD 模块和 ES 模块，本教程中我们是以 AMD 为例。AMD 使用require 函数加载模块 - 例如，您可以指定 "geoscene/Map" 来加载 Map 模块。加载后，它们将作为参数 (例如，Map) 传递给回调函数，以便在应用程序中使用。保持引用模块和回调参数的顺序相同是很重要的。有关不同类型模块的更多信息，请访问工具指南主题。

   js

   require([
       "geoscene/config",
       "geoscene/Map",
       "geoscene/views/MapView",
       "geoscene/Graphic",
       "geoscene/layers/GraphicsLayer"
   ], function(geosceneConfig,Map, MapView, Graphic, GraphicsLayer) {
   
   })

   1
   2
   3
   4
   5
   6
   7
   8
   9
   

添加图形图层 ​

图形图层是图形的容器。它与地图视图结合使用在地图上显示图形。您可以将多个图形图层添加到地图视图中。图形图层显示在其他类型图层之上。

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

   js

   const view = new MapView({
       map: map,
       center: [116.8,39], //经度，纬度
       zoom: 13,
       container: "viewDiv"
   });
   
   const graphicsLayer = new GraphicsLayer();
   map.add(graphicsLayer);

   1
   2
   3
   4
   5
   6
   7
   8
   9
   

添加点图形 ​

点图形通过点和标记符号创建。使用经度 (x) 和纬度 (y) 定义点坐标，使用颜色和轮廓定义一个简单符号。使用Point 和 SimpleMarkerSymbol 类就可以创建一个点图形。

1. 创建 point 和 simpleMarkerSymbol。

   js

   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: [226, 119, 40], 
       outline: {
           color: [255, 255, 255], 
           width: 1
       }
   };

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   

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

   更多内容

   点图形支持多种符号类型，如 SimpleMarkerSymbol、PictureMarkerSymbol 和 TextSymbol。了解关于符号的更多信息。

   js

   const point = { //Create a point
       type: "point",
       longitude: 116.80657463861,
       latitude: 39.0005930608889
       };
       const simpleMarkerSymbol = {
       type: "simple-marker",
       color: [226, 119, 40], 
       outline: {
           color: [255, 255, 255], 
           width: 1
       }
   };
   
   const pointGraphic = new Graphic({
   geometry: point,
   symbol: simpleMarkerSymbol
   });
   graphicsLayer.add(pointGraphic);

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   

3. 验证点图形位置是否正确。

添加线图形 ​

线图形通过折线和线符号创建。折线是一个点序列，有时候还需要指定空间参考。使用Polyline 和 SimpleLineSymbol 类就可以创建一个线图形。

1. 创建 polyline 和 simpleLineSymbol。

   js

   const pointGraphic = new Graphic({
       geometry: point,
       symbol: simpleMarkerSymbol
   });
   graphicsLayer.add(pointGraphic);
   
   // Create a line geometry
   const polyline = {
       type: "polyline",
       paths: [
           [116.821527826096, 39.0139576938577], //经度，纬度
           [116.814893761649, 39.0080602407843], //经度，纬度
           [116.808878330345, 39.0016642996246] //经度，纬度
       ]
   };
   const simpleLineSymbol = {
       type: "simple-line",
       color: [226, 119, 40], 
       width: 2
   };

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   

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

   更多内容

   折线图形支持多种符号类型，如 SimpleLineSymbol 和 TextSymbol。了解关于符号的更多信息。

   js

   // Create a line geometry
   const polyline = {
       type: "polyline",
       paths: [
           [116.821527826096, 39.0139576938577], //经度，纬度
           [116.814893761649, 39.0080602407843], //经度，纬度
           [116.808878330345, 39.0016642996246] //经度，纬度
       ]
   };
   const simpleLineSymbol = {
       type: "simple-line",
       color: [226, 119, 40], 
       width: 2
   };
   
   const polylineGraphic = new Graphic({
       geometry: polyline,
       symbol: simpleLineSymbol
   });
   graphicsLayer.add(polylineGraphic);

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   19
   20
   

3. 验证线图形位置是否正确。

添加面图形 ​

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

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

   js

   const polylineGraphic = new Graphic({
       geometry: polyline,
       symbol: simpleLineSymbol
   });
   graphicsLayer.add(polylineGraphic);
   
   // Create a polygon geometry
   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: [227, 139, 79, 0.8], , opacity 80%
       outline: {
           color: [255, 255, 255],
           width: 1
       }
   };

   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
   

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

   更多内容

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

   js

   // Create a polygon geometry
   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: [227, 139, 79, 0.8], , opacity 80%
       outline: {
           color: [255, 255, 255],
           width: 1
       }
   };
   
   const polygonGraphic = new Graphic({
       geometry: polygon,
       symbol: simpleFillSymbol,
   });
   graphicsLayer.add(polygonGraphic);

   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
   

3. 验证面图形位置是否正确。

创建弹出窗口 ​

单击图形时，一般会显示图形的弹出窗口。以下代码我们展示如何在弹出窗口中显示面图形名称和描述。代码中使用了 attribute 和 popupTemplate 属性。

1. 首先，定义图形的 popupTemplate 和 attributes。

   js

   const simpleFillSymbol = {
       type: "simple-fill",
       color: [227, 139, 79, 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"
   }

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   

2. 然后修改 polygonGraphic定义，赋值 popupTemplate 和 attribute 属性。

   js

   const polygonGraphic = new Graphic({
       geometry: polygon,
       symbol: simpleFillSymbol,
   
       attributes: attributes,
       popupTemplate: popupTemplate
   });
   graphicsLayer.add(polygonGraphic);

   1
   2
   3
   4
   5
   6
   7
   8
   

运行应用程序 ​

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

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

下一步是什么？ ​

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

• 添加要素图层
• 搜索地址