# 对象表格JS插件
# 控制表格流程
该类需求需要通过以下API来实现:
# beforeMapViewRenderMap()
参数:
context: Object
:字段的上下文环境options: Object
:获取地图容器options.container
: 地图绘制占位,容器
返回:
无返回,该方法拦截原有的地图,重新绘制地图
用法:
beforeMapViewRenderMap发生在地图绘制之前,拦截原有的地图绘制
export default {
beforeMapViewRenderMap(context, options) {
FxUI.libs.require('map').then(map => {
map.create({
center: {lng: 116.33202, lat: 39.9771},
consume: {apiName: 'AccountAddrObj', bizKey: 'list_map', bizSource: 'udobj', consumeCount: 1, moduleKey: "google_map_app", paraKey: "google_map_call_limit"},
container: options.container,
fullscreen: true,
isFromSwitch: false,
scaleControl: true,
zoom: 3,
zoomControl: true,
zooms: [1, 20]
}).then((res) => {
ownerMap = this.map = res;
this.beforeMapViewAddMaker(context, this.dataList);
});
});
}
}
# beforeMapViewAddMaker()
参数:
context: Object
:字段的上下文环境list: Array
:列表页面数据list[i].location
: 定位字段
返回:
无返回,该方法拦截原有的地图实例生成marker标记,在地图实例上显示聚合点
用法:
beforeMapViewAddMaker发生在地图绘制之后,地图实例上生成marker标记之前
setMarkerCluster具体传参参照地图国际化接口文档 (https://wiki.firstshare.cn/pages/viewpage.action?pageId=172156028 (opens new window))
export default {
beforeMapViewAddMaker(context, list){
if (this.map && list) {
var infoItem = _.findWhere(context.viewInfo, {name: 'map_view'})
var columns = []
_.each(infoItem.fields, function(a) {context.fields[a] && columns.push(context.fields[a])})
this.map.newMap.setMarkerCluster(list.filter(item => {!!item.location}).map((item,index) => {
const pos = item.location.split('#%$');
var contents = _.map(columns, function(aa) {
return {
title: aa.label,
content: item[aa.api_name] || '--'
}
})
return {
color: '#68a4ff',
lngLat: pos,
contents: contents
}
}),{onClick: this._onShowInfo});
this.dataList = list;
}else {
this.dataList = list;
}
}
}
# beforeMapViewCreate()
参数:
context: Object
:字段的上下文环境params: Object
:要解析的参数params.queryParam
: 列表页请求接口的传参params.queryParam.search_query_info
: Json字符串形式的参数,其中包含数据条数限制、起始数据index
返回:
该方法返回列表页面请求接口传参参数
用法:
beforeMapViewCreate页面渲染之前,改变页面接口传参的参数,如地图列表的数据上限等
export default {
beforeMapViewCreate(context,params) {
var r = JSON.parse(params.queryParam.search_query_info);
r.limit = 2000;
params.queryParam.search_query_info = JSON.stringify(r);
return Promise.resolve(params);
},
}
# beforeMapViewFetch()
参数:
context: Object
:字段的上下文环境params: Object
:地图列表请求接口传参参数,参数结构同上
返回:
该方法返回列表页面请求接口传参参数
用法:
beforeMapViewFetch发生在地图列表请求之前,改变接口传参参数
export default {
beforeMapViewFetch(context,params) {
var r = JSON.parse(params.search_query_info);
r.limit = 2000;
params.search_query_info = JSON.stringify(r);
return Promise.resolve(params);
},
}
# beforeMapViewDestroy()
参数:
context: Object
:字段的上下文环境
返回:
无返回,地图销毁前销毁绘制的新地图
用法:
beforeMapViewDestroy发生在地图销毁前
export default {
beforeMapViewDestroy(context) {
ownerMap = null;
this.map = null;
}
}
# getIconIndex()
参数:
context: Object
:字段的上下文环境index: Number
:地图列表水滴的序列号,自定义序列号
返回:
无返回
用法:
getIconIndex发生在地图列表水滴标序列号生成之前,改变原有递增的顺序为自定义
export default {
getIconIndex(context,index){
index = '';
return Promise.resolve(index);
},
}
例子: 通过beforeMapViewRenderMap方法绘制地图
export default {
beforeMapViewRenderMap(context, options) {
FxUI.libs.require('map').then(map => {
map.create({
center: {lng: 116.33202, lat: 39.9771},
consume: {apiName: 'AccountAddrObj', bizKey: 'list_map', bizSource: 'udobj', consumeCount: 1, moduleKey: "google_map_app", paraKey: "google_map_call_limit"},
container: options.container,
fullscreen: true,
isFromSwitch: false,
scaleControl: true,
zoom: 3,
zoomControl: true,
zooms: [1, 20],
mapSwitchedFn: ({originMap})=>{
console.log('切换地图', arguments)
originMap.setZoom(3)
this.beforeMapViewAddMaker(context, this.dataList);
}
}).then((res) => {
this.beforeMapViewAddMaker(context, this.dataList);
});
});
},
}
← 关联对象列表页JS插件 如何调试自定义插件 →