GIS百度地图个性化配色

349
9

jing 初学数据Lv2

发表于2020-4-28 14:27

楼主
亿信BI中的GIS百度地图目前显示的是百度地图的默认配色,如下图所示:
1.png

有些用户希望能自定义配色,使GIS地图的色调与报表的配色相统一,尤其是深色系的报表页面,如下图就是使用了脚本进行了自定义个性化配色:
2.png

整个页面的配色是不是高级了很多?搬好小板凳快来围观如何做到自定义个性化配色吧~

第一步:进入脚本编辑界面“报表-高级-脚本”
3.png


第二步:复制粘贴如下脚本
  1. //百度地图个性化
  2. function setMapStyle() {
  3.         if (g_rptpage.webGisMgr && g_rptpage.webGisMgr.getWebGisInRpt("HHH148") && g_rptpage.webGisMgr.getWebGisInRpt("HHH148").webGisObj && g_rptpage.webGisMgr.getWebGisInRpt("HHH148").webGisObj.mapObj) {
  4.                 var bmapObj = g_rptpage.webGisMgr.getWebGisInRpt("HHH148").webGisObj.mapObj;
  5.                 var style = [{
  6.                                 "featureType": "water",
  7.                                 "elementType": "all",
  8.                                 "stylers": {
  9.                                         "color": "#252741"
  10.                                 }//水系颜色
  11.                         }, {
  12.                                 "featureType": "highway",
  13.                                 "elementType": "geometry.fill",
  14.                                 "stylers": {
  15.                                         "color": "#333558"
  16.                                 }//高速填充颜色
  17.                         }, {
  18.                                 "featureType": "highway",
  19.                                 "elementType": "geometry.stroke",
  20.                                 "stylers": {
  21.                                         "color": "#216dc2"
  22.                                 }//高速线条颜色
  23.                         }, {
  24.                                 "featureType": "arterial",
  25.                                 "elementType": "geometry.fill",
  26.                                 "stylers": {
  27.                                         "color": "#216dc2"
  28.                                 }//干线道路填充颜色
  29.                         }, {
  30.                                 "featureType": "arterial",
  31.                                 "elementType": "geometry.stroke",
  32.                                 "stylers": {
  33.                                         "color": "#216dc2"
  34.                                 }//干线道路线条颜色
  35.                         }, {
  36.                                 "featureType": "local",
  37.                                 "elementType": "geometry",
  38.                                 "stylers": {
  39.                                         "color": "#216dc2"
  40.                                 }
  41.                         }, {
  42.                                 "featureType": "land",
  43.                                 "elementType": "all",
  44.                                 "stylers": {
  45.                                         "color": "#535691"
  46.                                 }//陆地颜色
  47.                         }, {
  48.                                 "featureType": "railway",
  49.                                 "elementType": "geometry.fill",
  50.                                 "stylers": {
  51.                                         "color": "#216dc2"
  52.                                 }//铁路填充颜色
  53.                         }, {
  54.                                 "featureType": "railway",
  55.                                 "elementType": "geometry.stroke",
  56.                                 "stylers": {
  57.                                         "color": "#216dc2"
  58.                                 }//铁路线条颜色
  59.                         }, {
  60.                                 "featureType": "subway",
  61.                                 "elementType": "geometry",
  62.                                 "stylers": {
  63.                                         "lightness": -70
  64.                                 }//地铁颜色
  65.                         }, {
  66.                                 "featureType": "building",
  67.                                 "elementType": "geometry.fill",
  68.                                 "stylers": {
  69.                                         "color": "#000000"
  70.                                 }//建筑颜色
  71.                         }, {
  72.                                 "featureType": "all",
  73.                                 "elementType": "labels.text.fill",
  74.                                 "stylers": {
  75.                                         "color": "#dde2ff"
  76.                                 }//文字填充颜色
  77.                         }, {
  78.                                 "featureType": "all",
  79.                                 "elementType": "labels.text.stroke",
  80.                                 "stylers": {
  81.                                         "color": "#252741"
  82.                                 }文字边线颜色
  83.                         }, {
  84.                                 "featureType": "building",
  85.                                 "elementType": "geometry",
  86.                                 "stylers": {
  87.                                         "color": "#022338"
  88.                                 }
  89.                         }, {
  90.                                 "featureType": "green",
  91.                                 "elementType": "geometry",
  92.                                 "stylers": {
  93.                                         "color": "#062032"
  94.                                 }//绿地颜色
  95.                         }, {
  96.                                 "featureType": "boundary",
  97.                                 "elementType": "all",
  98.                                 "stylers": {
  99.                                         "color": "#3c98ff"
  100.                                 }//边界线颜色
  101.                         }, {
  102.                                 "featureType": "manmade",
  103.                                 "elementType": "geometry",
  104.                                 "stylers": {
  105.                                         "color": "#022338"
  106.                                 }//人造区域颜色
  107.                         }, {
  108.                                 "featureType": "poi",
  109.                                 "elementType": "all",
  110.                                 "stylers": {
  111.                                         "visibility": "off"
  112.                                 }//景点颜色
  113.                         }, {
  114.                                 "featureType": "all",
  115.                                 "elementType": "labels.icon",
  116.                                 "stylers": {
  117.                                         "visibility": "off"
  118.                                 }
  119.                         }, {
  120.                                 "featureType": "all",
  121.                                 "elementType": "labels.text.fill",
  122.                                 "stylers": {
  123.                                         "color": "#dde2ff",
  124.                                         "visibility": "on"
  125.                                 }
  126.                         }
  127.                 ];

  128.                 bmapObj.setMapStyle({
  129.                         styleJson: style
  130.                 });
  131.         } else {
  132.                 setTimeout(setMapStyle, 50);
  133.         }
  134. }

  135. setMapStyle();
复制代码


第三步:修改脚本中对应的颜色色值,以及脚本中的“HHH148”为GIS统计图组件的代码,需按实际情况进行调整。

三步搞定GIS百度地图的配色,不要再抱怨默认配色和报表样式格格不入了,快来试试吧。

最后,悄悄地告诉你一个秘密:百度搜索“百度地图个性在线编辑器”,会有意外收获喔!


最近看过此主题的会员

xxxl

1505121235

17701087653

13604087039

本主题由辰哥于2020-5-6 09:12添加图章 精华

9个回答

只看楼主

程序小哥哥 数据达人Lv4

发表于2020-4-28 14:29

只看该作者

取消 关注该作者的回复

沙发

感谢大神分享,学习到很多呀~

缱绻 数据领袖Lv6

发表于2020-4-29 17:37

只看该作者

取消 关注该作者的回复

板凳

辰哥 管理员

发表于2020-5-6 09:12

只看该作者

取消 关注该作者的回复

地板

非常棒的分享,辰哥学习了~

小由菜 数据达人Lv4

发表于2020-5-11 10:31

只看该作者

取消 关注该作者的回复

5#

为啥我按照例子复制粘贴报错额:Uncaught SyntaxError: Unexpected identifier

jing 初学数据Lv2

发表于2020-5-11 10:39

只看该作者

取消 关注该作者的回复

6#

小由菜 发表于 2020-5-11 10:31
为啥我按照例子复制粘贴报错额:Uncaught SyntaxError: Unexpected identifier

你用的哪个版本的亿信BI呢?

小由菜 数据达人Lv4

发表于2020-5-11 10:57

只看该作者

取消 关注该作者的回复

7#

jing 发表于 2020-5-11 10:39
你用的哪个版本的亿信BI呢?

4.7啊

jing 初学数据Lv2

发表于2020-5-11 11:59

只看该作者

取消 关注该作者的回复

8#


脚本中的gis地图组件的代码有修改吗?

小由菜 数据达人Lv4

发表于2020-5-11 12:12

只看该作者

取消 关注该作者的回复

9#

jing 发表于 2020-5-11 11:59
脚本中的gis地图组件的代码有修改吗?

改了,是对应我拖的地图组件的HHH的~

而安 小试身手Lv3

发表于2020-7-30 10:32

只看该作者

取消 关注该作者的回复

10#

完全按照上面操作来的   但是提示:  缺少 '}'

登录后可回答问题,请登录注册

快速回复 返回顶部 返回列表

小时

全天响应

分钟

快速处理问题

工程师强势助力

明星产品
解决方案
联系合作

渠道咨询电话:137-0120-6790

技术支持QQ:400-0011-866(工作日9:00-18:00)

产品建议邮箱yixin@esensoft.com

关注我们

扫TA学习更多干货

进群交流、一对一指导

©2020ESENSOFT北京亿信华辰软件有限责任公司版权所有:京ICP备07017321号京公网安备11010802016281号