cesium 创建 SelectionIndicator

最新推荐文章于 2024-08-01 10:30:05 发布

mylove10086

最新推荐文章于 2024-08-01 10:30:05 发布

阅读量2.3k

点赞数 1

分类专栏： cesium 文章标签： js javascript cesium

本文链接：https://blog.csdn.net/u014572215/article/details/105414033

版权

cesium 专栏收录该内容

19 篇文章 10 订阅

订阅专栏

当cesium启用selectionIndicator地图选择的时候，在地图中选中一个实体会出现一个跟随实体移动的包围框。可以再创建一个与cesium默认的selectionIndicator共其他情况使用。比如不会随着取消选择而消失的框。效果如下图

1是新创建的，不会随着点击地图消失。

2是cesium默认的

过程：

一、构建cesium

viewer = new Cesium.Viewer('cesiumContainer', {
    /*terrainProvider: Cesium.createWorldTerrain({
        requestWaterMask: false
    }),*/
    imageryProvider: esri,
    animation: false,        //是否创建动画小器件，左下角仪表
    timeline: false,         //是否显示时间线控件
    geocoder: false,         //是否显示地名查找控件
    infoBox: false,           //是否显示弹窗
    baseLayerPicker: false,  //是否显示图层选择控件
    selectionIndicator: true,//是否启用地图选择
    fullscreenButton: true,  //是否启用全屏小部件
    sceneModePicker: true    //是否启用场景选择小部件
});

二、添加两个billboard实体，以供选择

//做为全局的，供新创建的selectionIndicator选择
entity = viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(113.754961, 23.068441, 0.0),
    billboard: {
        color: Cesium.Color.YELLOW,
        image: 'Point.png',
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
        heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND
    }
});
//共cesium默认的selectionIndicator选择
viewer.entities.add({
    position: Cesium.Cartesian3.fromDegrees(113.754961, 23.069441, 0.0),
    billboard: {
        color: Cesium.Color.YELLOW,
        image: 'Point.png',
        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
        heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND
    }
});

三、当cesium启用selectionIndicator : true,//是否启用地图选择。时cesium会创建一个默认的selectionIndicator，会添加这个一个div引用'cesium-viewer-selectionIndicatorContainer' css样式。可以在cesium源码的viewer.js中找到。如下图

找到这个然后作为参数传给SelectionIndicator如下：

var selectionIndicatorContainer = document.getElementsByClassName('cesium-viewer-selectionIndicatorContainer');//cesium起用地图选择后cesium创建的一个框
selectionIndicator = new Cesium.SelectionIndicator(selectionIndicatorContainer[0], viewer.scene);//传如SelectionIndicator中的参数
四、当需要显示选择框时添加选择框的位置，如下

var viewModel = selectionIndicator.viewModel;
viewModel.animateAppear();//启用动画
//设置时间更新位置
viewer.clock.onTick.addEventListener(function (clock) {
    var time = clock.currentTime;
    var position;

    var selectionIndicatorViewModel = selectionIndicator.viewModel;
    if (selectionIndicatorViewModel) {
        selectionIndicatorViewModel.position = entity.position.getValue(time,position);//把选择的实体的位置付给selectionIndicator
        selectionIndicatorViewModel.showSelection = true;
        selectionIndicatorViewModel.update();//更新文章
    }
});

1、是新创建的。2是cesium默认创建的

完整的代码如下，cesium是1.52版本的，使用的是源码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用cesium源码</title>
    <script src="../lib/jquery.min.js"></script>
    <script src="../lib/require.min.js"></script>
    <style>
        @import url(../lib/Source/Widgets/widgets.css);
        /*@import url(../lib/Build/Sandcastle/templates/bucket.css);*/

        html, body, #cesiumContainer {
            width: 100%;
            height: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }
    </style>
</head>
<script>
    requirejs.config({
        //By default load any module IDs from js/lib
        baseUrl: '../lib/Source',
        //except, if the module ID starts with "app",
        //load it from the js/app directory. paths
        //config is relative to the baseUrl, and
        //never includes a ".js" extension since
        //the paths config could be for a directory.
        /*paths: {
            "jquery": ["http://libs.baidu.com/jquery/2.0.3/jquery"]
        }*/
    });

    var viewer;

    var entity;

    function inits() {
        require(["../lib/Source/main.js"], function () {

            require(['Cesium'], function () {
                window.Ceisum = Cesium;
                var esri = new Cesium.ArcGisMapServerImageryProvider({
                    url: 'https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer'
                });
                viewer = new Cesium.Viewer('cesiumContainer', {
                    /*terrainProvider: Cesium.createWorldTerrain({
                        requestWaterMask: false
                    }),*/
                    imageryProvider: esri,
                    animation: false,        //是否创建动画小器件，左下角仪表
                    timeline: false,         //是否显示时间线控件
                    geocoder: false,         //是否显示地名查找控件
                    infoBox: false,           //是否显示弹窗
                    baseLayerPicker: false,  //是否显示图层选择控件
                    selectionIndicator: true,//是否启用地图选择
                    fullscreenButton: true,  //是否启用全屏小部件
                    sceneModePicker: true    //是否启用场景选择小部件
                });
                console.log("asdf");
                entity = viewer.entities.add({
                    position: Cesium.Cartesian3.fromDegrees(113.754961, 23.068441, 0.0),
                    billboard: {
                        color: Cesium.Color.YELLOW,
                        image: 'Point.png',
                        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
                        heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND
                    }
                });
                viewer.entities.add({
                    position: Cesium.Cartesian3.fromDegrees(113.754961, 23.069441, 0.0),
                    billboard: {
                        color: Cesium.Color.YELLOW,
                        image: 'Point.png',
                        verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
                        horizontalOrigin: Cesium.HorizontalOrigin.LEFT,
                        heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND
                    }
                });

            });
        });

    }

    var selectionIndicator;

    function addselection() {
        var els = document.getElementsByClassName('cesium-viewer');//cesium起用地图选择后cesium创建的一个框
       // var selectionIndicatorContainer = document.createElement('div');
        //selectionIndicatorContainer.className = 'cesium-viewer-selectionIndicatorContainer';
        //els[0].appendChild(selectionIndicatorContainer);
        var selectionIndicatorContainer = document.getElementsByClassName('cesium-viewer-selectionIndicatorContainer');//cesium起用地图选择后cesium创建的一个框
        selectionIndicator = new Cesium.SelectionIndicator(selectionIndicatorContainer[0], viewer.scene);
    }

    function selectedEntity() {
        var viewModel = selectionIndicator.viewModel;
        viewModel.animateAppear();
        viewer.clock.onTick.addEventListener(function (clock) {
            var time = clock.currentTime;
            var position;

            var selectionIndicatorViewModel = selectionIndicator.viewModel;
            if (selectionIndicatorViewModel) {
                selectionIndicatorViewModel.position = entity.position.getValue(time,position);
                selectionIndicatorViewModel.showSelection = true;
                selectionIndicatorViewModel.update();
            }
        });


    }

</script>
<body onload="inits()">
<div id="cesiumContainer" style="height: 80%"></div>
<button onclick="addselection()">addselection</button>
<button onclick="selectedEntity()">selectedEntity</button>
</body>
</html>