室内地图 JavaScript API

室内地图JavaScript API文档 V1.2

主要功能类：

Map

API各种类中的核心部分，用来在页面中创建地图并操纵地图.


    //示例 初始化地图
    var map = new Indoor.Map('container',{
        key:'开发者key',
        buildingId:'建筑物ID'
    });

    //由于地图数据使用了异步加载，为避免出错请把所有的逻辑放在mapready事件内
    map.once('mapready',function(){
        console.log(map.getFloor());
    })

创建

Factory	Description
`Indoor.Map( <HTMLElement\|String> id, <Map options> options )`	实例化一个地图对象 HTMLElement：地图的DIV容器ID； Map options：地图选项；

选项

Option	Type	Default	AllowEmpty	Description
`key`	`String`	`null`	`no`	申请JSAPI的开发者key,申请地址：http://lbs.amap.com/dev/key,注：key需要绑定JavaScriptAPI服务
`buildingId`	`String`	`null`	`no`	建筑物ID.
`floor`	`Number`	`null`	`yes`	地图加载指定的楼层
`zoom`	`Number`	`null`	`yes`	地图加载指定的层级
`floorControl`	`Boolean`	`true`	`yes`	是否显示楼层控件
`detailTipControl`	`Boolean`	`true`	`yes`	是否显示详情tip控件，pc端显示在水滴图标上，mo单独显示在页脚.
`searchBarControl`	`Boolean`	`true`	`yes`	是否显示搜索控件
`routeControl`	`Boolean`	`true`	`yes`	是否显示路算控件
`zoomControl`	`Boolean`	`true`	`yes`	是否显示载放大／缩小控件
`imagePath`	`String`	`images`	`yes`	图片资源路径，默认和jsapi在相同路径下的images目录
`highlightFeatrueClick`	`Boolean`	`false`	`yes`	点击商铺后是否高亮显示
`renderColors`	`object`	`null`	`yes`	自定义渲染颜色见例子
`indoorExtra`	`String`	`null`	`yes`	自定义标识字符串，通过标识来实现自定义统计，注：字符串中不要带&和=字符,通过KEY:VAULE的形式传递多组字段和内容，例:KEY1:VAULE1;KEY2:VAULE2

事件

Event	Data	Description
`click`	`MouseEvent`	点击或触摸地图.
`contextmenu`	`MouseEvent`	鼠标右键.
`zoomstart`	`Event`	当地图缩放即将发生时触发。（比如缩放动作开始前）.
`zoomend`	`Event`	当地图缩放时触发.
`mapready`	`Event`	地图加载完成时触发.
`floorchangestart`	`Event`	当地图开始切换楼层时触发.
`floorchanged`	`Event`	当地图楼层切换完成时触发.
`shopclick`	`FeatureEvent`	当商铺点击时触发.
`facilityclick`	`FeatureEvent`	当设施点击时触发.
`cancelclick`	`Event`	当取消点击时触发.

地图状态修改

Method	Returns	Description
`setFloor( <Number> floor)`	`this`	楼层切换.
`setBuilding( <String> buildingId)`	`this`	门店切换.
`goToFeature( <String> ft_sourceid)`	`this`	根据ft_sourceid 跳转到商铺或设施.
`setView( <LatLng> center, <Number> zoom? )`	`this`	设定地图（设定其地理中心和缩放）.
`setZoom( <Number> zoom )`	`this`	设定地图的缩放.
`zoomIn( <Number> delta?)`	`this`	通过delta变量放大地图的级别，1是delta的默认值.
`zoomOut( <Number> delta? )`	`this`	通过delta变量缩小地图的级别，1是delta的默认值..
`fitBounds( <LatLngBounds> bounds, <fitBounds options> options? )`	`this`	将地图视图尽可能大地设定在给定的地理边界内..
`panTo( <LatLng> latlng )`	`this`	将地图平移到给定的中心.
`remove()`	`this`	移除地图（所有对象和事件）.

获取地图状态

Method	Returns	Description
`getFloor()`	`Number`	返回当前现实建筑的楼层.
`getCenter()`	`LatLng`	返回地图视图的地理中心.
`getZoom()`	`Number`	获取地图视图现在所处的缩放级别.
`getMinZoom()`	`Number`	返回地图最小的缩放级别.不同建筑的最小级别会不相同。
`getMaxZoom()`	`Number`	返回地图最大的缩放级别.不同建筑最大级别固定为22级。
`getSize()`	`Point`	返回现有地图容器的大小。

图层或控件操作

Method	Returns	Description
`addLayer( layer )`	`this`	将图层添加到地图上。
`removeLayer( layer )`	`this`	将图层在地图上移除..
`hasLayer( layer )`	`Boolean`	如果添加的图层是当前图层则返回true..
`addControl( control )`	`this`	在地图上添加控件.
`removeControl( control )`	`this`	在地图上移除控件.

获取商铺或设施数据

Method	Returns	Description
`getShopData( <String> searchKey )`	`{total: 结果统计, count: {楼层:结果统计}, data: Array[Feature]}`	根据关键词获取商铺，如果关键词为空，则返回所有。
`getFacilityData( <String> ft_typecode )`	`{total: 结果统计, count: {楼层:结果统计}, data: Array[Feature]}`	根据ft_typecode获取设施，如果ft_typecode为空，则返回所有。常用设施: '991000-991001':出入口, '2003':卫生间, '990200':扶梯, '990300':直梯, '980452':问讯处, '1603':ATM, '980401':收银台, '990100':楼梯使用例子: map.getFacilityData('980452');

其他方法


      //路径规划示例
      var start = {},stop={};
      //方式一 两点之间路算
      //起点楼层和坐标
      start.x = 120.19788119941951;
      start.y = 30.248480860167067;
      start.floor = 1;
      //终点楼层和坐标
      stop.x = 120.19874554127456;
      stop.y = 30.248932533839923;
      stop.floor = 5;

      //方式二 两个商铺或设施之间的路算，使用 ft_sourceid
      //var start = {},stop={};
      //start.id = '49130210500054';
      //stop.id = '49130310100543';

      //方式三 点到设施之间路算，使用一和二之间各自一个起点或终点

      //成功回调 返回路算的信息
      function sucessback(routeInfo){
          console.log(routeInfo);
      }

      //失败 返回失败信息
      function errback(msg){
          console.log(msg);
      }
      //开始路算
      map.routePath(start,stop,sucessback,errback,{showTip:false});

Method	Returns	Description
`getFloorNona( <Number> floor )`	`String`	根据楼层获取楼层别名.
`routePath(<Object> startOption, <Object> stopOption, <Function> sucessback , <Function> errback,<object> option )`	`object`	路径规划.
`cancelRoutePath()`	`this`	取消路径规划.
`cancelClick()`	`this`	取消商铺或设施点击.
`hightLightFacility( <String> ft_sourceid )`	`this`	根据ft_sourceid高亮设施.
`cancelHightLightFacility( <String> ft_sourceid )`	`this`	根据ft_sourceid取消高亮的设施.
`hightLightShop( <String> ft_sourceid )`	`this`	根据ft_sourceid高亮商铺.
`cancelHightLightShop( )`	`this`	取消高亮商铺.
`cancelAllHightLight( )`	`this`	取消所有高亮.
`addLocateMarker( <LatLng> latlng, <object> options? )` 注：options为{angle:角度},参考Icon options 例子：map.addLocateMarker(map.getCenter(),{angle:90}) 返回的Marker对象中会有setAngle(<Number> angle)的方法，可以改变角度;	`Marker`	增加一个可以设置角度的定位标记.
`closePopup( <Popup> popup )`	`this`	关闭指定popup，如果参数为空，则关闭前一个popup.
`computeAngle( <LatLng> A,<LatLng > B )`	`Number`	以A点为原点，垂直向上（朝北）为y轴，计算y轴旋转到B点的角度.
`setShopStyle( <String> ft_sourceid,<path> style )` 注：style 参考path options 同时增加fontColor设置字体颜色	`this`	根据ft_sourceid自定义商铺显示样式.
`resetShopStyle( <String> ft_sourceid )`	`this`	根据ft_sourceid恢复商铺默认样式.
`hideShopFont( <String> ft_sourceid )`	`this`	根据ft_sourceid隐藏商铺文字.
`showShopFont( <String> ft_sourceid )`	`this`	根据ft_sourceid显示商铺文字.

Marker

地图上的标记.

Indoor.marker([50.5, 30.5]).addTo(map);

Creation

Factory	Description
`Indoor.marker( <LatLng> latlng, <Marker options> options? )`	对给定的地理点标记对象.

选项

Option	Type	Default	Description
`icon`	`Indoor.Icon`	*	标记图标.
`draggable`	`Boolean`	`false`	是否可以拖拽.
`title`	`String`	`''`	tip文本.
`alt`	`String`	`''`	alt文本.
`zIndexOffset`	`Number`	`0`	z-index 增加一个数值.
`opacity`	`Number`	`1.0`	不透明度.
`riseOnHover`	`Boolean`	`false`	鼠标移动到标记后是否往上升.

事件

通过这些方法订阅事件.

Event	Data	Description
`click`	`MouseEvent`	单击.
`dblclick`	`MouseEvent`	双击.
`mousedown`	`MouseEvent`	鼠标按下.
`mouseover`	`MouseEvent`	鼠标移动到标记.
`mouseout`	`MouseEvent`	鼠标离开标记.
`contextmenu`	`MouseEvent`	鼠标右键点击标记.
`dragstart`	`Event`	开始拖动标记.
`drag`	`Event`	标记拖动过程.
`dragend`	`DragEndEvent`	拖动结束.
`move`	`Event`	标记移动.
`add`	`Event`	添加标记到地图.
`remove`	`Event`	从地图上删除标记.

方法

Method	Returns	Description
`addTo( <Map> map )`	`this`	添加标记到地图.
`getLatLng()`	`LatLng`	获取标记的坐标.
`setLatLng( <LatLng> latlng )`	`this`	设置标记的坐标.
`setIcon( <Icon> icon )`	`this`	设置标记的图标.
`setZIndexOffset( <Number> offset )`	`this`	改变标记的z-index
`bindPopup( <String> html \| <HTMLElement> el \| <Popup> popup, <Popup options> options? )`	`this`	绑定标记信息窗体.
`unbindPopup()`	`this`	解除绑定信息窗体
`openPopup()`	`this`	打开先前绑定的信息窗体
`getPopup()`	`Popup`	返回先前由绑定的信息窗体
`closePopup()`	`this`	关闭标记
`setPopupContent( <String> html \| <HTMLElement> el )`	`this`	设置此标记的信息窗体的HTML内容.

用于在地图的某些地方打开信息窗体.

示例

如果你想只绑定一个弹出来标记一下，然后打开它:

marker.bindPopup(popupContent).openPopup();

下面是一个更复杂的方法:

var popup = Indoor.popup()
    .setLatLng(latlng)
    .setContent('<p>Hello world!<br />This is a nice popup.</p>')
    .openOn(map);

创建

Factory	Description
`Indoor.popup( <Popup options> options?, <ILayer> source? )`	实例化一个信息窗体.

Option	Type	Default	Description
`maxWidth`	`Number`	`300`	最大宽度.
`minWidth`	`Number`	`50`	最小宽度.
`maxHeight`	`Number`	`null`	最大高度，超过后内容将滚动出现
`autoPan`	`Boolean`	`true`	自动平移动画.
`closeButton`	`Boolean`	`true`	控制的关闭按钮.
`offset`	`Point`	`Point(0, 7)`	弹出位置的偏移量.
`closeOnClick`	`Boolean`	`null`	关闭单击.
`className`	`String`	`''`	信息窗体的css class.

方法

Method	Returns	Description
`addTo( <Map> map )`	`this`	添加到地图.
`openOn( <Map> map )`	`this`	关闭前一个，打开当前.
`setLatLng( <LatLng> latlng )`	`this`	设置打开位置坐标.
`getLatLng()`	`LatLng`	获取坐标位置.
`setContent( <String\|HTMLElement> htmlContent )`	`this`	设置HTML content.
`getContent()`	`<String\|HTMLElement>`	获取HTML content.
`update()`	`this`	更新位置和属性.

Path

一个抽象类，它包含选项和矢量叠加（多边形，折线，圆）之间共享的常量.

属性

Option	Type	Default	Description
`stroke`	`Boolean`	`true`	是否绘制笔划沿路径。将它设置为false ，以禁用多边形或圆形边界。
`color`	`String`	`'#03f'`	描边色。
`weight`	`Number`	`5`	笔画宽度。
`opacity`	`Number`	`0.5`	不透明度.
`fill`	`Boolean`	depends	是否使用颜色填充路径。将它设置为false禁用填充多边形上或圆。
`fillColor`	`String`	same as color	填充颜色。
`fillOpacity`	`Number`	`0.2`	填充不透明度。

事件

Event	Data	Description
`click`	`MouseEvent`	单击.
`dblclick`	`MouseEvent`	双击.
`mousedown`	`MouseEvent`	鼠标按下.
`mouseover`	`MouseEvent`	鼠标经过.
`mouseout`	`MouseEvent`	鼠标离开.
`contextmenu`	`MouseEvent`	右键.
`add`	`Event`	添加到地图后.
`remove`	`Event`	从地图删除后.

方法

Method	Returns	Description
`addTo( <Map> map )`	`this`	添加图层到地图。
`bindPopup( <String> html \| <HTMLElement> el \| <Popup> popup, <Popup options> options? )`	`this`	绑定信息窗体.
`bindPopup( <Popup> popup, <Popup options> options? )`	`this`	绑定信息窗体.
`unbindPopup()`	`this`	解除信息窗体的绑定.
`openPopup( <LatLng> latlng? )`	`this`	打开信息窗体.
`closePopup()`	`this`	关闭信息窗体.

Polyline

示例

// 创建一条折线
var polyline = Indoor.polyline(latlngs, {color: 'red'}).addTo(map);

// 调整地图视野范围
map.fitBounds(polyline.getBounds());

创建

Factory	Description
`Indoor.polyline( <LatLng[]> latlngs, <Polyline options> options? )`	通过传入LatLng数组和选项实例化折线.

选项

Option	Type	Default	Description
`noClip`	`Boolean`	`false`	是否允许裁剪.

方法

Method	Returns	Description
`addLatLng( <LatLng> latlng )`	`this`	添加折线点.
`setLatLngs( <LatLng[]> latlngs )`	`this`	设置折线点数组.
`getLatLngs()`	`LatLng[]`	返回折线点数组.

MultiPolyline

创建

Factory	Description
`Indoor.multiPolyline( <LatLng[][]> latlngs, <Polyline options> options? )`	传入多个LatLng数组来创建折线集.

方法

Method	Returns	Description
`setLatLngs( <LatLng[][]> latlngs )`	`this`	设置折线集的折线点数组.
`getLatLngs()`	`<LatLng[][]> latlngs`	获取折线集的折线点数组.
`openPopup()`	`this`	打开已经绑定的信息窗体 bindPopup.

Polygon

创建

Factory	Description
`Indoor.polygon( <LatLng[]> latlngs, <Polyline options> options? )`	传入LatLng数组创建多边形

MultiPolygon

创建

Factory	Description
`Indoor.multiPolygon( <LatLng[][]> latlngs, <Polyline options> options? )`	传入多个LatLng数组来创建多边形集.

方法

Method	Returns	Description
`setLatLngs( <LatLng[][]> latlngs )`	`this`	设置多边形集的折线点数组.
`getLatLngs()`	`<LatLng[][]> latlngs`	获取多边形集的折线点数组.
`openPopup()`	`this`	打开已经绑定的信息窗体 bindPopup.

Rectangle

示例

// 定义矩形的对角坐标
var bounds = [[54.559322, -5.767822], [56.1210604, -3.021240]];

// 添加矩形到地图,边框颜色#ff7800和边框大小1
Indoor.rectangle(bounds, {color: "#ff7800", weight: 1}).addTo(map);

//调整地图视图
map.fitBounds(bounds);

创建

Factory	Description
`Indoor.rectangle( <LatLngBounds> bounds, <Path options> options? )`	实例化一个矩形对象.

方法

Method	Returns	Description
`setBounds( <LatLngBounds> bounds )`	`this`	设置矩形范围.

Circle

Indoor.circle([50.5, 30.5], 200).addTo(map);

创建

Factory	Description
`Indoor.circle( <LatLng> latlng, <Number> radius, <Path options> options? )`	传入圆心坐标，半径，实例化一个圆形.

方法

Method	Returns	Description
`getLatLng()`	`LatLng`	获取圆心坐标.
`getRadius()`	`Number`	获取半径.
`setLatLng( <LatLng> latlng )`	`this`	设置圆形圆心所在坐标位置.
`setRadius( <Number> radius )`	`this`	设置圆形半径.

CircleMarker

创建

Factory	Description
`Indoor.circleMarker( <LatLng> latlng, <Path options> options? )`	实例一个圆形标记，默认半径为10像素

方法

Method	Returns	Description
`setLatLng( <LatLng> latlng )`	`this`	设置圆心所有位置.
`setRadius( <Number> radius )`	`this`	设置半径.

LatLng

经纬度坐标.

var latlng = Indoor.latLng(50.5, 30.5);

map.panTo([50, 30]);
map.panTo({lon: 30, lat: 50});
map.panTo({lat: 50, lng: 30});
map.panTo(Indoor.latLng(50, 30));

创建

Factory	Description
`Indoor.latLng( <Number> latitude, <Number> longitude, <Number> altitude? )`	创建经纬度坐标.

属性

Property	Type	Description
`lat`	`Number`	纬度.
`lng`	`Number`	经度.

方法

Method	Returns	Description
`distanceTo( <LatLng> otherLatlng )`	`Number`	返回两坐标点的距离
`equals( <LatLng> otherLatlng )`	`Boolean`	判断两坐标是否相等.
`toString()`	`String`	转换为字符串格式.

LatLngBounds

表示地图上的矩形的地理区域.

var southWest = Indoor.latLng(40.712, -74.227),
    northEast = Indoor.latLng(40.774, -74.125),
    bounds = Indoor.latLngBounds(southWest, northEast);

map.fitBounds([
    [40.712, -74.227],
    [40.774, -74.125]
]);

创建

Factory	Description
`Indoor.latLngBounds( <LatLng> southWest, <LatLng> northEast )`	通过西南和东北角坐标创建一个范围.
`Indoor.latLngBounds( <LatLng[]> latlngs )`	通过坐标数组创建一个范围.

方法

Method	Returns	Description
`getWest()`	`Number`	获取西经.
`getSouth()`	`Number`	获取南纬.
`getEast()`	`Number`	获取东经.
`getNorth()`	`Number`	R获取北纬.
`getCenter()`	`LatLng`	获取中心点.

Bounds

在地图上的一个矩形区域.

var p1 = Indoor.point(10, 10),
    p2 = Indoor.point(40, 60),
    bounds = Indoor.bounds(p1, p2);

创建

Factory	Description
`Indoor.bounds( <Point> topLeft, <Point> bottomRight )`	输入左上角和右下角坐标创建边界.
`Indoor.bounds( <Point[]> points )`	输入坐标点数组创建边界.

属性

Property	Type	Description
`min`	`Point`	矩形的左上角
`max`	`Point`	矩形的右下角.

方法

Method	Returns	Description
`getCenter()`	`Point`	获取中心点坐标.
`isValid()`	`Boolean`	判断是否初始化成功.
`getSize()`	`Point`	返回给定的范围的大小.

Point

表示与x和y坐标中的像素的点。

var point = Indoor.point(200, 300);

map.panBy([200, 300]);
map.panBy(Indoor.point(200, 300));

创建

Factory	Description
`Indoor.point( <Number> x, <Number> y, <Boolean> round? )`	创建一个Point对象与给定的x和y坐标，round参数

属性

Property	Type	Description
`x`	`Number`	x坐标.
`y`	`Number`	y坐标.

Icon

图标用于创建一个标注的属性.

var myIcon = Indoor.icon({
    iconUrl: 'my-icon.png',
    iconRetinaUrl: 'my-icon@2x.png',
    iconSize: [38, 95],
    iconAnchor: [22, 94],
    popupAnchor: [-3, -76],
    shadowUrl: 'my-icon-shadow.png',
    shadowRetinaUrl: 'my-icon-shadow@2x.png',
    shadowSize: [68, 95],
    shadowAnchor: [22, 94]
});

Indoor.marker([50.505, 30.57], {icon: myIcon}).addTo(map);

Indoor.Icon.Default 扩展 Indoor.Icon.

创建

Factory	Description
`Indoor.icon( <Icon options> options )`	创建一个图标.

选项

Option	Type	Description
`iconUrl`	`String`	图片的URL.
`iconRetinaUrl`	`String`	Retina视网膜屏的设备上显示的图片URL.
`iconSize`	`Point`	图标的大小.
`iconAnchor`	`Point`	此图标在地图上的锚定点相对于图标图像左上角的像素坐标.
`shadowUrl`	`String`	图标的阴影图像URL
`shadowRetinaUrl`	`String`	Retina视网膜屏的设备上显示的阴影图片URL.
`shadowSize`	`Point`	阴影图像的大小.
`shadowAnchor`	`Point`	此阴影图像在地图上的锚定点相对于阴影图像左上角的像素坐标.
`popupAnchor`	`Point`	信息窗体的锚点.
`className`	`String`	设置图标和阴影的样式名称，默认为空.

DivIcon

使用HTML的DIV元素来创建图标.

var myIcon = Indoor.divIcon({className: 'my-div-icon'});
// .my-div-icon styles 为样式名称
Indoor.marker([50.505, 30.57], {icon: myIcon}).addTo(map);

创建

Factory	Description
`Indoor.divIcon( <DivIcon options> options )`	创建图标.

选项

Option	Type	Description
`iconSize`	`Point`	图标大小，也可以通过CSS来控制.
`iconAnchor`	`Point`	图标相对了图标的左上角锚点位置.
`className`	`String`	样式名称.
`html`	`String`	自定义的HTML内容，默认值为空.

Event Method

示例

map.on('click', function(e) {
    alert(e.latlng);
});

也可以传入处理函数名:

function onClick(e) { ... }

map.on('click', onClick);
map.off('click', onClick);

方法

Method	Returns	Description
`addEventListener( <String> type, <Function> fn, <Object> context? )`	`this`	注册事件（事件类型，处理函数，传递参数） (e.g. `'click dblclick'`).
`addOneTimeEventListener( <String> type, <Function> fn, <Object> context? )`	`this`	注册只执行一次的事件.
`addEventListener( <Object> eventMap, <Object> context? )`	`this`	注册事件（事件类型，对象） e.g. `{click: onClick, mousemove: onMouseMove}`
`removeEventListener( <String> type, <Function> fn?, <Object> context? )`	`this`	清除对象事件（事件，处理程序，传递参数）.
`removeEventListener( <Object> eventMap, <Object> context? )`	`this`	清除对象事件（事件，处理程序）.
`hasEventListeners( <String> type )`	`Boolean`	判断事件是否已经注册.
`fireEvent( <String> type, <Object> data? )`	`this`	触发事件（事件类型，对象，传递参数？）.
`on( … )`	`this`	`addEventListener`的简写.
`once( … )`	`this`	`addOneTimeEventListener`的简写.
`off( … )`	`this`	`removeEventListener的简写`.
`fire( … )`	`this`	`fireEvent的简写`.

Event Object

map.on('click', function(e) {
    alert(e.latlng); // e is an event object (MouseEvent in this case)
});

Event

property	type	description
`type`	`String`	事件类型 (e.g. `'click'`).
`target`	`Object`	触发的对象.

MouseEvent

property	type	description
`latlng`	`LatLng`	鼠标事件传递地理坐标.
`layerPoint`	`Point`	鼠标事件传递图层点坐标..
`containerPoint`	`Point`	鼠标事件传递相对于地图的点坐标.
`originalEvent`	`DOMMouseEvent`	触发浏览器原始的DOM事件.

DragEndEvent

property	type	description
`distance`	`Number`	拖拽事件.

FeatureEvent

property	type	description
`ft_sourceid`	`String`	唯一id标识.
`ft_typecode`	`String`	分类id.
`ft_amap_type`	`String`	amap分类id.
`ft_name_cn`	`String`	中文名称.
`floor`	`Number`	所在楼层.
`centroid`	`Array`	中心点.[纬度,经度]

自定义渲染配色例子


    //示例 初始化地图
    var map = new Indoor.Map('container',{
        key:'开发者key',
        buildingId:'建筑物ID',
        renderColors:{
            defaultFontColor:'red', //显示文字颜色
            shopHightLightStyle:{   //点击高亮商铺样式
              'fillColor': '#fffdf8',
              'color': '#d1ccc0',
              'weight': 1,
              'fillOpacity': 1,
              'opacity': 1,
              'fontColor':'red'
            },
            shopStyle:[
            //楼层面样式
            { typeCode: 'floor', style: { 'fillColor': 'red', 'color': 'red', 'fontColor':'#d1ccc0' } },
            //商铺分类配色，根据ft_typecode的前2位
            { typeCode: '98,05', style: { 'fillColor': 'red', 'color': 'red', 'fontColor':'#d1ccc0' } },
            //中空、非开放区域配色
            { typeCode: '00', style: { 'fillColor': 'red', 'color': 'red', 'fontColor':'#d1ccc0' } },
            //根据ft_sourceid配色
            { id: '49130210100059', style: { 'fillColor': 'red', 'color': 'red', 'fontColor':'#000000' } },
            ]
      }
    });