昆山网站建设苦瓜网络,常见的网页设计工具,有名的wordpress网站,餐饮网站建设设计价格在使用arcgis for js开发地图绘制图层时#xff0c;可以通过相关api实现添加图标到某个坐标点#xff0c;那么如果现在有一个需要添加一个小图叠大图的需求#xff0c;又或者是自定义绘制图标#xff0c;如何实现#xff1f;
1、简单地绘制一个图标到底图图层上面
const…在使用arcgis for js开发地图绘制图层时可以通过相关api实现添加图标到某个坐标点那么如果现在有一个需要添加一个小图叠大图的需求又或者是自定义绘制图标如何实现
1、简单地绘制一个图标到底图图层上面
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图片
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 图标到 Canvasconst 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 URLresolve(url);};});
}
现在已经绘制生成了一个图片直接访问url是否正确显示根据这个方法可以绘制任意你想绘制的图片。
现在将混合的图片添加到图层上面
3、将自定义叠加图添加到图层上面
const url await createCustomBase64();
// 和步骤1 一样就是将图片路径修改一下
const pointSymbol new PictureMarkerSymbol({url, // canvas绘制生成的图片URLheight: 22,width: 22,yoffset: 10, // 偏移量
});
// ...效果图 这是由两个小图标组合的图可以根据需求改变innerImg或者img实现多个不同组合图标并且添加到图层上面。
当然也可以使用canvas随意绘制自定义图形添加到图层。
