3dtiles 模型采用 catia v5 r22 ---> hsf+sqlite --->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 地图加载也太慢了，不知道是我们单位的网不好，还是本身就慢。
如对本文有疑问， 点击进行留言回复！！
荐 超强的入门文章 ！！！ JavaScript 速成计划第二篇（杂项详解：JS操作HTML 与 CSS、异常、事件）!
教你搭建 nodejs+mongoose+Graphql+Vue+Typescript 框架（上）
【Nginx】如何为已安装的Nginx动态添加模块？看完我懂了！！
网友评论