按配置数据绘制配置型地图marker的icon,自定义marker

一、需求

需要自定义配置数据的marker,其中图片内容要灵活可配置自动生成。此处项目用的百度地图。

效果图:

二、思路

用背景图+canvas绘制数字的方式生成icon的图片资源。

再将icon生成对应地图marker。

三、代码

canvasImg.js
<!--
* @description canvasImg.js 背景图+绘制内容生成图片资源
* @author xw
!-->export function addFontWithBgImg(file, params, callback) {var ready = new FileReader()/* 开始读取指定的Blob对象或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data: URL格式的字符串以表示所读取文件的内容.*/ready.readAsDataURL(file) // 调用reader.readAsDataURL()方法,把图片转成base64ready.onload = function () {var re = this.resultcanvasDataURL(re, params, callback)}
}/*** path 背景图资源路径* params:{ bgImgStyle: 'no-repeat', bgWidth: 35, bgHeight: 48, fontText: 1, fontWidth: 35, fontHeight: 35, font: 'bold 20px PingFangSC', bgc: '#0081FF', fontColor: '#fff' }* callback*      bgImgStyle = ["no-repeat", // 不平铺"repeat-x", // 横向平铺"repeat-y", // 纵向平铺"repeat" // 全画布平铺];* */
export function canvasDataURL(path, params, callback) {const defaultOptions = {bgImgStyle: 'no-repeat',bgWidth: 45,bgHeight: 48,bgc: '#0081FF',fontText: 1, // 图片正中 大数字font: 'bold 20px PingFangSC',fontWidth: 34,fontHeight: 39,fontColor: '#0081FF',fontTwoText: 1, // 右上角 小数字fontTwo: 'bold 10px PingFangSC',fontTwoColor: '#fff',fontTwoPositionX: 35,fontTwoPositionY: 10,}const options = Object.assign(defaultOptions, params)const { bgImgStyle, bgWidth, bgHeight, fontText, fontWidth, fontHeight, font, bgc, fontColor, fontTwoText, fontTwo, fontTwoColor, fontTwoPositionX, fontTwoPositionY } = options// console.log('createNumberImg()-options', options)const img = new Image()img.src = pathimg.onload = function () {const canvas = document.createElement('canvas');// document.body.appendChild(canvas); //将画布添加到页面上// 设置画布大小canvas.width = bgWidth;canvas.height = bgHeight;// context 获取2D上下文const ctx = canvas.getContext('2d');// 清空画布内容ctx.clearRect(0, 0, canvas.width, canvas.height);// ctx.fillStyle = ctx.createPattern(img, bgImgStyle);// ctx.fillRect(0, 0, canvas.width, canvas.height);// ctx.fill();ctx.drawImage(img, 0, 0, canvas.width, canvas.height)  //绘制背景图片// 背景色 部分,会覆盖背景图, 背景色做背景 和 背景图做背景 二选一// ctx.fillStyle = bgc// 背景画布设置完后,绘制第2层内容, 覆盖在背景上的 内容---ctxTwo--fillText// const ctxTwo = canvas.getContext('2d');ctx.font = fontctx.fillStyle = fontColorctx.textAlign = 'center' // 水平居中 left center right ,positionX = fontWidth / 2const positionX = fontWidth / 2ctx.textBaseline = 'middle' // 垂直居中 top  middle bottom,  positionY = fontHeight / 2const positionY = fontHeight / 2ctx.fillText(String(fontText), positionX, positionY)ctx.font = fontTwoctx.fillStyle = fontTwoColorctx.fillText(String(fontTwoText), fontTwoPositionX, fontTwoPositionY)// 导出为图片数据URLconst imageDataUrl = canvas.toDataURL('image/png', 1); // canvas.toDataURL('image/png', 1)// console.log("生成的图像资源链接:", imageDataUrl);callback(imageDataUrl)}}/*** 将以base64的图片url数据转换为Blob* @param urlData* 用url方式表示的base64图片数据*/
export function convertBase64UrlToBlob(urlData) {const arr = urlData.split(',')const mime = arr[0].match(/:(.*?);/)[1]const bstr = atob(arr[1])let n = bstr.lengthconst u8arr = new Uint8Array(n)while (n--) {u8arr[n] = bstr.charCodeAt(n)}return new Blob([u8arr], { type: mime })
}
具体使用
createIconImg() {// 图片资源 自己找几个bg 在项目里本地引用const iconNormal = require('@/assets/image/bg/normal.png');const iconDanger = require('@/assets/image/bg/danger.png'); const iconInfo = require('@/assets/image/bg/info.png'); const userImgMap = {'0': iconInfo,'1': iconNormal,'2': iconNormal,'3': iconDanger,}const fontColorMap = {'0': '#666','1': '#0081FF','2': '#0081FF','3': 'red',}
const pointList = [{ lng: '113.939435', lat: '22.522226', completeStatus: '0', frequency: 1 },{ lng: '113.947254', lat: '22.524549', completeStatus: '1', frequency: 3 },{ lng: '113.945889',  lat: '22.520798', completeStatus: '2',  frequency: 4 },]// 设置地图 marker ---此处用的百度地图--BMap--使用 canvasDataURL方法const markers = []if (BMap && pointList && pointList.length > 0) {const mapRef = this.$refs.mapmapRef?.clearOverlays()// 生成的icon图片bgWidth背景宽高 要和 canvas画布宽高保持一致const bgWidth = 45const bgHeight = 48const iconSize = new BMap.Size(bgWidth, bgHeight)const iconOptions = { offset: new BMap.Size(25, 50) }pointList.forEach((em, idx) => {const userImg = userImgMap[String(em.completeStatus) || '0']const fontColor = fontColorMap[String(em.completeStatus) || '0']const params = { bgWidth, bgHeight, fontText: String(idx+1), fontColor, fontTwoText: String(em.frequency)} // 生成图片资源canvasDataURL(userImg, params, function (imgUrl) {const siteMarker = this.createMarker(mapRef, imgUrl, iconSize, iconOptions, item, index)markers.push(siteMarker)})})setTimeout(() => { const centerPoint = new BMap.Point(Number(selectRow.pointList[0]?.lng), Number(selectRow.pointList[0]?.lat));mapRef.centerAndZoom(centerPoint, 15)}, 300)}},createMarker(mapRef, iconImg, item, index) {const siteIcon = new BMap.Icon(iconImg,iconSize,iconOptions,)const sitePoint = new BMap.Point(Number(item.lng), Number(item.lat));const siteMarker = new BMap.Marker(sitePoint, {icon: siteIcon})// siteMarker.lisaSiteInfo = item // lisaSiteInfo自定义字段 主要装item信息,在InfoWindow的innerHtml时使用// const newHtml = '<div class="">我是innerHtml</div>'// console.log('newHtml', newHtml)// const infoWindow = new BMap.InfoWindow({//     content: newHtml,//     InfoWindowOptions: {//         width: 400,//         height: 300,//         enableAutoPan: true,//     }// })siteMarker.on('click', function () {alert("carText模拟触发了地图click事件!");// console.log('mapRef', mapRef)// mapRef.openInfoWindow(infoWindow, sitePoint); //开启信息窗口})mapRef.addOverlay(siteMarker)return siteMarker},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/246712.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Pytest 识别case规则

一、Python测试框架&#xff0c;主要特点有以下几点&#xff1a; 简单灵活&#xff0c;容易上手&#xff1b;支持参数化&#xff1b;能够支持简单的单元测试和复杂的功能测试&#xff0c;还可以用来做selenium/appnium等自动化测试、接口自动化测试&#xff08;pytestrequests…

《Vue3 基础知识》 Vue2+ElementUI 自动转 Vue3+ElementPlus(GoGoCode)

前言 GoGoCode 一个基于 AST 的 JavaScript/Typescript/HTML 代码转换工具。 AST abstract syntax code 抽象语法树。 实现 第一步&#xff1a;安装 GoGoCode 插件 全局安装最新的 gogocode-cli 即可 npm i gogocode-cli -g查看版本 gogocode-cli -V相关插件说明 插件描述…

webassembly003 whisper.cpp的python绑定实现+Cython+Setuptools

python绑定项目 官方未提供python的封装绑定&#xff0c;直接调用执行文件 https://github.com/stlukey/whispercpp.py提供了源码和Cpython结合的绑定 https://github.com/zhujun1980/whispercpp_py提供了ctype方式的绑定&#xff0c;需要先make libwhisper.so Pybind11 bi…

React中使用LazyBuilder实现页面懒加载方法二

前言&#xff1a; 在一个表格中&#xff0c;需要展示100条数据&#xff0c;当每条数据里面需要承载的内容很多&#xff0c;需要渲染的元素也很多的时候&#xff0c;容易造成页面加载的速度很慢&#xff0c;不能给用户提供很好的体验时&#xff0c;懒加载是优化页面加载速度的方…

mysql 基础(三)

一、多表设计 数据库设计范式 第一范式(确保每列保持原子性) 第一范式是最基本的范式。如果数据库表中的所有字段值都是不可分解的原子值&#xff0c;就说明该数据库表满足了第一范式。第二范式就是要有主键&#xff0c;要求其他字段都依赖于主键。 没有主键就没有唯一性&…

SpringBoot项目配置SSL后,WebSocket连接失败的解决方案

SpringBoot项目配置SSL后&#xff0c;WebSocket连接应使用wss协议&#xff0c;而不是ws协议。在前端配置WebSocket时&#xff0c;URL以wss://开头。

【Linux】-同步互斥的另一种办法-信号量

&#x1f496;作者&#xff1a;小树苗渴望变成参天大树&#x1f388; &#x1f389;作者宣言&#xff1a;认真写好每一篇博客&#x1f4a4; &#x1f38a;作者gitee:gitee✨ &#x1f49e;作者专栏&#xff1a;C语言,数据结构初阶,Linux,C 动态规划算法&#x1f384; 如 果 你 …

【VB测绘程序设计】案例13——几种常用的角度转换子程序Function功能的使用(附源代码)

【VB测绘程序设计】案例13——几种常用的角度转换子程序Function的使用(附源代码) 文章目录 前言一、界面展示二、程序说明三、程序代码1.角度转换子程序jdzh()四、数据演示总结前言 使用VB编写测绘程序,最基础的对于角度在导线测量计算中频繁需要角度的计算,从度分秒转…

TCP 异常断开连接【重点】

参考链接 https://xiaolincoding.com/network/3_tcp/tcp_down_and_crash.html https://xiaolincoding.com/network/3_tcp/tcp_unplug_the_network_cable.html#%E6%8B%94%E6%8E%89%E7%BD%91%E7%BA%BF%E5%90%8E-%E6%9C%89%E6%95%B0%E6%8D%AE%E4%BC%A0%E8%BE%93 关键词&#xff1a…

STM32CubeMX教程31 USB_DEVICE - HID外设_模拟键盘或鼠标

目录 1、准备材料 2、实验目标 3、模拟鼠标实验流程 3.0、前提知识 3.1、CubeMX相关配置 3.1.0、工程基本配置 3.1.1、时钟树配置 3.1.2、外设参数配置 3.1.3、外设中断配置 3.2、生成代码 3.2.0、配置Project Manager页面 3.2.1、设初始化调用流程 3.2.2、外设中…

Dialog 对应的 Context 的探究

前言 创建Dialog的时候知道在Dialog的构造方法中需要一个上下文环境&#xff0c;而对这个“上下文”没有具体的概念结果导致程序报错&#xff0c; 于是发现Dialog需要的上下文环境只能是activity。 所以接下来这篇文章将会从源码的角度来彻底的理顺这个问题。 一、Dialog创…

以太网的 MAC 层

目录 1. MAC 层的硬件地址 48 位的 MAC 地址 2. MAC 帧的格式 以太网 V2 的 MAC 帧格式 无效的 MAC 帧 IEEE 802.3 MAC 与以太网 V2 MAC 帧格式的区别 1. MAC 层的硬件地址 硬件地址又称为物理地址&#xff0c;或 MAC 地址。 IEEE 802 标准为局域网规定了一种 48 位…

企业虚拟机服务器中了lockbit3.0勒索病毒怎么办,lockbit3.0勒索病毒解密处理流程

对于企业来说&#xff0c;企业的数据是企业的核心命脉&#xff0c;关乎着企业的生产与运营的所有工作。随着网络技术的不断发展&#xff0c;网络安全威胁也在不断增加。近期&#xff0c;云天数据恢复中心接到了很多企业的求助&#xff0c;企业的虚拟机服务器遭到了lockbit3.0勒…

统计学-R语言-8.3

文章目录 前言例题例题一例题二例题三例题四例题五例题六例题七 总结 前言 本篇介绍的是有关方差知识的题目介绍。 例题 例题一 &#xff08;数据&#xff1a;exercise7_3.RData&#xff09;为研究上市公司对其股价波动的关注程度&#xff0c;一家研究机构对在主板、中小板和…

2022年至2023年广东省职业院校技能大赛高职组“信息安全管理与评估”赛项样题

2022 年至 2023 年广东省职业院校技能大赛高职组“信息安全管理与评估”赛项样题 一、 第一阶段竞赛项目试题 本文件为信息安全管理与评估项目竞赛第一阶段试题&#xff0c;第一阶段内容包 括&#xff1a;网络平台搭建、网络安全设备配置与防护。 本阶段比赛时间为 180 分钟…

代码随想录算法刷题训练营day17

代码随想录算法刷题训练营day17&#xff1a;LeetCode(110)平衡二叉树 LeetCode(110)平衡二叉树 题目 代码 /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode() {}* TreeNode(…

计算机网络——TCP协议

&#x1f4a1;TCP的可靠不在于它是否可以把数据100%传输过去&#xff0c;而是 1.发送方发去数据后&#xff0c;可以知道接收方是否收到数据&#xff1b;2.如果接收方没收到&#xff0c;可以有补救手段&#xff1b; 图1.TCP组成图 TCP的可靠性是付出代价的&#xff0c;即传输效率…

Linux CPU 负载说明

一、背景 工作中我们经常遇到CPU 负载高&#xff0c;CPU负载高意味着什么&#xff1f; CPU的负载是怎么计算的&#xff1f; top指令中的各个指标代表什么含义&#xff1f; 二、CPU 负载计算方法 在系统出现负载问题&#xff0c;通常会使用uptime和top确认负载&#xff0c;这两…

项目管理平台

技术架构&#xff1a; MySQL、Servlet、JSP 功能模块&#xff1a; 从管理员角度看: 用户登入系统后&#xff0c;可以修改管理员的密码。同时具有以下功能&#xff1a; 1、管理员可以管理具体项目信息。 2、管理员可以管理项目经费信息。 3、管理员可以管理项目资源信息。 4、…

【自然语言处理】【深度学习】文本向量化、one-hot、word embedding编码

因为文本不能够直接被模型计算&#xff0c;所以需要将其转化为向量 把文本转化为向量有两种方式&#xff1a; 转化为one-hot编码转化为word embedding 一、one-hot 编码 在one-hot编码中&#xff0c;每一个token使用一个长度为N的向量表示&#xff0c;N表示词典的数量。 即&…