9.绘制点、线、面

最新推荐文章于 2022-05-15 14:39:27 发布

GIS猫

最新推荐文章于 2022-05-15 14:39:27 发布

阅读量1.1k

点赞数 1

分类专栏： ArcGIS for JS

原文链接：https://developers.arcgis.com/javascript/latest/guide/display-point-line-and-polygon-graphics/

版权

ArcGIS for JS 专栏收录该内容

13 篇文章

订阅专栏

概述

本节您将学到： 如何通过已知坐标串生成点、线、面并添加到地图中。

在应用中，我们可以使用 Graphic 在地图上显示图形。每个 Graphic 可以由一个 geometry(图形) 、一个 symbol(符号) 、一系列属性组成和一个 pop-up 组成。 Graphic 通常由用户直接在地图上交互点击绘制生成或者通过已知坐标串等数据生成。 Graphic 可以通过添加一个 graphic layer中，然后加入到地图中，也可以作为一个 feature layer
的 source(数据源) 加入到地图中显示。

在本节中，我们将使用已知的坐标串创建点、线、面图形，并加入到地图中显示。

效果图

撸代码步骤

创建一个简单HTML页面

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>ArcGIS JavaScript Tutorials: Create a Starter App</title>
  <style>
    html, body, #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  
  <link rel="stylesheet" href="https://js.arcgis.com/4.12/esri/css/main.css">
  <script src="https://js.arcgis.com/4.12/"></script>
  
  <script>  
    require([
      "esri/Map",
      "esri/views/MapView",
    ], function(Map, MapView) {

      var map = new Map({
        basemap: "topo-vector"
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-118.80543,34.02700],
        zoom: 13
      });

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

添加点状图形

在 require 模块增加 Graphic 模块引用。

require([
    "esri/Map",
    "esri/views/MapView",
    "esri/Graphic"
], function(Map, MapView, Graphic) {

在 mian 方法底部，定义 point 和 simpleMarkerSymbol 两个对象，并用它们作为参数创建 Graphic,然后将创建的 Graphic 加入到 view 的 graphics 集合中。在创建 Graphic 创建时 point 和 simpleMarkerSymbol 会自动
转为对应的 Geometry 和 Symbol 对象实例。有关自动转换的内容，可以查看：

autocasting : https://developers.arcgis.com/javascript/latest/guide/programming-patterns/#autocasting

点状图形支持不同类型符号渲染，例如 SimpleMarkerSymbol (简单点) 、 PictureMarkerSymbol（图片符号）、 TextSymbol(文字符号)，有关符号化可以查看：
https://developers.arcgis.com/javascript/latest/api-reference/esri-symbols-Symbol.html

运行代码，可以看到效果图中的点状图形会绘制出来。

添加线状图形

定义 line 和 simpleLineSymbol 两个对象，并用它们作为参数创建 Graphic,然后将创建的 Graphic 加入到 view 的 graphics 集合中。

线状图形可以使用 SimpleLineSymbol(简单线符号) 和 TextSymbol(文字符号) 进行渲染。需要注意的是一个线状图形 geometry (Polyline) 可以表示一条连续的线，也可以表示有多条不互相
连接的多段线。

var simpleLineSymbol = {
    type: "simple-line",
    color: [226, 119, 40], // orange
    width: 2
};

/**
 * 一条连续的线
 */
var polyline = new Polyline({
    paths: [
    [-118.29026, 34.1816],
    [-118.26451, 34.09664]
    ]
});

/**
 * 不连续的多条线
 */
// var polyline = new Polyline({
//     paths:[
//         [
//             [-118.29026, 34.1816],
//             [-118.26451, 34.09664]
//         ],
//         [
//             [-119.29026, 34.1816],
//             [-119.26451, 34.09664]
//         ]
//     ]
// });

var polylineGraphic = new Graphic({
    geometry: polyline,
    symbol: simpleLineSymbol
})

view.graphics.add(polylineGraphic);

运行代码，可以看到效果图中线状图形已经被绘制出来了。

添加面状图形

定义 polygon 和 simpleFillSymbol 两个对象，并用它们作为参数创建 Graphic,然后将创建的 Graphic 加入到 view 的 graphics 集合中。

面状图形可以使用 SimpleFillSymbol(简单面填充符号), PictureFillSymbol(图片填充) 和 TextSymbol(文字填充) 进行渲染。需要注意的是一个面状图形可以表示
镂空面（岛屿）类型的面，也可以表示多个面（多面），但在表示镂空面（岛屿）时，外部面的坐标需要以顺时针方式排序，内部面坐标以逆时针排序。


/**
 * 单个面
 */
var polygon = {
    type: "polygon",
    rings: [
    [-118.27653, 34.15121],
    [-118.2446, 34.15462],
    [-118.22915, 34.14439],
    [-118.23327, 34.12279],
    [-118.25318, 34.10972],
    [-118.26486, 34.11625],
    [-118.27653, 34.15121]
    ]
};


var simpleFillSymbol = {
    type: "simple-fill",
    color: [227, 139, 79, 0.8],  // 橘色，透明度80%
    outline: {
    color: [255, 255, 255],
    width: 1
    }
};

var polygonGraphic = new Graphic({
    geometry: polygon,
    symbol: simpleFillSymbol
});

view.graphics.add(polygonGraphic);

运行代码，可以看到效果图中面状图形已经被绘制出来了。

到此为止，我们已经学会如何使用已知坐标创建创建点、线、面图形了。

再撸点

添加 pop-up

Graphic 能包含有键值对属性，同时也能通过pop-up在鼠标点击时弹出属性内容。我们可以为上面的点状图形增加属性，并设置 popupTemplate 使其能在点击时弹出属性内容。

var point = {
    type: "point",
    longitude: -118.29507,
    latitude: 34.13501
};

var simpleMarkerSymbol = {
    type: "simple-marker",
    color: [226, 119, 40],
    outline: {
        color: [255, 255, 255],
        width: 1
}
};

//*** 新增代码 ***//
var attributes = {
    Name: "I am a point",
    Park: "Griffith Park",
    City: "Los Angeles"
};

//***  新增代码 ***//
var popupTemplate = {
    title: "{Name}",
    content: "I live in <b>{Park}</b> in the city of <b>{City}</b>."
};

var pointGraphic = new Graphic({
    geometry: point,
    symbol: simpleMarkerSymbol,
    //*** 新增代码***//
    attributes: attributes,
    popupTemplate: popupTemplate
});

view.graphics.add(pointGraphic);

运行代码，点击点状图形，效果如下。

使用图片符号

如果我们需要用图片表示点状符号，我们可以使用 PictureMarkerSymbol（图片符号）。

var pictureGraphic = new Graphic({
    geometry: {
        type: "point",
        x: -118.31,
        y: 34.182
    },
    symbol: { //自动转为`PictureMarkerSymbol`对象
        type: "picture-marker",
        url: "https://developers.arcgis.com/labs/images/bluepin.png",
        width: "14px",
        height: "26px"
    }
});

view.graphics.add(pictureGraphic);