Cesium加载billboard，GIF，模拟socket动态移动（vx gzh【图说GIS】）

ONEGISER(ZPC)

已于 2022-08-26 10:19:15 修改

阅读量2.3k

点赞数 3

分类专栏： Cesium 文章标签： js cesium gis

于 2021-10-31 18:30:34 首次发布

本文链接：https://blog.csdn.net/qq_19689967/article/details/121065886

版权

Cesium 专栏收录该内容

30 篇文章 49 订阅

订阅专栏

在这里插入图片描述

const viewer = new Cesium.Viewer('cesiumContainer');

    let property, entity, lastTime;
    const addEntity = (point) => {
        property = new Cesium.SampledPositionProperty();
        const start = Cesium.JulianDate.now();
        const position = Cesium.Cartesian3.fromDegrees(point.x, point.y, 0);
        property.addSample(start, position);
        lastTime = start;

        const id = "router-fly-line";
        const entityOption = {
            id,
            name: id,
            position: property,
            heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,
            billboard: {
                image: "https://st-gdx.dancf.com/gaodingx/0/uxms/design/20201124-112715-54af.gif",
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM
            },
            orientation: new Cesium.VelocityOrientationProperty(property),
        };

        entity = viewer.entities.add(entityOption);

        viewer.trackedEntity = entity;
        viewer.clock.startTime = start.clone();
        viewer.clock.currentTime = start.clone();
        viewer.clock.clockRange = Cesium.ClockRange.CLAMPED;
        viewer.clock.shouldAnimate = false;
    };

    const getPosition = (time, point) => {
        if (viewer.clock.shouldAnimate === false) {
            viewer.clock.shouldAnimate = true;
        }
        const position = Cesium.Cartesian3.fromDegrees(point.x, point.y, 0);
        const nextTime = Cesium.JulianDate.addSeconds(lastTime, time, new Cesium.JulianDate());
        property.addSample(nextTime, position);
        lastTime = nextTime;
    };
    let x = 103, y = 36, time = 3;//秒
    setInterval(() => {
        if (!property) {
            addEntity({
                x, y
            });
        } else {
            x += 0.0003 * Math.random();
            y += 0.0001;
            const point = {
                x,
                y
            };
            getPosition(time, point);
        }
    }, time * 1000);

1.Cesium的billboard使用动态GIF
在这里插入图片描述
需要注意的是需要引入libgif.js

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <link href="../../Cesium/Widgets/widgets.css" rel="stylesheet">
    <script type="text/javascript" src="../../Cesium/Cesium.js"></script>
    <script src="./libgif.js"></script>
    <title>gif</title>
</head>

<body style="margin: 0px;width:100%;height:100%;">
    <div id="cesiumContainer" style="width:100%;height:100%;position:absolute;"></div>
</body>
<script>
    //created by onegiser at 2021-10-31
    const viewer = new Cesium.Viewer('cesiumContainer', {
        imageryProviderViewModels: [
            new Cesium.ProviderViewModel({
                name: "天地图影像",
                iconUrl: "/imgs/map/tdt_img.jpg",
                creationFunction: () => {
                    const imgImageryProvider = new Cesium.WebMapTileServiceImageryProvider({
                        url: "http://t{s}.tianditu.com/img_c/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=c&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles&tk=" + key,
                        subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
                        tilingScheme: new Cesium.GeographicTilingScheme(),
                        tileMatrixLabels: ["1", "2", "3", "4", "5", "6", "7", "8", "9", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19"]
                    })
                    return [imgImageryProvider]
                }
            })
        ]
    })

    const image = new Image();
    image.src = "https://st-gdx.dancf.com/gaodingx/0/uxms/design/20201124-112715-54af.gif";
    const superGif = new SuperGif({ gif: image });
    superGif.load(function () {
        const entity = viewer.entities.add({
            position: Cesium.Cartesian3.fromDegrees(103.742546, 36.06, 0),
            billboard: {
                image: new Cesium.CallbackProperty(() => {
                    return superGif.get_canvas().toDataURL("image/png");
                }, false),
                verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
            }
        });
        viewer.camera.flyTo({
            destination: Cesium.Cartesian3.fromDegrees(103.742546, 36.06, 30000),
        });
    });
</script>
</html>

ONEGISER(ZPC)

关注

3
点赞
踩
13

收藏

觉得还不错? 一键收藏
7
评论
Cesium加载billboard，GIF，模拟socket动态移动（vx gzh【图说GIS】）

1.Cesium的billboard使用动态GIF需要注意的是需要引入libgif.js<!DOCTYPE html><html lang="en"><head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <meta name="theme-color" co
复制链接

扫一扫