思路:如果是简单的背景加文字,背景图会把文字挡住,又或者是背景图要有图标加文字,这时需要用canvas将背景图,图标和文字合并成一张图片,加载billboard的时候直接加载合成之后的图片即可。
let canvas = document.createElement("canvas"); canvas.width = 100; canvas.height = 30; let context = canvas.getContext("2d"); context.rect(0, 0, canvas.width, canvas.height); let bgImg = new Image(); bgImg.src = require("../img/bg.png"); // 背景图的url bgImg.crossOrigin = "Anonymous"; bgImg.onload = () => { context.fillStyle = '#ffffff'; // 设置文字的填充颜色 context.font = 'italic 15px Georgia'; // 设置文字的填充样式 context.fillText("文本内容", 10, 20); context.drawImage(bgImg, 0, 0, 100, 30); let img = new Image(); img.src = require("../img/icon.png");; // 需要合进去的图片url img.crossOrigin = "Anonymous"; img.onload = () => { context.drawImage(img, 0, 0, 16, 16); let base64 = canvas.toDataURL("image/png"); this.viewer.entities.add({ position: Cesium.Cartesian3.fromDegrees(Number(lng), Number(lat), 0), billboard: { image: base64, heightReference: Cesium.HeightReference.CLAMP_TO_GROUND, verticalOrigin: Cesium.VerticalOrigin.BOTTOM, disableDepthTestDistance: Number.POSITIVE_INFINITY, pixelOffset: new Cesium.Cartesian3(0, 0), //偏移量 } }); }; }
标签:canvas,img,Cesium,context,billboard,bgImg,背景图 From: https://www.cnblogs.com/webgis-ling/p/18329808