乐趣区

关于javascript:撇开3D建模知识ThingJS采用JS语法来完成3D地图开发

jiezi

百度或者高德地图中的纯文字信息窗口是怎么做进去的呢？ThingJS 实现了简易版 3D 地图信息弹窗。

无论是 2D 地图还是 3D 地图，常常会有展现信息面板的需要，能够用来示意物体对象的地位，也能够实时展现某物体的状态。在 ThingJS 开发教程中，这些有地理位置的坐标，咱们称之为“信息弹窗 InfoWindow”。

thingjs 开发中反对应用 layer 来显示 Web 界面的信息弹窗。为了更加不便前端用户操作，咱们应用 THING.Utils.dynamicLoad 援用 layer 的官网 JS 文件，可在场景上 2D 界面创立一个按钮，点击按钮既可呈现 layer 弹窗。

ThingJS 底层内置了三种信息面板的规范模式，会依据对象 userData 身上的属性主动生成信息面板，这是咱们底层定义的界面款式，用户无奈批改。此外用户还能够自定义信息面板，通过代码自行开发，自行布局界面款式和操作。
规范参数阐明如下，包含 displayMode，type 和 style，都是预设的。

1.displayMode：三种显示模式

CMAP.DisplayMode.Click 点击显示
CMAP.DisplayMode.Always 常显
CMAP.DisplayMode.MouseEnter 鼠标移入显示（悬浮显示）

2.type：信息面板类型

CMAP.InfoWindowType.Standard 规范
CMAP.InfoWindowType.Custom 自定义

3.style：预置的款式

在 type 为 CMAP.InfoWindowType.Standard 时失效
CMAP.InfoWindowStyle.Default 默认彩色
CMAP.InfoWindowStyle.Blue 蓝色
CMAP.InfoWindowStyle.White 红色

这是规范信息面板的代码示例。


var geoPoint = app.create({
type: 'GeoPoint',
name: 'geoPoint0',
coordinates: [116.405, 39.906],
userData: {'type': '地铁站','name':'前门地铁站'},
renderer: {
    type: 'image', // image 代表创立图片类型的点
    url: 'image/uGeo/pop.png', // 图片的 url
    size: 5  // 尺寸
},
infoWindow:
    {
    'title': '题目',
    'displayMode': CMAP.DisplayMode.Click,// 点击显示
    'type': CMAP.InfoWindowType.Standard,// 规范 indoWindow
    'style': CMAP.InfoWindowStyle.Default,// 默认款式 彩色
    'pivot': [0.5, 1.3],// 界面的轴心，以百分比示意界面轴心地位。[0,0] 代表界面左上；[1,1] 代表界面右下 pivot 可大于 1 用于像素级的偏移
    'fieldData': [
        {
        'field': 'name',
        'alias': '名称'
        },
    {
        'field': 'type',
        'alias': '类型'
        }]
    },// 配置要展现哪些字段以及设置字段名称的别名(显示的名称)
});

这是自定义信息面板的代码示例。

var infoWindowHtml = '\n'
+ '\n'
+ '\n'
+ '{{name}}\n'
+ '{{type}}\n'
+ '\n'
+ '\n'
+ '';
var geoPoint = app.create({
type: 'GeoPoint',
name: 'geoPoint0',
coordinates: data.features[3].geometry.coordinates,
userData: data.features[3].properties,
renderer: {
    type: 'image', // image 代表创立图片类型的点
    url: 'image/uGeo/pop.png', // 图片的 url
    size: 5  // 尺寸
},
infoWindow:
    {
    'displayMode': CMAP.DisplayMode.Click,// 点击显示
    'type': CMAP.InfoWindowType.Custom,// 自定义 InfoWindow
    'customHtml': infoWindowHtml
    },
});
pointLayer.add(geoPoint);
留神：自定义 html 的标签中 {{name}} 代表应用对象 userData 中的 name 字段的值。

ThingJS 撇开 3D 建模常识，采纳 JS 语法来实现 3D 版本设置，一样很轻松！

退出移动版