跳到主要内容

9、倾斜模型单体化场景制作

本文概述​

利用CesiumEarth提供的能力，可对倾斜模型做单体化场景，同时支持点击建筑高亮显示，并查询其属性信息。

利用CesiumEarth导出cedb数据库，可在移动端设备上浏览查看，同时也支持单体化建筑的点击高亮查询。

PC端的效果如下​

Locale Dropdown

移动端（平板电脑）的效果如下​

Locale Dropdown

本场景用到的资源​

倾斜模型数据（大雁塔）: http://earthsdk.com/v/last/Apps/assets/dayanta/tileset.json

一、加载天地图及倾斜模型​

从首页点击进入三维地球（加载默认图层）

默认图层包含天地图影像、天地图注记、CesiumIon地形三个图层

Locale Dropdown

新建倾斜三维图层，加入大雁塔数据

Locale Dropdown

调整大雁塔的高度及亮度

Locale Dropdown

二、添加建筑矢量图层​

新建矢量图层​

输入图层名称，选择新建数据，设置矢量类型为面，输入字段名称（名称,简介）

Locale Dropdown

添加建筑底面​

选中建筑信息图层，点击矢量图层属性，点击添加要素

Locale Dropdown

在编辑属性选项卡中输入要素对应的属性内容

Locale Dropdown

在编辑图形选项卡中绘制大雁塔的建筑底面，右键结束编辑，点击确认后添加完毕

Locale Dropdown

设置建筑底面为可见状态​

首先设置建筑底面矢量图层参数，使矢量面与倾斜模型覆盖，可查看矢量面是否完整覆盖建筑模型。

点击图层设置，在设置窗口中修改对应的参数：

polygonColor = #FF000066
polylineClampToGround = 1
polygonClampToGround = 1

Locale Dropdown

设置建筑底面为不可见状态​

在实际使用场景中，建筑底面是隐藏的状态，点击倾斜模型对应的建筑，能够判断矢量数据是否被选中，而成功选中矢量代表对应的建筑被选中，此时建筑模型应高亮显示，并弹出对应的属性信息。

调整建筑底面的设置参数：

polygonColor = #FF000000

注意：polygonShow此时必须为1，否则无法触发点击事件

Locale Dropdown

三、使用效果​

此时场景设置已经完成，点击大雁塔任何部位，都会判断是否选中建筑，选中后会对其进行高亮，并弹出属性窗口，具体效果如下图：

未被点击的状态：

Locale Dropdown

被点击的状态：

Locale Dropdown

四、在移动端浏览查看​

场景制作完成后，可在图层管理中导出cedb文件，也可直接复制cedb数据。

导出后的cedb可发送到移动端进行浏览，也可直接复制cedb数据到移动端直接打开场景。

Locale Dropdown

Locale Dropdown

本场景的cedb数据​

[{"title":"天地图","children":[{"title":"卫星影像","url":"http://{s}.tianditu.com/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=0f84da9fd48038ea3bd8de15ff9fb4c2","subdomains":["t0","t1","t2","t3","t4","t5","t6","t7"],"checked":true,"type":"ImageryURL","format":"image/jpeg","tileMatrixSetID":"GoogleMapsCompatible","key":"e7qn9go1v8oaic54","tileAlpha":"1.0","tileBrightness":"1.0","tileColorToAlpha":"","tileColorToAlphaThreshold":"0.0","tileContrast":"1.0","tileGamma":"1.0","tileHue":"0.0","tileSaturation":"1.0","tileRectangle":"","tileCutoutRectangle":"","tileMaximumLevel":"18","tileMinimumLevel":"0"},{"title":"卫星影像注记","url":"http://t{s}.tianditu.com/cia_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=cia&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default.jpg&tk=0f84da9fd48038ea3bd8de15ff9fb4c2","subdomains":["0","1","2","3","4","5","6","7"],"anno":"1","checked":true,"type":"ImageryWMTS","format":"image/png","tileMatrixSetID":"GoogleMapsCompatible","key":"vzwlqdl1n0daxj40","tileAlpha":"1.0","tileBrightness":"1.0","tileColorToAlpha":"","tileColorToAlphaThreshold":"0.0","tileContrast":"1.0","tileGamma":"1.0","tileHue":"0.0","tileSaturation":"1.0","tileRectangle":"","tileCutoutRectangle":"","tileMaximumLevel":"18","tileMinimumLevel":"0"}],"checkable":false,"key":"1zgk7na4tgrctynd"},{"title":"地形","checkable":false,"children":[{"title":"CesiumIon地形","url":"-","checked":false,"type":"TerrainDefault","token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJqdGkiOiJjMWYwNDIxZS05N2NhLTQyY2UtYWEzMi01NzFiYzA5ZDVjNjIiLCJpZCI6NDcyNDQsImlhdCI6MTYxNzAwODE0Nn0.0VGcsvaBuAbCFp1AdfYQjFwjZF4Y7OyG8MNy3YKIsDI","key":"ls5yp3bqc26fhfuo","terrainVerticalExaggeration":"1.0","terrainRelativeHeight":"0.0"}],"key":"1wv3zl90qijuxju8"},{"title":"我的图层","checkable":false,"key":"2pdva1udyz50aguy","children":[{"title":"大雁塔","url":"http://earthsdk.com/v/last/Apps/assets/dayanta/tileset.json","checked":true,"type":"3DTiles","key":"t35myu3n58m2daze","skipLevelOfDetail":false,"maximumNumberOfLoadedTiles":1024,"maximumMemoryUsage":0,"baseScreenSpaceError":1024,"skipScreenSpaceErrorFactor":16,"skipLevels":1,"immediatelyLoadDesiredLevelOfDetail":false,"loadSiblings":false,"maximumScreenSpaceError":16,"cullWithChildrenBounds":true,"foveatedScreenSpaceError":true,"location":"0,0","offsetHeight":"-400","brightness":"1.5"},{"title":"建筑信息","url":"","content":{"crs":{"type":"name","properties":"urn:ogc:def:crs:OGC:1.3:CRS84"},"type":"FeatureCollection","name":"polygons","features":[{"geometry":{"type":"MultiPolygon","coordinates":[[[[108.95917333,34.220002436,25.456815487749743],[108.959171397,34.219523526,25.280891731691174],[108.959700397,34.219519887,25.706990080740436],[108.959698641,34.220006125,25.953864563217525],[108.95917333,34.220002436,25.456815487749743]]]]},"properties":{"名称":"大雁塔","介绍":"大雁塔位于唐长安城晋昌坊（今陕西省西安市南）的大慈恩寺内，又名“慈恩寺塔”。唐永徽三年（652年），玄奘为保存由天竺经丝绸之路带回长安的经卷佛像主持修建了大雁塔，最初五层，后加盖至九层，再后层数和高度又有数次变更，最后固定为所看到的七层塔身，通高64.517米，底层边长25.5米。 大雁塔作为现存最早、规模最大的唐代四方楼阁式砖塔，是佛塔这种古印度佛寺的建筑形式随佛教传入中原地区，并融入华夏文化的典型物证，是凝聚了中国古代劳动人民智慧结晶的标志性建筑。 [1] 1961年3月4日，国务院公布大雁塔为第一批全国重点文物保护单位 [2]。2014年6月22日，在卡塔尔多哈召开的联合国教科文组织第38届世界遗产委员会会议上，大雁塔作为中华人民共和国、哈萨克斯坦和吉尔吉斯斯坦三国联合申遗的“丝绸之路：长安-天山廊道的路网”中的一处遗址点成功列入《世界遗产名录》。","fid":4},"type":"Feature"}]},"flyTo":"0","checked":true,"fid":5,"type":"Vector","vectorType":"Polygons","vectorFields":"名称,介绍","key":"llv5kefauwrzjs9j","removeDuplication":"0","removeDuplicationField":"","pointShow":"1","pointWidth":"6","pointColor":"#FFFFFF","pointOutlineWidth":"2","pointOutlineColor":"#FF0000","pointOffsetHeight":"0","pointClampToGround":"0","pointDistanceDisplayCondition":"0","polylineShow":"0","polylineColor":"#FF0000","polylineWidth":"1","polylineHeight":"10","polylineExtrudedHeight":"100","polylineCornerType":"ROUNDED","polylineMaterial":"SolidColor","polylineMaterialColorTexture":"","polylineMaterialImageTexture":"","polylineMaterialRepeat":"1.0,1.0","polylineTime":"1.0","polylineTrailLength":"0.1","polylineGlowPower":"0.25","polylineTaperPower":"1.0","polylineGapPower":"#00000000","polylineDashLength":"16.0","polylineDashPattern":"255.0","polylineOutlineColor":"#FFFFFF","polylineOutlineWidth":"2.0","polylineVolumeSmooth":"6","polylineClampToGround":"1","polylineDistanceDisplayCondition":"0","polygonShow":"1","polygonColor":"#FF000000","polygonOutlineShow":"0","polygonOutlineColor":"#FFFFFF","polygonHeight":"0","polygonExtrudedHeight":"0","polygonPerPositionHeight":"0","polygonClampToGround":"1","polygonDistanceDisplayCondition":"0","labelShow":"0","labelField":"name","labelFont":"16px PingFang","labelShowBackground":"0","labelBackgroundColor":"#333333","labelBackgroundPadding":"7,5","labelPixelOffset":"0,-20","labelEyeOffset":"0,0,0","labelHorizontalOrigin":"CENTER","labelVerticalOrigin":"CENTER","labelFillColor":"#FF0000","labelOutlineColor":"#FFFFFF","labelOutlineWidth":"4","labelDistanceDisplayCondition":"0","labelScaleByDistance":"0","bubbleShow":"0","bubbleImage":"http://www.cesiumearth.com/resources/bubbles/Bub3.png","bubbleScale":"0.75","bubbleHorizontalOrigin":"CENTER","bubbleVerticalOrigin":"BOTTOM","bubblePixelOffset":"0,0","bubbleRotation":"0","bubbleDistanceDisplayCondition":"0","bubbleScaleByDistance":"0"}]}]

用移动端设备访问​

在移动端设备上打开浏览器，输入地址：http://m.cesiumearth.com

Locale Dropdown

导入cedb文件或数据

Locale Dropdown

导入完毕后如下图所示，点击图层可进行视角定位

Locale Dropdown

点击大雁塔建筑可高亮并显示建筑属性

Locale Dropdown

​