我的位置：首页 › 一站式数据分析平台-亿信ABI › 亿信ABI-心得体验 › 自定义百度gis地图样式

自定义百度gis地图样式

复制链接 | 收藏本帖

3798

: yangqh 数据老手Lv5

发表于2020-6-7 12:05

楼主

本帖最后由 yangqh 于 2020-6-7 12:06 编辑

报表中的gis地图，默认是调用的百度gis地图，现在的报表样式非常的多样化，那么如何自定义百度gis地图样式以匹配不同的报表风格呢？
其实百度gis有开放对应的API，只需要将定义好的样式脚本在报表模板客户端脚本中引用即可，下面举个例子

Step1：获取样式Json
访问百度地图个性化编辑器：http://lbsyun.baidu.com/img-editor.html 新建自定义地图，进入详细样式编辑器，并在左侧菜单栏定义好需要的样式：

复制样式json

Step2：在报表模板客户端脚本中引用样式Json

//百度地图个性化
function setMapStyle() {
if (g_rptpage.webGisMgr && g_rptpage.webGisMgr.getWebGisInRpt("HHH148") && g_rptpage.webGisMgr.getWebGisInRpt("HHH148").webGisObj && g_rptpage.webGisMgr.getWebGisInRpt("HHH148").webGisObj.mapObj) {
var bmapObj = g_rptpage.webGisMgr.getWebGisInRpt("HHH148").webGisObj.mapObj;//HHH148是gis组件代号
var style = [{
"featureType": "building",
"elementType": "geometry",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "manmade",
"elementType": "geometry",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "subwaystation",
"elementType": "geometry",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "education",
"elementType": "geometry",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "medical",
"elementType": "geometry",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "scenicspots",
"elementType": "geometry",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "entertainment",
"elementType": "geometry",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "estate",
"elementType": "geometry",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "shopping",
"elementType": "geometry",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "transportation",
"elementType": "geometry",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "playground",
"elementType": "geometry",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "parkinglot",
"elementType": "geometry",
"stylers": {
"visibility": "off"
}
}, {
"featureType": "background",
"elementType": "geometry",
"stylers": {
"color": "#08305fff"
}
}, {
"featureType": "land",
"elementType": "geometry",
"stylers": {
"color": "#083161ff"
}
}, {
"featureType": "water",
"elementType": "geometry",
"stylers": {
"color": "#4a90e2ff"
}
}, {
"featureType": "road",
"elementType": "geometry.fill",
"stylers": {
"color": "#68610cff"
}
}, {
"featureType": "road",
"elementType": "labels.text.fill",
"stylers": {
"weight": 60
}
}];
bmapObj.setMapStyle({
styleJson: style
});
} else {
setTimeout(setMapStyle, 50);
}
}
setMapStyle();