文章目錄

• • 1.實現效果
  • 2.實現方法
  • • 2.1背景
    • 2.2思路
    • 2.3實現

Cesium實戰系列文章總目錄： 傳送門

1.實現效果

2.實現方法

2.1背景

在Cesium項目開發過程中，需要使用點聚合功能，因此在聚合時需要動態更新聚合圖標上被聚合的點位的數量。

2.2思路

查看了一下Cesium的官方文檔，發現Cesium的PinBuilder提供了類似的功能，但其只能自定義圖片或者文字的一種，不能同時自定義，而且其圖標的外形是固定的，不能滿足自定義圖標的需求。

因此，思路是在聚合圖標上動態添加聚合數量來生成新圖標，參考了Cesium源碼中的PinBuilder自定義圖片或文字的方式和向Cesium提供的向圖片中寫文字的函數writeTextToCanvas。

具體的實現方法是先異步加載原始圖標，使用H5的Canvas對象，先畫出圖片，再追加文字，最后將Canvas保存，即可生成圖片與文字合成后的新圖標。

2.3實現

參考Cesium源碼實現圖片與文字合成新圖標的具體實現代碼如下：

/*** @description: 將圖片和文字合成新圖標使用（參考Cesium源碼）* @param {*} url：圖片地址* @param {*} label：文字* @param {*} size：畫布大小* @return {*} 返回canvas*/ function combineIconAndLabel(url, label, size) {// 創建畫布對象let canvas = document.createElement('canvas');canvas.width = size;canvas.height = size;let ctx = canvas.getContext("2d");let promise = new Cesium.Resource.fetchImage(url).then(image => {// 異常判斷try {ctx.drawImage(image, 0, 0);} catch (e) {console.log(e);}// 渲染字體// font屬性設置順序：font-style, font-variant, font-weight, font-size, line-height, font-familyctx.fillStyle = Cesium.Color.WHITE.toCssColorString();ctx.font = 'bold 20px Microsoft YaHei';ctx.textAlign = "center";ctx.textBaseline = "middle";ctx.fillText(label, size / 2, size / 2);return canvas;});return promise; }

總結

以上是生活随笔為你收集整理的cesium实现图片与文字合成新图标的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。