前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >vue ArcGis想在地图上打几个图片点怎么打?来 我教你

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

作者头像
inline705
发布2021-12-09 15:32:54
1.9K0
发布2021-12-09 15:32:54
举报
文章被收录于专栏:vue+ArcGis

一、前言

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

二、效果图

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

三、new Graphic 基本点

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

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

定义点信息

代码语言:javascript
复制
// 空间坐标参照
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图片标记服务

代码语言:javascript
复制
"esri/symbols/PictureMarkerSymbol",
复制代码

官方定义

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

代码语言:javascript
复制
// 创建图像,三个参数分别是 图片路径、宽、高
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开发的同学可以一起学习交流。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2021年11月04日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 一、前言
  • 二、效果图
  • 三、new Graphic 基本点
  • 三、new Graphic 图片点
    • 写在最后
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档