cesium添加自定义气泡点

在许多场景中，我们需要添加个性，自定义的气泡。上面可以添加自己所想要表达的信息，类似图1.

图1 自定义气泡

其实非常简单，大家应该也看出来了，起始所谓的气泡不过是一张图片，在cesium中可以以billboard的方式加载一张图片。如果需要同时加载许多不同种类的气泡，为了提升效率，我们可以将所有种类的气泡框放在一张图片中。应为cesium中的billboard可以添加字图片（即一张图片的一小部分）。

功能API
其意思是通过定义BoundingRectangle的属性可以定义图像的子区域，以左下角作为原点。而定义BoundingRectangle的方法也非常简单，他的四个参数分别为x（截取图片在原图片的x坐标），y（截取图片在原图片的y坐标），width（截取图片宽度）以及height（截取图片高度）。这样我们就能根据不同属性俩获取不同的对话气泡。效果如图2，这些气泡都是放在一张图片中的。
图2 气泡效果

 var ORIG_FID = feature.properties.ORIG_FID;
                            var x = ORIG_FID%5;
                            var item = {
                                value:x,
                                Percentage :x/5*100,
                            };


                            tempEntitys.push(map._viewer.entities.add({
                                position: Cesium.Cartesian3.fromDegrees(feature.geometry.coordinates[0], feature.geometry.coordinates[1], l),
                                billboard: {
                                    //image: drawCompanyTip(item),
                                    image: "./images/energy.png",
                                    scaleByDistance: new Cesium.NearFarScalar(1.5e2, 1.0, 1.5e7, 0.5),
                                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                                    width:70,
                                    height:70,
                                    imageSubRegion:{x:x*134,y:0,width:134,height:136}
                                },
                            }));

如果需要添加文字的话，需要对图片进行修改，创建一个canvas，把我们的图片作为背景并添加上需要显示的其他要素，最后让billboard来显示我们的创建的canvas。

var assetsTipImage;
        function getassetTipTexture(){
            var img = document.createElement('img');
            img.src = './images/map/equipment/test.png';
            img.onload = function(){
                assetsTipImage = img;
            };
        }
        getassetTipTexture();

        function drawAssetsTip(prop){
            if (typeof assetsTipImage == 'undefined') return;
            var canvas = document.createElement("canvas");
            canvas.width = 74;
            canvas.height = 74;
            var context = canvas.getContext('2d');
            //绘制背景
            context.drawImage(assetsTipImage, 0, 0);
            //绘制第一行数字
            var dom = prop.value;
            context.font = '10px bold 宋体';
            context.fillStyle = "#ffef00";
            context.fillText(dom, 20, 35);
            //绘制第一行数字
            var dom = "个";
            context.font = '10px bold 宋体';
            context.fillStyle = "#ffef00";
            context.fillText(dom, 40, 35);
            //绘制第一行数字
            var dom = prop.assets;
            context.font = '10px bold 宋体';
            context.fillStyle = "#f4fff0";
            context.fillText(dom, 20, 45);
            return canvas;
        }

billboard的image改成 image: drawCompanyTip(item),
运行结果如图1效果。

20190819更新
在项目使用过程中发现，如果canvas读取的图片过大，会导致图片刷新变黑，而且是所有的billboard，可能是canvas崩溃的原因。说明cesium自带的billboard也是canvas写的，但是三维的地图却没有挂。明白的大神可以注明下原因，感激不尽。所以必须缩小图片，而且不要一边特别大，一边特别小。这样也会发生崩溃。比如说2003900会导致崩溃的话6001300可能就不会导致崩溃。而且注意，cesium显示的起点是左下角。而canvas是从左上角为起点，特别要注意下