加载球体
1、下载cesium包https://download.csdn.net/download/weixin_39150852/20303629，在html里引入
<link href="static/Cesium-1.82/Build/Cesium/Widgets/widgets.css" rel="stylesheet"/>
<script src="static/Cesium-1.82/Build/Cesium/Cesium.js" type="text/javascript"></script>
2、定义公共方法，全局引入
Array.prototype.filter = Array.prototype.filter || function (func) {
var arr = this;
var r = [];
for (var i = 0; i < arr.length; i++) {
if (func(arr[i], i, arr)) {
r.push(arr[i]);
}
}
return r;
}
Array.prototype.firstOrDefault = Array.prototype.firstOrDefault || function (func) {
var arr = this;
var r=null ;
for (var i = 0; i < arr.length; i++) {
if (func(arr[i], i, arr)) {
r=arr[i];
break;
}
}
return r;
}
Array.prototype.where = Array.prototype.where || function (func) {
var arr = this;
var r = [];
for (var i = 0; i < arr.length; i++) {
if (func(arr[i], i, arr)) {
r.push(arr[i]);
}
}
return r;
}
3、初始化地图
<template>
<div>
<div id='cesiumContainer'></div>
</div>
</template>
<script>
var viewer = null;
export default {
components: {},
data() {
return {
}
},
mounted(){
this.initMap();
},
methods: {
initMap(){
viewer = new Cesium.Viewer('cesiumContainer', {
geocoder: false,//地名查找,默认true
homeButton: false,//主页按钮，默认true
sceneModePicker: false,// 2D,3D和Columbus View切换控件
baseLayerPicker: false,//地图切换控件(底图以及地形图)是否显示,默认显示true
navigationHelpButton: false,// 帮助提示控件
animation: false, //视图动画播放速度控件，默认true
timeline: false,//时间线,默认true
fullscreenButton: false,//全屏按钮,默认显示true
infoBox: false,//点击要素之后显示的信息,默认true
selectionIndicator: false,//选中元素显示,默认true
scene3DOnly: true, // 仅3D渲染，节省GPU内存
//若未设置imageryProvider属性，将默认加载一个影像
//若未设置terrainProvider属性，将默认加载一个地形
});
viewer.scene.globe.depthTestAgainstTerrain = true; //解决垂直视角时点击报错的问题
viewer.cesiumWidget.creditContainer.style.display = "none";// 隐藏Logo，水印
viewer.imageryLayers.removeAll(); //删除默认影像
}
}
}
</script>
<style lang="scss" scoped>
//设置地图宽高，不设置的话canvas的高会一直增加
#cesiumContainer {
width: 98%;
height: 87%;
position: absolute
}
</style>
隐藏水印也可通过css方法实现：
.cesium-viewer-timelineContainer,
.cesium-viewer-animationContainer,
.cesium-viewer-bottom {
display: none !important;
}
加载影像（可叠加多层影像）
addImagery() {
var _lyr = viewer.imageryLayers._layers.firstOrDefault(t => {
if (t.lyr_ID && t.lyr_ID == 'baseImageLayerID' && t.lyr_NAME && t.lyr_NAME == '影像底图') { return t; }
});
if (_lyr) return;
//天地图影像、arcgis的本地切片服务、arcgis发布的imageServer、麒麟地图、发布的zxy形式的地图服务
/*let imageryProvider = new Cesium.UrlTemplateImageryProvider({
url: "http://t4.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=4b01c1b56c6bcba2eb9b8e987529c44f",
//url: "http://117.176.159.208:48021/全国影像/{z}/{x}/{y}.png",
tileWidth: 512,
tileHeight: 512,
maximumLevel: 18,
})*/
//arcgisserver发布的底图服务，目前仅支持4326和3857坐标系的切片地图加载
let imageryProvider = new ArcGisMapServerImageryProvider({
url: "http://cache1.arcgisonline.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer",
})
//wmts服务
/*let imageryProvider = new Cesium.WebMapTileServiceImageryProvider({
url: "http://t{s}.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=0911bd7d5242feed8ec0fa67f3d47afd",
layer: "tdtBasicLayer",
style: "default",
format: "image/jpeg",
tileMatrixSetID: "GoogleMapsCompatible",
subdomains: ["0", "1", "2"]
})*/
//背景图
/* let baseImagery = new Cesium.SingleTileImageryProvider({
url: "/imgs/home/world.jpg",
});*/
let layer = viewer.imageryLayers.addImageryProvider(imageryProvider);
layer["lyr_ID"] = "baseImageLayerID";
layer["lyr_NAME"] = "影像底图";
}
移除影像
removeImagery() {
var _lyr = viewer.imageryLayers._layers.firstOrDefault(t => {
if (t.lyr_ID && t.lyr_ID == 'baseImageLayerID' && t.lyr_NAME && t.lyr_NAME == '影像底图') { return t; }
});
if (_lyr) viewer.imageryLayers.remove(_lyr, true);
}
置顶影像
TotopTiandituImageMap() {
var _lyr = viewer.imageryLayers._layers.firstOrDefault(t => {
if (t.lyr_ID && t.lyr_ID == 'baseImageLayerID' && t.lyr_NAME && t.lyr_NAME == '影像底图') { return t; }
});
if (_lyr) viewer.imageryLayers.raiseToTop(_lyr);
}
加载地形（只能有一个地形服务）
地形地址加载失败会导致看不见球体
addTerrain() {
//加载cesium格式的地形数据
let terrainLayer = new Cesium.CesiumTerrainProvider({
url: "http://117.175.169.58:48002/",
requestVertexNormals: true,
requestWaterMask: true
});
//arcgis发布的地形数据
/*let terrainLayer = new Cesium.ArcGISTiledElevationTerrainProvider({
url: "https://elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer",
});*/
//添加高度为0的地形, cesium默认加载的就是这个地形对象
/*let terrainLayer = new Cesium.EllipsoidTerrainProvider()};*/
viewer.terrainProvider = terrainLayer
移除地形
removeTerrain() {
if (viewer.terrainProvider instanceof Cesium.EllipsoidTerrainProvider) {
return
} else {
viewer.terrainProvider = new Cesium.EllipsoidTerrainProvider();
}
}
加载3dtiles模型
addModel(){
//防止重复加载
let model = viewer.scene.primitives._primitives.filter(t => {
return t && t.id === '3dTilesModel1';
});
if (model.length) return;
let primitive = new Cesium.Cesium3DTileset({
url: 'http://117.175.169.58:48012/%E6%B5%81%E5%9F%9F%E5%AE%89%E5%85%A8%E6%B0%B4%E7%94%B5%E7%AB%99/tileset.json'
})
primitive["name"] = 'mainModel_3dtitles';
primitive["id"] = '3dTilesModel1';
viewer.scene.primitives.add(primitive);
primitive.readyPromise.then(function (argument) {
viewer.flyTo(argument);//飞至模型
})
//模型抬高0.5m
primitive.readyPromise.then(function(tileset) {
viewer.scene.primitives.add(tileset);
let boundingSphere = tileset.boundingSphere;
let cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);
let surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
let offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.5);
let translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
});
}
加载glb,gltf模型
addModel() {
//防止重复加载
let model = viewer.scene.primitives._primitives.filter(t => {
return t && t.id === "gltfModel1";
});
if (model.length) return;
let position = Cesium.Cartesian3.fromDegrees(116.523753404617, 40.2340042591095, 0);
let hpRoll = new Cesium.HeadingPitchRoll(
Cesium.Math.toRadians(90),
0,
Cesium.Math.toRadians(0)
);
/*let m = Cesium.Transforms.eastNorthUpToFixedFrame(
Cesium.Cartesian3.fromDegrees(116.523753404617, 40.2340042591095, 0)
);
let m1 = Cesium.Matrix3.fromRotationZ(Cesium.Math.toRadians(-90));
Cesium.Matrix4.multiplyByMatrix3(m, m1, m); // 矩阵计算*/
let primitive = Cesium.Model.fromGltf({
url: "/model/home/mx.glb",
modelMatrix: Cesium.Transforms.headingPitchRollToFixedFrame(position, hpRoll),
//modelMatrix: m
});
primitive["name"] = 'mainModel_gltf';
primitive["id"] = 'gltfModel1';
viewer.scene.primitives.add(primitive)
//飞至模型视角
getViewer().camera.flyTo({
"destination": {"x": -2177813.7852421473, "y": 4362755.897898611, "z": 4097937.821940227},
"orientation": {"pitch": -0.5192370076293065, "heading": 4.733198787733471, "roll": 6.2793732598153}
});
}
调整地图颜色
let layer = viewer.imageryLayers.get(0)
//图层亮度，1.0使用未修改的图像颜色。小于1.0会使图像更暗，而大于1.0会使图像更亮
layer.brightness = 1.0;
//图层对比度，1.0使用未修改的图像颜色。小于1.0会降低对比度，大于1.0会增加对比度。
layer.contrast = 1.0;
//图层饱和度，1.0使用未修改的图像颜色。小于1.0会降低饱和度，大于1.0会增加饱和度。
layer.saturation = 1.0;
//图层色调，单位为弧度，0表示使用未修改的图像颜色
layer.hue = 0;
//应用于该图层的伽马校正,1.0使用未修改的图像颜色。
layer.gamma = 1.0;
设置环境光
如果设置环境光后再显示模型阴影，则阴影方向不受时间控制，以环境光的direction方向为准
viewer.scene.light = new Cesium.DirectionalLight({
direction: new Cesium.Cartesian3(1, -1, -1),//方向
color: Cesium.Color.WHITE,//颜色
intensity: 0.5 //强度
});
以下map_common_addDatasouce， jsonParse方法参考https://blog.csdn.net/weixin_39150852/article/details/119676613
248
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
