同样的代码,若引用http://www.supermapol.com/earth/Build/Cesium/Cesium.js,面不能贴原生3dtiles对象,只能贴地形。
若引用10i sp2版本的Cesium.js则既能贴3dtiles也能贴地形。
另外,在量算贴地面积时,supermapol的版本不能贴3dtiles对象,但10i sp2版本可以,但sp2版本也存在问题,就是在量算时会影响已有polygon对象,清除量算结果时会报异常。总之,2个版本各有各的问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>天地图影像</title>
<link href="../../Build/Cesium/Widgets/widgets.css" rel="stylesheet">
<link href="./css/bootstrap.min.css" rel="stylesheet">
<link href="./css/pretty.css" rel="stylesheet">
<script src="./js/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./js/bootstrap-select.min.js"></script>
<script src="./js/config.js"></script>
<!--该Cesium.js是10i(2020)SP2 for WebGL的-->
<!--<script type="text/javascript" src="../../Build/Cesium/Cesium.js"></script>-->
<!--该Cesium.js是supermapol上的,即官网示范程序中引用的-->
<script type="text/javascript" src="http://www.supermapol.com/earth/Build/Cesium/Cesium.js"></script>
<style>
.tool-bar .black1 {
width: 100%;
border: 1px solid #333;
box-shadow: 0 1px 2px #8b8b8b inset, 0 -1px 0 #3d3d3d inset, 0 -2px 3px #8b8b8b inset;
}
</style>
</head>
<body>
<div id="cesiumContainer"></div>
<div id='loadingbar' class="spinner">
<div class="spinner-container container1">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container2">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
<div class="spinner-container container3">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
</div>
</div>
<div id="toolbar" class="param-container tool-bar">
<button type="button" id="area" class="button black">测面</button>
<button type="button" id="clear" class="button black">清除</button>
</div>
<script>
var clampMode = 1; // 贴地量算
var handlerArea;
function onload(Cesium) {
var obj = [6378137.0, 6378137.0, 6356752.3142451793];
Cesium.Ellipsoid.WGS84 = Object.freeze(new Cesium.Ellipsoid(obj[0], obj[1], obj[2]));
//初始化viewer部件
var viewer = new Cesium.Viewer('cesiumContainer',
{
terrainProvider: new Cesium.TiandituTerrainProvider({token:window.URL_CONFIG.TOKEN_TIANDITU}),
}
);
viewer.imageryLayers.addImageryProvider(new Cesium.TiandituImageryProvider({
credit : new Cesium.Credit('天地图全球影像服务 数据来源:国家地理信息公共服务平台 & 四川省测绘地理信息局'),
token: URL_CONFIG.TOKEN_TIANDITU
}));
var imageryLayers = viewer.imageryLayers;
//初始化天地图全球中文注记服务,并添加至影像图层
var labelImagery = new Cesium.TiandituImageryProvider({
mapStyle : Cesium.TiandituMapsStyle.CIA_C, //天地图全球中文注记服务(经纬度投影)
token: URL_CONFIG.TOKEN_TIANDITU
});
imageryLayers.addImageryProvider(labelImagery);
var tileset = new Cesium.Cesium3DTileset({
url: "data/3dtiles/DaYanTa/tileset.json"
});
tileset.readyPromise.then(function () {
var cartographic = Cesium.Cartographic.fromCartesian(
tileset.boundingSphere.center
);
var surface = Cesium.Cartesian3.fromRadians(
cartographic.longitude,
cartographic.latitude,
0.0
);
var offset = Cesium.Cartesian3.fromRadians(
cartographic.longitude,
cartographic.latitude,
16//高程
);
var translation = Cesium.Cartesian3.subtract(
offset,
surface,
new Cesium.Cartesian3()
);
tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
}).otherwise(function (error) {
throw(error);
});
viewer.scene.primitives.add(tileset);
viewer.zoomTo(tileset);
$('#loadingbar').remove();
addPolyline(viewer);
addPolygon(viewer);
initMeasure(viewer);
$('#area').click(function () {
deactiveAll();
handlerArea && handlerArea.activate();
});
$('#clear').click(function () {
clearAll();
});
}
if (typeof Cesium !== 'undefined') {
window.startupCalled = true;
onload(Cesium);
}
function initMeasure(viewer){
//初始化测量面积
handlerArea = new Cesium.MeasureHandler(viewer, Cesium.MeasureMode.Area, clampMode);
handlerArea.measureEvt.addEventListener(function (result) {
var mj = Number(result.area);
var selOptV = $("#selOpt").val();
var positions = result.positions;
if (selOptV == 3 || selOptV == 4) {
mj = Number(calcClampValue(positions));
} else if (selOptV == 5) {
mj = Number(calcAreaWithoutHeight(positions));
}
var area = mj > 1000000 ? (mj / 1000000).toFixed(2) + 'km²' : mj.toFixed(2) + '㎡'
handlerArea.areaLabel.text = '面积:' + area;
});
handlerArea.activeEvt.addEventListener(function (isActive) {
if (isActive == true) {
viewer.enableCursorStyle = false;
viewer._element.style.cursor = '';
$('body').removeClass('measureCur').addClass('measureCur');
viewer.scene.pickPointEnabled = pickPointEnabled;
}
else {
viewer.enableCursorStyle = true;
$('body').removeClass('measureCur');
viewer.scene.pickPointEnabled = false;
}
});
}
function addPolyline(viewer){
var polylineLayer = new Cesium.CustomDataSource('polylineLayer');
var entity1 = polylineLayer.entities.add({
name: "polyline",
polyline: {
positions: Cesium.Cartesian3.fromDegreesArray([108.958521,34.219594,108.959729,34.219627]),
width: 5,
clampToGround: true,
material: new Cesium.PolylineOutlineMaterialProperty({
color: Cesium.Color.ORANGE,
outlineWidth: 2,
outlineColor: Cesium.Color.BLACK,
}),
}
});
viewer.dataSources.add(polylineLayer);
};
function addPolygon(viewer){
var polygonLayer = new Cesium.CustomDataSource('polygonLayer');
var entity1 = polygonLayer.entities.add({
name: "polygon",
polygon: {
hierarchy: Cesium.Cartesian3.fromDegreesArray([
108.949096,
34.209525,
108.9497922,
34.21952,
108.959757,
34.2190098,
108.959091,
34.209045
]),
material: Cesium.Color.BLUE.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.YELLOW,
// clampToGround: true,//面没有这个属性
classificationType:Cesium.ClassificationType.BOTH
},
});
viewer.dataSources.add(polygonLayer);
};
function clearAll() {
deactiveAll();
handlerArea && handlerArea.clear();
}
function deactiveAll() {
handlerArea && handlerArea.deactivate();
}
</script>
</body>
</html>
测试3dtiles下载地址:
链接: https://pan.baidu.com/s/1gFJxdlldqvr9nO4ZngYSiQ 提取码: 5yie
解压后放到\SuperMap_iClient3D_10i(2020)_sp2_for_WebGL\examples\webgl\data\3dtiles目录下。本地部署运行。
另外吐个槽,标题限制40个字符实在太少了,含英文单词的标题就写不了几个汉字了。