效果如下：
说明：JQuery获取dom元素进而修改顶牌样式，如下（代码中有使用）
1 // 加载地图 2 var app = new THING.App(); 3 // 设置app背景为黑色 4 app.background = [0, 0, 0]; 5 // 引用地图组件脚本 6 THING.Utils.dynamicLoad(['https://www.thingjs.com/uearth/history/uearth.min.v1.7.20.js', 7 '/guide/examples/lib/html2canvas/html2canvas.min.js', // html2canvas脚本 8 '/guide/examples/plugins/topcard/sceneTopCard.min.v0.1.2.js' // 顶牌管理脚本 9 ], function () { 10 app.create({ 11 type: 'Map', 12 // 地图场景名：南大厅复制 13 url: 'https://city.thingjs.com/ra/city/mapProject/config/TVRVd056VXhNUT09Q2l0eUJ1aWxkZXJAMjAxOQ==', 14 complete: function (event) { 15 createCam1(); 16 } 17 }); 18 19 function createCam1() { 20 21 //康赛妮集团江北园区 22 var sceneTopCardClass = null; // 顶牌类 23 var building = null; // 被顶牌对象 24 25 if (typeof (SceneTopCard) != 'undefined') { 26 sceneTopCardClass = new SceneTopCard(app); 27 } 28 // 获取被顶牌对象 29 building = app.query('build200')[0]; 30 building.userData['title0'] = 'A' 31 building.userData['title1'] = '康赛妮-江北' 32 building.userData['title2'] = '江北区海川路65号' 33 building.userData['bbIdx'] = '1' 34 building.userData['bbTag'] = '默认' 35 building.userData['bb3d'] = 'false' 36 building.userData['bbModel'] = 'always' 37 building.userData['bbScaleW'] = '0.8' 38 building.userData['bbScaleH'] = '0.8' 39 sceneTopCardClass.create(building); 40 41 //添加文本标注 42 var building008 = app.query('build111')[0]; 43 // 相对于父物体创建3D文本 44 var textRegion008 = app.create({ 45 type: 'TextRegion', 46 id: 'textRegion008', 47 parent: building008, 48 keepSize:false, 49 localPosition: [-3, 1, -1], // 父物体坐标系下的的相对坐标 50 text: 'CONSINEE', 51 style: { 52 fontColor: '#f26005', // 文本颜色 支持16进制颜色 和 rgb颜色 53 fontSize: 80 // 文本字号大小 54 } 55 }); 56 textRegion008.rotateY(-135); 57 58 59 //添加文本标注 60 var building110 = app.query('build20')[0]; 61 // 相对于父物体创建3D文本E 62 var textRegion110 = app.create({ 63 type: 'TextRegion', 64 id: 'textRegion110', 65 parent: building110, 66 keepSize:false, 67 localPosition: [5, 8, 5], // 父物体坐标系下的的相对坐标 68 text: '智能工厂', 69 style: { 70 fontColor: '#ff0000', // 文本颜色 支持16进制颜色 和 rgb颜色 71 fontSize: 140, // 文本字号大小 72 } 73 }); 74 textRegion110.rotateY(-90); 75 76 //添加文本标注 77 var building002 = app.query('build116')[0]; 78 // 相对于父物体创建3D文本E 79 var textRegion002 = app.create({ 80 type: 'TextRegion', 81 id: 'textRegion002', 82 parent: building002, 83 keepSize:false, 84 localPosition: [-3, 21, 2], // 父物体坐标系下的的相对坐标 85 text: '办公楼', 86 style: { 87 88 fontColor: '#ff0000', // 文本颜色 支持16进制颜色 和 rgb颜色 89 fontSize: 120, // 文本字号大小 90 } 91 }); 92 textRegion002.rotateY(-90); 93 94 // //添加文本标注 95 // var building003 = app.query('office')[0]; 96 // // 相对于父物体创建3D文本E 97 // var textRegion003 = app.create({ 98 // type: 'TextRegion', 99 // id: 'textRegion003', 100 // parent: building003, 101 // keepSize:false, 102 // localPosition: [-10, 1, -5], // 父物体坐标系下的的相对坐标 103 // text: '康 赛 妮 集 团', 104 // style: { 105 106 // fontColor: '#ff0000', // 文本颜色 支持16进制颜色 和 rgb颜色 107 // fontSize: 60, // 文本字号大小 108 // } 109 // }); 110 // textRegion003.rotateY(-90); 111 112 //添加文本标注 113 var building005 = app.query('TopLine')[0]; 114 // 相对于父物体创建3D文本 115 var textRegion005 = app.create({ 116 type: 'TextRegion', 117 id: 'textRegion005', 118 parent: building005, 119 keepSize:false, 120 localPosition: [0, 65, 5], // 父物体坐标系下的的相对坐标 121 text: '康宝莱', 122 style: { 123 fontColor: '#ff0000', // 文本颜色 支持16进制颜色 和 rgb颜色 124 fontSize: 130, // 文本字号大小 125 } 126 }); 127 textRegion005.rotateY(-90); 128 129 130 //添加文本标注 131 var building006 = app.query('build006')[0]; 132 // 相对于父物体创建3D文本 133 var textRegion006 = app.create({ 134 type: 'TextRegion', 135 id: 'textRegion006', 136 parent: building006, 137 keepSize:false, 138 localPosition: [-15, 8, 0], // 父物体坐标系下的的相对坐标 139 text: '粗纺', 140 style: { 141 fontColor: '#ff0000', // 文本颜色 支持16进制颜色 和 rgb颜色 142 fontSize: 40, // 文本字号大小 143 } 144 }); 145 textRegion006.rotateY(-90); 146 147 148 //江南织造府园区 149 var sceneTopCardClass = null; // 顶牌类 150 var building = null; // 被顶牌对象 151 152 if (typeof (SceneTopCard) != 'undefined') { 153 sceneTopCardClass = new SceneTopCard(app); 154 } 155 // 获取被顶牌对象 156 building = app.query('build112')[0]; 157 building.userData['title0'] = 'C' 158 building.userData['title1'] = '康赛妮-骆驼' 159 building.userData['title2'] = '镇海区南一西路78号' 160 building.userData['bbIdx'] = '1' 161 building.userData['bbTag'] = '默认' 162 building.userData['bb3d'] = 'false' 163 building.userData['bbModel'] = 'always' 164 building.userData['bbScaleW'] = '0.8' 165 building.userData['bbScaleH'] = '0.8' 166 sceneTopCardClass.create(building); 167 168 //添加文本标注 169 // var building117 = app.query('#build118')[0]; 170 // // 相对于父物体创建3D文本E 171 // var textRegion117 = app.create({ 172 // type: 'TextRegion', 173 // id: 'textRegion117', 174 // parent: building117, 175 // keepSize:false, 176 // localPosition: [5, 8, 10], // 父物体坐标系下的的相对坐标 177 // text: '江南织造府', 178 // style: { 179 // fontColor: '#ff0000', // 文本颜色 支持16进制颜色 和 rgb颜色 180 // fontSize: 220, // 文本字号大小 181 // } 182 // }); 183 // textRegion117.rotateY(-90); 184 185 186 //康赛妮镇海厂区 新纤维 187 188 var sceneTopCardClass = null; // 顶牌类 189 var building = null; // 被顶牌对象 190 191 if (typeof (SceneTopCard) != 'undefined') { 192 sceneTopCardClass = new SceneTopCard(app); 193 } 194 // 获取被顶牌对象 195 building = app.query('#build301')[0]; 196 building.userData['title0'] = 'D' 197 building.userData['title1'] = '康赛妮-镇海' 198 building.userData['title2'] = '镇海区川浦路159号' 199 building.userData['bbIdx'] = '1' 200 building.userData['bbTag'] = '默认' 201 building.userData['bb3d'] = 'false' 202 building.userData['bbModel'] = 'always' 203 building.userData['bbScaleW'] = '0.8' 204 building.userData['bbScaleH'] = '0.8' 205 sceneTopCardClass.create(building); 206 207 208 //添加文本标注 209 var building301 = app.query('build301')[0]; 210 // 相对于父物体创建3D文本 211 var textRegion301 = app.create({ 212 type: 'TextRegion', 213 id: 'textRegion301', 214 parent: building, 215 keepSize:false, 216 localPosition: [-40, 50, 5], // 父物体坐标系下的的相对坐标 217 text: '新纤维', 218 style: { 219 fontColor: '#ff0000', // 文本颜色 支持16进制颜色 和 rgb颜色 220 fontSize: 230 // 文本字号大小 221 } 222 }); 223 textRegion301.rotateY(-90); 224 225 226 //添加文本标注 227 var building303 = app.query('build10')[0]; 228 // 相对于父物体创建3D文本 229 var textRegion303 = app.create({ 230 type: 'TextRegion', 231 id: 'textRegion303', 232 parent: building303, 233 keepSize:false, 234 localPosition: [-10, 15, -60], // 父物体坐标系下的的相对坐标 235 text: '纺织品', 236 style: { 237 fontColor: '#ff0000', // 文本颜色 支持16进制颜色 和 rgb颜色 238 fontSize: 105 // 文本字号大小 239 } 240 }); 241 textRegion303.rotateY(-90); 242 243 //宁波南洋直播中心 244 var sceneTopCardClass = null; // 顶牌类 245 var building = null; // 被顶牌对象 246 247 if (typeof (SceneTopCard) != 'undefined') { 248 sceneTopCardClass = new SceneTopCard(app); 249 } 250 // 获取被顶牌对象 251 building = app.query('live')[0]; 252 building.userData['title0'] = 'B' 253 building.userData['title1'] = '电商园区' 254 building.userData['title2'] = '江北区长兴路618号' 255 building.userData['bbIdx'] = '1' 256 building.userData['bbTag'] = '默认' 257 building.userData['bb3d'] = 'false' 258 building.userData['bbModel'] = 'always' 259 building.userData['bbScaleW'] = '0.8' 260 building.userData['bbScaleH'] = '0.8' 261 sceneTopCardClass.create(building); 262 263 //添加文本标注 264 // var building303 = app.query('live')[0]; 265 // // 相对于父物体创建3D文本 266 // var textRegion303 = app.create({ 267 // type: 'TextRegion', 268 // id: 'textRegion303', 269 // parent: building303, 270 // keepSize:false, 271 // localPosition: [0, 10, 25], // 父物体坐标系下的的相对坐标 272 // text: '电商园区', 273 // style: { 274 // fontColor: '#ff0000', // 文本颜色 支持16进制颜色 和 rgb颜色 275 // fontSize: 220 // 文本字号大小 276 // } 277 // }); 278 // textRegion303.rotateY(0); 279 280 //康赛妮宁波中心 281 var sceneTopCardClass = null; // 顶牌类 282 var building = null; // 被顶牌对象 283 284 if (typeof (SceneTopCard) != 'undefined') { 285 sceneTopCardClass = new SceneTopCard(app); 286 } 287 // 获取被顶牌对象 288 building = app.query('ningbo')[0]; 289 building.userData['title0'] = 'E' 290 building.userData['title1'] = '康赛妮宁波中心' 291 building.userData['title2'] = '江北区槐树路88号' 292 building.userData['bbIdx'] = '1' 293 building.userData['bbTag'] = '默认' 294 building.userData['bb3d'] = 'false' 295 building.userData['bbModel'] = 'always' 296 building.userData['bbScaleW'] = '0.8' 297 building.userData['bbScaleH'] = '0.8' 298 299 sceneTopCardClass.create(building); 300 // // JQuery修改顶牌元素的样式 301 // $('.card-title1').css('font-size', '30px') 302 // $('#scene-card-52432').css('width', '50px') 303 $('#scene-card-52432 .card-title1').css('font-size', '20px') 304 305 //添加文本标注 306 // var building303 = app.query('ningbo')[0]; 307 // // 相对于父物体创建3D文本 308 // var textRegion303 = app.create({ 309 // type: 'TextRegion', 310 // id: 'textRegion303', 311 // parent: building303, 312 // keepSize:false, 313 // localPosition: [0, 10, 25], // 父物体坐标系下的的相对坐标 314 // text: '康赛妮宁波中心', 315 // style: { 316 // fontColor: '#ff0000', // 文本颜色 支持16进制颜色 和 rgb颜色 317 // fontSize: 120 // 文本字号大小 318 // } 319 // }); 320 // textRegion303.rotateY(0); 321 322 //添加文本标注 323 var building304 = app.query('words')[0]; 324 // 相对于父物体创建3D文本 325 var textRegion304 = app.create({ 326 type: 'TextRegion', 327 id: 'textRegion303', 328 parent: building304, 329 keepSize:false, 330 localPosition: [4, 15, 5], // 父物体坐标系下的的相对坐标 331 text: '践行专精特新国家战略', 332 style: { 333 fontColor: '#ff0000', // 文本颜色 支持16进制颜色 和 rgb颜色 334 fontSize: 42 // 文本字号大小 335 } 336 }); 337 textRegion304.rotateY(0); 338 339 //隐藏顶牌详细信息面板 340 document.getElementById('div2d').style.display = "none"; 341 342 // $('.card-title1').fontSize='24px'; // 通过class名称获取 343 }; 344 });