arcgis for js 添加自定义叠加图片到地图坐标点上

在使用arcgis for js开发地图绘制图层时,可以通过相关api实现添加图标到某个坐标点,那么如果现在有一个需要添加一个小图叠大图的需求,又或者是自定义绘制图标,如何实现?

1、简单地绘制一个图标到底图图层上面

typescript 复制代码
const graphicsLayer = new GraphicsLayer();
const graphic = new Graphic();
const point = new Point({
	x,
	y,
	spatialReference: 4546, // 假设坐标系为4546
});
const pointSymbol = new PictureMarkerSymbol({
	url: "./test_icon.svg", // 图标相对路径
 	height: 22,
	width: 22,
	yoffset: 10, // 偏移量
});
graphic.geometry = point;
graphic.symbol = pointSymbol;
graphicsLayer.add(graphic);
map.add(graphicsLayer);

我们发现,这样子只能添加一个特定的图片到该坐标点,假设我需要在这个点上面大图叠加一个小图标,如何实现呢?

翻阅了资料,关于叠加自定义图层api版本不一致也很难实现,偶然发现url可以渲染base64图片。那我直接绘制生成base64图片再添加到图层上面,不就可以实现需求了?

实践一下:

2、使用canvas绘制生成base64图片

typescript 复制代码
function createCustomIcon() {
  return new Promise((resolve, reject) => {
  	let url:string = "";
    const canvas = document.createElement("canvas");
    // 获取 Canvas 的 2D 上下文
    const ctx = canvas.getContext("2d");
    if (!ctx) return;
    canvas.width = 40;
    canvas.height = 40;
    // 绘制 SVG 图标到 Canvas
    const img = new Image();
    const innerImg = new Image();
    img.src = './img.svg'; // 外层图
    innerImg.src = './inner_img.svg'; // 叠加内层图
    innerImg.onload = function () {
       ctx.drawImage(img, 0, 0, 40, 40); // 外层图
       ctx.drawImage(innerImg, 10, 6, 20, 20); // 叠加图
       url = canvas.toDataURL(); // 生成 Canvas 的 Data URL
       resolve(url);
    };
  });
}

现在已经绘制生成了一个图片,直接访问url是否正确显示,根据这个方法可以绘制任意你想绘制的图片。

现在将混合的图片添加到图层上面:

3、将自定义叠加图添加到图层上面

typescript 复制代码
const url = await createCustomBase64();
// 和步骤1 一样,就是将图片路径修改一下
const pointSymbol = new PictureMarkerSymbol({
	url, // canvas绘制生成的图片URL
 	height: 22,
	width: 22,
	yoffset: 10, // 偏移量
});
// ...

效果图:

这是由两个小图标组合的图,可以根据需求改变innerImg或者img实现多个不同组合图标,并且添加到图层上面。

当然,也可以使用canvas随意绘制自定义图形添加到图层。

相关推荐
AI智能研究院2 小时前
TypeScript 快速入门与环境搭建
前端·javascript·typescript
计算机软件大师4 小时前
ArcGIS 10.8 软件安装教程
arcgis
非科班Java出身GISer4 小时前
ArcGIS JSAPI 学习教程 - 要素图层(FeatureLayer)分类、分组设置可视化样式(ClassBreaksRenderer)
arcgis·arcgis js·arcgis 要素可视化·arcgis要素图层客户号·featurelayer可视化·arcgis属性可视化
杨超越luckly4 小时前
HTML应用指南:利用POST请求获取中国一汽红旗门店位置信息
前端·arcgis·html·数据可视化·门店数据
GIS小小研究僧10 小时前
GIS与农业 考公考编面试 几个参考题
arcgis·conda·gis·qgis·rs
杨超越luckly21 小时前
HTML应用指南:利用GET请求获取全国沃尔沃门店位置信息
前端·arcgis·html·数据可视化·门店数据
liangshanbo12151 天前
React + TypeScript 企业级编码规范指南
ubuntu·react.js·typescript
duandashuaige2 天前
解决用electron打包Vue工程(Vite)报错electron : Failed to load URL : xxx... with error : ERR _CONNECTION_REFUSED
javascript·typescript·electron·npm·vue·html
Damon小智2 天前
仓颉 Markdown 解析库在 HarmonyOS 应用中的实践
华为·typescript·harmonyos·markdown·三方库
小小弯_Shelby2 天前
arcgis api for javascript 修改地图图层要素默认的高亮效果
arcgis