vue ArcGis想在地图上打几个图片点怎么打?来 我教你
2023-04-18 14:52:03 时间
一、前言
在实际的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
或 3DSceneView
中渲染点
图形。一个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开发的同学可以一起学习交流。
相关文章
- 【技术种草】cdn+轻量服务器+hugo=让博客“云原生”一下
- CLB运维&运营最佳实践 ---访问日志大洞察
- vnc方式登陆服务器
- 轻松学排序算法:眼睛直观感受几种常用排序算法
- 十二个经典的大数据项目
- 为什么使用 CDN 内容分发网络?
- 大数据——大数据默认端口号列表
- Weld 1.1.5.Final,JSR-299 的框架
- JavaFX 2012:彻底开源
- 提升as3程序性能的十大要点
- 通过凸面几何学进行独立于边际的在线多类学习
- 利用行动影响的规律性和部分已知的模型进行离线强化学习
- ModelLight:基于模型的交通信号控制的元强化学习
- 浅谈Visual Source Safe项目分支
- 基于先验知识的递归卡尔曼滤波的代理人联合状态和输入估计
- 结合网络结构和非线性恢复来提高声誉评估的性能
- 最佳实践丨云开发CloudBase多环境管理实践
- TimeVAE:用于生成多变量时间序列的变异自动编码器
- 具有线性阈值激活的神经网络:结构和算法
- 内网渗透之横向移动 -- 从域外向域内进行密码喷洒攻击