cesium初始化

Raccom

已于 2023-01-06 15:14:04 修改

阅读量863

点赞数 2

分类专栏： WebGIS 文章标签： arcgis javascript 开发语言

于 2022-10-11 16:13:51 首次发布

本文链接：https://blog.csdn.net/Raccon_/article/details/127261821

版权

WebGIS 专栏收录该内容

16 篇文章 7 订阅

订阅专栏

cesium初始化

引入地形

	Cesium.Ion.defaultAccessToken = 'cesium官网申请的token'
	
	// cesium原生 生成地形
    let terrainProvider = Cesium.createWorldTerrain({
        requestWaterMask: false, // 否需要请求额外的水
        requestVertexNormals: false // 光数据
    })
    // 创建map配置项
    const mapOptions = {
        homeButton: false, //是否显示主页按钮
        sceneModePicker: false, //是否显示场景按钮
        baseLayerPicker: false, //是否显示图层选择控件
        navigationHelpButton: false, //导航帮助按钮
        selectionIndicator: false, //鼠标选择指示器
        infoBox: false, //信息提示框
        animation: false, //是否创建动画小器件，左下角仪表
        timeline: false, //是否显示时间线控件
        geocoder: false, //是否显示地名查找控件
        fullscreenButton: true, //是否全屏按钮
        shouldAnimate: false, 
        destination: {
            x: 110.220501,
            y: 24.387122,
            z: 350,
        },
        orientation: [0, -90, 0],
        infoBox: false, // If set to false, the InfoBox widget will not be created.
        terrainProvider, // 在viewer配置项中添加地形数据
    }
    const viewer = new Cesium.Viewer('cesiumContainer', mapOptions);
    
    viewer._cesiumWidget._creditContainer.style.display = "none" // 去除版权信息
	viewer.scene.screenSpaceCameraController.minimumZoomDistance = 10 // 距离地形的距离
	viewer.scene.globe.depthTestAgainstTerrain = true // false 关闭/打开地形遮挡
	
	
    // viewer.imageryLayers.remove(viewer.imageryLayers.get(0)); // 删除默认的影像图层
    
    viewer.scene.fxaa = false;//改善实体图片清晰度，去除图片锯齿
    viewer.scene.postProcessStages.fxaa.enabled = true;去锯齿 使文字清晰
    if (Cesium.FeatureDetection.supportsImageRenderingPixelated()) {
      // 判断是否支持图像渲染像素化处理
      viewer.resolutionScale = window.devicePixelRatio;
    }

    // //加载本地地图
    // this.loadJPGMercator(viewer, 15);
    // //加载本地地形
    // this.loadLocalTerrain(viewer)

   // viewer.extend(Cesium.viewerCesiumInspectorMixin)  // 调试器 Cesium的Inspector面板可以显示Primitive的坐标轴、边界球等信息,还可以显示网格坐标系信息
    // viewer.extend(Cesium.viewerCesium3DTilesInspectorMixin); // 3dtiles插件 可以查看模型信息
    
    //设置指北针
    var options = {};
    // 用于在使用重置导航重置地图视图时设置默认视图控制。接受的值是Cesium.Cartographic 和 Cesium.Rectangle.
    options.defaultResetView = Cesium.Cartographic.fromDegrees(
      homePosition.lon,
      homePosition.lat,
      homePosition.height
    );
    // 用于启用或禁用罗盘。true是启用罗盘，false是禁用罗盘。默认值为true。如果将选项设置为false，则罗盘将不会添加到地图中。
    options.enableCompass = true;
    // 用于启用或禁用缩放控件。true是启用，false是禁用。默认值为true。如果将选项设置为false，则缩放控件将不会添加到地图中。
    options.enableZoomControls = false;
    // 用于启用或禁用距离图例。true是启用，false是禁用。默认值为true。如果将选项设置为false，距离图例将不会添加到地图中。
    options.enableDistanceLegend = false;
    // 用于启用或禁用指南针外环。true是启用，false是禁用。默认值为true。如果将选项设置为false，则该环将可见但无效。
    options.enableCompassOuterRing = true;
    // 利用插件
    CesiumNavigation(viewer, options);

	// 若使用高程数据，则需要配合图层一起使用
	 let terrainProvider = new Cesium.CesiumTerrainProvider({
       url: 'http://localhost:9003/terrain/BOXJg9Eg'
    });
    
    // 谷歌影像地址
	 let imageryProvider = new Cesium.UrlTemplateImageryProvider({
        url: "https://mt1.google.cn/vt/lyrs=s&x={x}&y={y}&z={z}"
    })
    
    const viewer = new Cesium.Viewer('cesiumContainer', {
        infoBox: false, // If set to false, the InfoBox widget will not be created.
        terrainProvider,
        imageryProvider
    });

高程数据在https://www.gscloud.cn/#下载后，通过cesiumlab进行切片(三角算法使用ctb，存储类型散列)，切片后用cesiumlab分发服务本地部署即可

其他影像地址

arcgis街道图
https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}
灰度图
https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetGray/MapServer/tile/{z}/{y}/{x}
深蓝夜色
https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}
谷歌map( lys参数可选值包括：h(街道图)、m(街道图)、p(街道图)、r(街道图)、s(影像无注记)、y(影像含注记)、t(地形图) )
https://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}
卫星图
https://www.google.cn/maps/vt?lyrs=s@189&gl=cn&x={x}&y={y}&z={z}（或者http://mt1.google.cn/vt/lyrs=s&x={x}&y={y}&z={z}
Amap(高德地图 | z>=3才有数据)
https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}
影像图
https://webst01.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}
OSM街道图
https://c.tile.openstreetmap.org/{z}/{x}/{y}.png
https://tile-b.openstreetmap.fr/hot/{z}/{x}/{y}.png
Mapbox
https://b.tiles.mapbox.com/v3/osmbuildings.kbpalbpk/{z}/{x}/{y}.png
黑色底图
https://a.basemaps.cartocdn.com/dark_all/{z}/{x}/{y}.png
MapBox卫星图(需要token)
https://a.tiles.mapbox.com/v4/mapbox.satellite/{z}/{x}/{y}.png?access_token=
MapBox街道图(需要token)
https://a.tiles.mapbox.com/v4/mapbox.streets/{z}/{x}/{y}.png?access_token=
MapBox黑色带区块(需要token)
https://a.tiles.mapbox.com/v4/mapbox.dark/{z}/{x}/{y}.png?access_token=
天地图（http://lbs.tianditu.gov.cn/server/MapService.html）影像图(z>=1)
https://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=
天地图（http://lbs.tianditu.gov.cn/server/MapService.html）底图矢图(z>=1)
https://t0.tianditu.gov.cn/vec_w/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=9a516b0f2a8179bb68f73172cff4bd22
腾讯
https://rt3.map.gtimg.com/tile?z={z}&x={x}&y={reverseY}&styleid=4&version=297