vue ArcGis想在地图上打几个图片点怎么打？来 我教你

一、前言

在实际的ArcGis地图应用开发中会遇到需要在地图上标注具体点位的需求，本文将对如何实现此需求进行说明。

二、效果图

这里不限制point数量，最终的point展示方式以实际需求为主

三、new Graphic 基本点

Graphic官方定义是现实世界地理现象的矢量表示。它可以包含几何图形、符号和属性，图形显示在GraphicsLayer(图层)中。

这里其实很好理解就是建立一个Graphic图形并且配置这个图形的类型、颜色、大小等一些基本信息然后将这个图形添加到图层即可，这里我们尝试画一个最基本的点信息

定义点信息

// 空间坐标参照
let spatialReference = new SpatialReference({wkid: 102100});

let pt = {
  id: point_id,            // 点id
  type: "point",
  x: '-13048353.166569024',     // 坐标
  y: '4041363.935436187',
  spatialReference: spatialReference,   // 空间坐标参照
};

let spot = new Graphic({          // 图形是现实世界地理现象的矢量表示。它可以包含几何图形、符号和属性
  attributes: ``,                 // 这里可以添加一些自定义的参数用于后续业务需要
  geometry: pt,                   // 点位信息
  symbol: {                       // 图形符号，配置图形的基本信息
    type: "simple-marker",        // 图形类型，这里用到的是简单标记
    color: [255, 255, 255, 0.8],  // 填充色
    size: 15,                     // 图形大小
    outline: {                    // 图形外边线/描边
       width: 0.5, 
       color: "darkblue"
    },
  },
})
this.sketchViewModel.add(spot);         // 绘制层添加当前几何图形

三、new Graphic 图片点

引入ArcGis图片标记服务

"esri/symbols/PictureMarkerSymbol",

官方定义

PictureMarkerSymbol 使用图像在 2D MapView或 3D SceneView 中渲染点图形。一个url必须指向一个有效的图像。PictureMarkerSymbols 可应用于FeatureLayer或单个图形中的点要素。

// 创建图像，三个参数分别是 图片路径、宽、高
let pic = new PictureMarkerSymbol(require("@/assets/imgs/red.png"),18,24);

// 空间坐标参照
let spatialReference = new SpatialReference({wkid: 102100});

let pt = {
  id: point_id,            // 点id
  type: "point",
  x: '-13048353.166569024',     // 坐标
  y: '4041363.935436187',
  spatialReference: spatialReference,   // 空间坐标参照
};

let spot = new Graphic({          // 图形是现实世界地理现象的矢量表示。它可以包含几何图形、符号和属性
  attributes: ``,                 // 这里可以添加一些自定义的参数用于后续业务需要
  geometry: pt,                   // 点位信息
  symbol: pic,                    // 图像
})
this.sketchViewModel.add(spot);         // 绘制层添加当前几何图形

这样我们就成功绘制了一个图片点位

type： 类型有简单的填充、图片、文字等，这里列一些日常常用的类型："simple-marker"|"picture-marker"|"simple-line"|"simple-fill"|"picture-fill"|"text"

attributes： 实际的应用过程中会有地图上要显示不同种类、不同颜色的图形点位需求，可以在这里配置不同的点位参数及类别，然后在点击点位的事件方法里进行类别逻辑判断。

写在最后

在实际的应用开发过程中可以灵活的使用Point方法。如果有同样从事Gis开发的同学可以一起学习交流。