cesium结合canvas实现自定义气泡点

知识点

canvas

首先利用canvas动态绘制气泡图片（详细看canvas简述）

固定代码
```
let canvas = document.querySelector('#canvas');
let ctx = canvas.getContext('2d');
```
这两句代码是获取canvas标签，获取画布；获取上下文，获取绘制的工具箱。canvas所有的操作都是基于ctx进行的。
drawImage()画图，分为3个参数，5个参数，9个参数三种情况。
font设置字体，fillstyle填充样式
fillText()绘制文字

举例

这是原图：
在这里插入图片描述
这是绘制代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #canvas {
            border: 1px solid #ccc;
            display: block;
            margin: 0 auto;
        }
    </style>
</head>
<body>
<canvas id="canvas" width="400" height="400"></canvas>
<script>
    let canvas = document.querySelector('#canvas');
    let ctx = canvas.getContext('2d');
    let image = new Image();
    image.src = 'photo.png';
    image.addEventListener('load',()=>{
        ctx.drawImage(image, 100, 100, 800, 800, 0, 0, 400, 400);
        ctx.font = '64px bold 楷体';
        ctx.fillStyle = 'red';
        ctx.fillText('118'+'个',104,160);
        ctx.font = '64px bold 楷体';
        ctx.fillStyle = 'black';
        ctx.fillText('灾害点',104,232);
    })

</script>
</body>
</html>

这是运行结果：
在这里插入图片描述

billboard

我们可以使用entity的billboard属性，增加图片，并对其进行实时绘制

billboard官方API解释
我们可以设置billboard的图片、显示距离、显示方式等等

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="js/Cesium1.63/Widgets/widgets.css">
    <style>
        #box {
            height: 650px;
            width: 1000px;
            background-color: red;
            margin: 20px 250px;
        }
        #canvas {
            border: 1px solid #ccc;
            display: block;
            margin: 0 auto;
        }

    </style>
</head>
<body>
<div id="box"></div>
<canvas id="canvas" width="50" height="50"></canvas>


<script src="js/jquery-3.4.1.js"></script>
<script src="js/Cesium1.63/Cesium.js"></script>
<script>

    viewer = new Cesium.Viewer('box', {
        animation: false,
        baseLayerPicker: false,
        geocoder: true,
        timeline: false,
        sceneModePicker: true,
        navigationHelpButton: false,
        useDefaultRenderLoop: true,
        showRenderLoopErrors: true,
        fullscreenButton: true,
        fullscreenElement: 'map3d',
        infoBox: true,
        mapProjection: new Cesium.WebMercatorProjection(),
        imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
            url: "http://t0.tianditu.com/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=ebf64362215c081f8317203220f133eb",
            layer: "tdtBasicLayer",
            style: "default",
            format: "image/jpeg",
            tileMatrixSetID: "GoogleMapsCompatible",
            show: false,
            maximumLevel: 18
        })
    });
    params = {
        data: [{
            'lon': 108.5525,
            'lat': 34.3227,
            'type': '灾害点',
            'num': 108
        }, {
            'lon': 116.5525,
            'lat': 40.3227,
            'type': '设备',
            'num': 203
        }]

    };
    $.each(params.data,function(index,value){
            viewer.entities.add({
            	name:value.type,
                position:Cesium.Cartesian3.fromDegrees(value.lon,value.lat,1),
                billboard:{
                    image: drawImage(value),
                    scaleByDistance: new Cesium.NearFarScalar(1.5e2, 1.0, 1.5e7, 0.5),
                    verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                    width:100,
                    height:100
                }
            })
    });

    function drawImage(params){
        var image = document.createElement('img');
        image.src = 'photo.png';
        var canvas = document.createElement("canvas");
        canvas.height = 50;
        canvas.width= 50;
        var ctx = canvas.getContext('2d');
        ctx.drawImage(image, 100, 100, 800, 800, 0, 0, 50, 50);
        ctx.font = '8px bold 楷体';
        ctx.fillStyle = 'red';
        ctx.fillText(params.num+'个',13,20);
        ctx.font = '8px bold 楷体';
        ctx.fillStyle = 'black';
        ctx.fillText(params.type,13,29);
        return canvas;
    }
</script>
</body>
</html>

运行结果

运行出来气泡可能显示不出来，说明在气泡没有加载出来的时候就已经画完了。可以为img添加load时间，当期加载完成后再进行画图。
在这里插入图片描述

KaiSarH

发布了270 篇原创文章 · 获赞 123 · 访问量 1万+

私信关注