百度或者高德地图中的纯文字信息窗口是怎么做进去的呢?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版本设置,一样很轻松!