Cesium,mars3d,3dtiles 3d地图显示

下载mars3d源码包

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>地图测试</title>
<script type="text/javascript" src="/lib/include-lib.js" libpath="/lib/" include="jquery,layer,toastr,font-awesome,bootstrap,bootstrap-table,layer,haoutil,mars3d"></script>
<link href="/css/style.css" rel="stylesheet" />
</head>
<body>
<div id="mars3dContainer" class="mars3d-container"></div>
</body>
</html>

$(function () {
$.map3d = new mars3d.Map('mars3dContainer', {
scene: GetScene(),
control: GetControl(),
terrain: GetTerrain(),
basemaps: GetBasemaps(),
})
Get3dtiles($.map3d);
})

function Get3dtiles(map) {
map.fixedLight = true // 固定光照，避免gltf模型随时间存在亮度不一致。
var translation = Cesium.Cartesian3.fromArray([0.0, 0.0, -0.0]);
var Matrix4 = Cesium.Matrix4.fromTranslation(translation);
const tiles3dLayer = new mars3d.layer.TilesetLayer({
name: "地图",
url: "/3dtiles/tileset.json",
maximumMemoryUsage: 1024,
flyTo: true,

})
map.addLayer(tiles3dLayer);
}
function GetScene() {
return {
center: { lat: 22.9, lng: 112.0, alt: 3185.5, heading: 360, pitch: -45 },
shadows: false, //是否启用日照阴影
removeDblClick: true, //是否移除Cesium默认的双击事件
//以下是Cesium.Viewer所支持的options【控件相关的写在另外的control属性中】
sceneMode: 3, //3等价于Cesium.SceneMode.SCENE3D,
//以下是Cesium.Scene对象相关参数
showSun: false, //是否显示太阳
showMoon: false, //是否显示月亮
showSkyBox: false, //是否显示天空盒
showSkyAtmosphere: false, //是否显示地球大气层外光圈
fog: false, //是否启用雾化效果
fxaa: false, //是否启用抗锯齿

//以下是Cesium.Globe对象相关参数
globe: {
depthTestAgainstTerrain: false, //是否启用深度监测，启用状态下，模型会根据局部高度显示
//baseColor: '#546a53', //地球默认背景色
showGroundAtmosphere: false, //是否在地球上绘制的地面大气
enableLighting: false //是否显示昼夜区域
},
//以下是Cesium.ScreenSpaceCameraController对象相关参数
cameraController: {
zoomFactor: 3.0, //鼠标滚轮放大的步长参数
minimumZoomDistance: 1, //地球放大的最小值（以米为单位）
maximumZoomDistance: 50000000, //地球缩小的最大值（以米为单位）
enableRotate: true, //2D和3D视图下，是否允许用户旋转相机
enableTranslate: true, //2D和哥伦布视图下，是否允许用户平移地图
enableTilt: true, // 3D和哥伦布视图下，是否允许用户倾斜相机
enableZoom: true, // 是否允许用户放大和缩小视图
enableCollisionDetection: false //是否允许地形相机的碰撞检测
}
}
}
function GetControl() {
return {
baseLayerPicker: true, //basemaps底图切换按钮
homeButton: true, //视角复位按钮
sceneModePicker: true, //二三维切换按钮
navigationHelpButton: true, //帮助按钮
fullscreenButton: true, //全屏按钮
"vrButton": false,
"animation": false,
"timeline": false,
"infoBox": false,
"geocoder": false,
"selectionIndicator": false,
"contextmenu": { "hasDefault": true },//右键菜单
"mouseDownView": true,
"zoom": { "insertIndex": 1 },
"compass": { "bottom": "toolbar", "left": "5px" },
"distanceLegend": { "left": "100px", "bottom": "2px" },
"locationBar": {
"fps": true,
"crs": "CGCS2000_GK_Zone_3",
"crsDecimal": 0,
"template": "<div>经度:{lng}</div> <div>纬度:{lat}</div> <div class='hide1000'>横{crsx} 纵{crsy}</div> <div>海拔：{alt}米</div> <div class='hide700'>层级：{level}</div><div>方向：{heading}°</div> <div>俯仰角：{pitch}°</div><div class='hide700'>视高：{cameraHeight}米</div>"
}
}
}
function GetTerrain() {
return {
"url": "//data.mars3d.cn/terrain",
"show": true
}
}
function GetBasemaps() {
return [
{ "id": 10, "name": "地图底图", "type": "group" },
{
"id": 2021,
"pid": 10,
"name": "天地图影像",
"icon": "/img/basemaps/tdt_img.png",
"type": "group",
"layers": [
{ "name": "底图", "type": "tdt", "layer": "img_d" },
{ "name": "注记", "type": "tdt", "layer": "img_z" }
],
"show": true
},
{
"pid": 10,
"name": "高德影像",
"type": "group",
"icon": "/img/basemaps/gaode_img.png",
"layers": [
{ "name": "底图", "type": "gaode", "layer": "img_d" },
{ "name": "注记", "type": "gaode", "layer": "img_z" }
],
},
{
"pid": 10,
"name": "高德电子",
"type": "gaode",
"icon": "/img/basemaps/gaode_vec.png",
"layer": "vec"
},
{
"pid": 10,
"name": "本地地图",
"icon": "/img/basemaps/gaode_img.png",
"type": "xyz",
"url": "/mars3d-data/tile/googleImg/{z}/{x}/{y}.jpg",
},
]
}

Cesium,mars3d,3dtiles 3d地图显示相关推荐

Cesium：3D-Tiles模型剖面图分析
Cesium:3D-Tiles模型剖面图分析剖面图简介 Cesium代码实现实现效果实现思路分析问题1:如何绘制3D线? 问题2:如何获取剖面的起伏变化? 问题3:如何绘制剖面图? 示例代码 ...
首次使用Cesium加载3D数据不成功
接此: https://blog.csdn.net/bcbobo21cn/article/details/110454547 参阅相关教程:Cesium加载3D数据是通过3D Tiles进行: 3D ...
android显示地图代码,Android Studio之高德地图实现定位和3D地图显示(示例代码)
/**** * 讲诉了高德地图定位和3D地图显示 * * 打包和未打包的情况是不一样的,高德配置是可以配置调试版和发布版 **/ public class MainActivity extends A ...
Android Studio之高德地图实现定位和3D地图显示
在应用开发中,地图开发是经常需要使用的"组件",国内比较出名的是就是百度地图和高德地图. 此博客讲的是高德地图实现定位和3D地图显示,并标注相应位置,话不多说,先看看效果,在上代码 ...
android------之高德地图实现定位和3D地图显示
2019独角兽企业重金招聘Python工程师标准>>> 在应用开发中,地图开发是经常需要使用的"组件",国内比较出名的是就是百度地图和高德地图. 此博客讲的是高德 ...
分享一份3D Tiles数据，供大家学习使用。（Cesium、Earth 3D）
分享一份3D Tiles数据,供大家学习使用.(Cesium.Earth 3D).数据是长沙市的建筑轮廓盒模型,大家如果有想要别的城市的,可以留言评论. 链接:https://pan.baidu.co ...
Cesium加载3D Tiles数据
使用原生Cesium加载3D Tiles数据,并实现对图层的选中.样式的修改.图元的隐藏. 实现代码 <!DOCTYPE html> <html lang="en" ...
首次使用Cesium加载3D数据成功
接此: https://blog.csdn.net/bcbobo21cn/article/details/111305160 `代码同前文:加载不同的数据,都不能加载出来: var palaceTil ...
cesium 入门学习之一：运行cesium，展示3D地球
一直都想研究下cesium,今天终于实际行动起来,开始码代码,经过一番折腾,成功展示出3D地球,故分享出来 1.下载cesium cesium的运行时依赖node.js环境,所以小伙伴们需提前装好no ...

Cesium,mars3d,3dtiles 3d地图显示

Cesium,mars3d,3dtiles 3d地图显示相关推荐

最新文章

热门文章