物联网3D可视化场景中，经常用到顶牌界面作为建筑对象信息展示面板、业务区域标绘，比如定位设备或建筑位置，进行对应的对象信息展示。
我们推出的森城市具有丰富的全国城市模型，可以快速创建自有的3d城市项目，那么这些森城市生成的3d项目中如何添加顶牌界面进行信息显示呢？
1. 首先需要在森城市中选择符合自己需求的区域添加到我的图层
(注意事项:森城市选择的区域需要付费后才可以在在线开发环境进行代码创建，编辑等操作)
2. 前往在线开发，选择地图资源列表，找到选择的对应的森城市资源，双击生成代码
3. 在代码编辑区域进行对应的对象获取以及界面内容添加
熟悉平台示例的都知道，我们的地图上目前是通过infowindow进行界面添加的，这样可以生成官方默认的界面内容，也可以自行定义html内容，相关内容可以前往在线开发环境查看。
- var obj = app.query('geoItem_GeoBuilding_47')[0];
- var infoWindowHtml = `
- <div style="width: 114px;" >
- <div class="infowindow" style="float: left; width: 114px;">
- <div style="display: flex;align-items: center;flex-direction: column;justify-content: space-between;margin-top: -10px;">
- <span style="height: 30px;background: #0e1219;opacity: .7;border: 1px solid hsla(0,0%,100%,.3);text-align: center;cursor: pointer;font-size: 16px;font-family: PingFangSC-Regular,PingFang SC,sans-serif;font-weight: 400;color: #fff;line-height: 30px;padding: 0 5px;border-top: 2px solid #ff924a;">恒通商务园</span>
- <span style="background: url('/uploads/wechat/5qmY5a2Q6YWx/file/2021_11_25_01/img/search.png');width: 44px;height: 64px;color: #0000;cursor: pointer;"></span>
- </div>
- </div>
- </div>`;
- createPoint1 = app.create({
- type: "GeoPoint",
- name: 'point',
- coordinates: [116.49374575787296, 39.978265542910385],
- renderer: {
- type: "image", // image 代表使用图片
- url: "https://www.thingjs.com/static/image/train_station.png", // 图片 url
- },
- infoWindow: {
- displayMode: CMAP.DisplayMode.Always, // 常显
- type: CMAP.InfoWindowType.Custom, // 自定义InfoWindow
- customHtml: infoWindowHtml,
- // pivot: [0.5, 0.5],
- // offset: [-1000,0,700]
- },
- });
- map.add(createPoint1); // 将一个点加到ThingLayer中
后续通过我们会推出配饰标注界面也可以直接选择生成配饰界面选择面板，在指定对象上生成配饰面板，可以根据需求读取显示对象信息。可以关注网站后续更新。
|
|
|
|
|
|
|
|
|
|
1845
0
