僅需不到50行代碼！ThingJS把這種常用效果加入官方示例

地圖的資訊視窗會提供目前的位址資訊，提示使用者後續操作或者完成浏覽。ThingJS提供了基于JS文法的基礎示例。

無論是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把這種常用的效果加入官方示例，每個顯示僅需不到50行代碼！