• Cesium 基于MapBox底图加载3DTiles 模型


    3DTiles 模型采用   CATIA V5 R22 --->3dxml --->GLB--->B3DM 

    var extent = Cesium.Rectangle.fromDegrees(75, 60.808406, 135.313421, 10);
    Cesium.Camera.DEFAULT_VIEW_RECTANGLE = extent;
    Cesium.Camera.DEFAULT_VIEW_FACTOR = 0;
    Cesium.Ion.defaultAccessToken = "你的Token";
    Cesium.CreditDisplay.cesiumCredit = "测试";
    var viewer = new Cesium.Viewer('cesiumContainer', {
        animation: false,//是否创建动画小器件,左下角仪表
        baseLayerPicker: false,//是否显示图层选择器
        fullscreenButton: true,//是否显示全屏按钮
        geocoder: true,//是否显示geocoder小器件,右上角查询按钮
        homeButton: true,//是否显示Home按钮
        infoBox: false,//是否显示信息框
        sceneModePicker: true,//是否显示3D/2D选择器
        selectionIndicator: false,//是否显示选取指示器组件
        timeline: false,//是否显示时间轴
        navigationHelpButton: false,//是否显示右上角的帮助按钮
        scene3DOnly: true,//如果设置为true,则所有几何图形以3D模式绘制以节约GPU资源
        clock: new Cesium.Clock(),//用于控制当前时间的时钟对象
        selectedImageryProviderViewModel: undefined,//当前图像图层的显示模型,仅baseLayerPicker设为true有意义
        //imageryProviderViewModels: Cesium.createDefaultImageryProviderViewModels(),//可供BaseLayerPicker选择的图像图层ProviderViewModel数组
        selectedTerrainProviderViewModel: undefined,//当前地形图层的显示模型,仅baseLayerPicker设为true有意义
        terrainProviderViewModels: Cesium.createDefaultTerrainProviderViewModels(),//可供BaseLayerPicker选择的地形图层ProviderViewModel数组
        skyBox: new Cesium.SkyBox({
            sources: {
                positiveX: '/Build/Cesium/Assets/Textures/SkyBox/tycho2t3_80_px.jpg',
                negativeX: '/Build/Cesium/Assets/Textures/SkyBox/tycho2t3_80_mx.jpg',
                positiveY: '/Build/Cesium/Assets/Textures/SkyBox/tycho2t3_80_py.jpg',
                negativeY: '/Build/Cesium/Assets/Textures/SkyBox/tycho2t3_80_my.jpg',
                positiveZ: '/Build/Cesium/Assets/Textures/SkyBox/tycho2t3_80_pz.jpg',
                negativeZ: '/Build/Cesium/Assets/Textures/SkyBox/tycho2t3_80_mz.jpg'
            }
        }),//用于渲染星空的SkyBox对象
        fullscreenElement: document.body,//全屏时渲染的HTML元素,
        useDefaultRenderLoop: true,//如果需要控制渲染循环,则设为true
        targetFrameRate: undefined,//使用默认render loop时的帧率
        showRenderLoopErrors: false,//如果设为true,将在一个HTML面板中显示错误信息
        automaticallyTrackDataSourceClocks: true,//自动追踪最近添加的数据源的时钟设置
        contextOptions: undefined,//传递给Scene对象的上下文参数(scene.options)
        sceneMode: Cesium.SceneMode.SCENE3D //初始场景模式
    });
    
    var mapbox = new Cesium.MapboxImageryProvider({
        mapId: 'mapbox.satellite',
        accessToken: '你的Token'
    });
    viewer.imageryLayers.addImageryProvider(mapbox);
    
    var tileset = viewer.scene.primitives.add(new Cesium.Cesium3DTileset({ url: '/files/test/tileset.json' }));
    viewer.scene.primitives.add(tileset);
    
    tileset.readyPromise.then(function (tileset) {
        viewer.scene.primitives.add(tileset);
        viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0.5, -0.2, tileset.boundingSphere.radius * 1.0));
    }).otherwise(function (error) {
        console.log(error);
    });
    
    Cesium.CreditDisplay.cesiumCredit = null;
    // 创建DIV标签
    var bubbleDiv = document.createElement('div');
    viewer.container.appendChild(bubbleDiv);
    bubbleDiv.className = 'bubble';
    bubbleDiv.style.display = 'none';
    bubbleDiv.style.position = 'absolute';
    bubbleDiv.style.bottom = '0';
    bubbleDiv.style.left = '0';
    bubbleDiv.style['pointer-events'] = 'none';
    bubbleDiv.style.padding = '4px';
    bubbleDiv.style.zIndex = 100;
    
    // 有关当前选定功能的信息
    var selected = {
        feature: undefined,
        originalColor: new Cesium.Color()
    };
    var selectedEntity = new Cesium.Entity();
    // 获取默认的鼠标左键处理程序
    var clickHandler = viewer.screenSpaceEventHandler.getInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK);
    // 如果不支持轮廓,请在鼠标悬停时将特征颜色更改为黄色,在单击鼠标时将特征颜色更改为绿色。
    if (Cesium.PostProcessStageLibrary.isSilhouetteSupported(viewer.scene)) {
        //支持剪影
        var silhouetteBlue = Cesium.PostProcessStageLibrary.createEdgeDetectionStage();
        silhouetteBlue.uniforms.color = Cesium.Color.BLUE;
        silhouetteBlue.uniforms.length = 0.01;
        silhouetteBlue.selected = [];
    
        var silhouetteGreen = Cesium.PostProcessStageLibrary.createEdgeDetectionStage();
        silhouetteGreen.uniforms.color = Cesium.Color.LIME;
        silhouetteGreen.uniforms.length = 0.01;
        silhouetteGreen.selected = [];
    
        viewer.scene.postProcessStages.add(Cesium.PostProcessStageLibrary.createSilhouetteStage([silhouetteBlue, silhouetteGreen]));
    
              viewer.screenSpaceEventHandler.setInputAction(function onLeftClick(movement) {
                // 如果先前选择了功能,请撤消突出显示
                silhouetteGreen.selected = [];
    
                // P选择一个新功能
                var pickedFeature = viewer.scene.pick(movement.position);
                if (!Cesium.defined(pickedFeature)) {
                    clickHandler(movement);
                    return;
                }
    
                //选择功能(如果尚未选择)
                if (silhouetteGreen.selected[0] === pickedFeature) {
                    return;
                }
                // 保存所选功能的原始颜色
                var highlightedFeature = silhouetteBlue.selected[0];
                if (pickedFeature === highlightedFeature) {
                    silhouetteBlue.selected = [];
                }
                //突出显示新选择的功能
                silhouetteGreen.selected = [pickedFeature];
            }, Cesium.ScreenSpaceEventType.LEFT_CLICK);
     var highlighted = {
            feature: undefined,
            originalColor: new Cesium.Color()
        };
    
        //将特征悬停上色为黄色。
        viewer.screenSpaceEventHandler.setInputAction(function onMouseMove(movement) {
            //如果以前突出显示某个功能,请撤消突出显示
            if (Cesium.defined(highlighted.feature)) {
                highlighted.feature.color = highlighted.originalColor;
                highlighted.feature = undefined;
            }
            // 选择一个新功能
            var pickedFeature = viewer.scene.pick(movement.endPosition);
            if (!Cesium.defined(pickedFeature)) {
                bubbleDiv.style.display = 'none';
                return;
            }
            // 选择了某项功能,因此请显示其叠加内容
            bubbleDiv.style.display = 'block';
            bubbleDiv.style.bottom = viewer.canvas.clientHeight - movement.endPosition.y + 'px';
            bubbleDiv.style.left = movement.endPosition.x + 'px';
            var name = pickedFeature.getProperty('name');
            if (!Cesium.defined(name)) {
                name = pickedFeature.getProperty('id');
            }
            bubbleDiv.textContent = name;
            // 突出显示该功能(如果尚未选择)
            if (pickedFeature !== selected.feature) {
                highlighted.feature = pickedFeature;
                Cesium.Color.clone(pickedFeature.color, highlighted.originalColor);
                pickedFeature.color = Cesium.Color.YELLOW;
            }
        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
    }

     结果发现Mapbox 地图加载也太慢了,不知道是我们单位的网不好,还是本身就慢。

  • 相关阅读:
    Java 获取代码运行时间
    CentOS7 配置阿里yum源
    MySQL优化服务器设置(MySQL优化配置文件)
    Mysql查看状态,连接数,线程数以及Mysql性能监控工具doDBA的使用以及优化
    SpringBoot专栏(四) -- SpringBoot+MyBatis集成Druid连接池
    SpringBoot专栏(三) -- SpingBoot集成MyBatis框架
    利用MyBatis生成器自动生成实体类、DAO接口和Mapping映射文件
    在Linux上搭建Jmeter测试环境
    MySQL 修改最大连接数(max_connections)失效,上限214问题
    javase基础
  • 原文地址:https://www.cnblogs.com/w2011/p/12100524.html
Copyright © 2020-2023  润新知