echarts 百度地图,城市区域场景标识参数意义配置分析

有不足或者错误的请大佬指出,仅仅个人的分析结果。

由于颜色貌似用16进制才能使用或者识别,先来个进制的颜色参照表吧,颜色可以直接在这个网页上ctrl+f查找

颜色对照表http://www.fsskqyy.com/control/inpx/color.htmicon-default.png?t=M85Bhttp://www.fsskqyy.com/control/inpx/color.htm

echartsExamples - Apache EChartsECharts, a powerful, interactive charting and visualization library for browserhttps://echarts.apache.org/examples/zh/editor.html?c=lines-bmap

直接在echarts上测试的,大家可以查看每个地图对象都代表了例如火车道,建筑物等

$.get(ROOT_PATH + '/data/asset/data/hangzhou-tracks.json', function (data) {
  const lines = data.map(function (track) {
    return {
      coords: track.map(function (seg, idx) {
        return seg.coord;
      })
    };
  });
  myChart.setOption(
    (option  = {
    bmap     : {
    center   : [119.28, 26.08],//以福州市为例
    zoom     : 14,
    roam     : true,
    mapStyle : {
    styleJson: [
            {
              featureType: 'water',//水,河流颜色
              elementType: 'all',
              stylers: {
                color: '#0066FF'
              }
            },
            {
              featureType: 'land',//陆地土地 颜色
              elementType: 'all',
              stylers: {
                color: '#993300'
              }
            },
            {
              featureType: 'railway', //铁路
              elementType: 'all',
              stylers: {
                //visibility: 'off'
                 color: '#FFFFFF'//铁路颜色
              }
            },
            {
              featureType: 'highway',//高速公路 颜色
              elementType: 'all',
              stylers: {
                color: '#FFFF00'//高速公路 颜色
              }
            },
            {
              featureType: 'highway',   //高速公路名字
              elementType: 'labels',
              stylers: {
                //visibility: 'off'
                 color: '#CC66FF'     //高速公路名字颜色
              }
            },
            {
              featureType: 'arterial',  //区域主干道边框
              elementType: 'geometry',
              stylers: {
                color: '#66FFFF'   //区域主干道边框颜色
              }
            },
            {
              featureType: 'arterial',
              elementType: 'geometry.fill',
              stylers: {
                color: '#66FFFF'//区域主干支流道颜色,或者说交汇道颜色
              }
            },
            {
              featureType: 'poi',
              elementType: 'all',
              stylers: {
                visibility: 'on'  //是否显示桥名,路名,地点名字,包括学校医院
              
              }
            },
            {
              featureType: 'green',  //这个可能是绿化带,不太清楚
              elementType: 'all',
              stylers: {
                visibility: 'off'
            
              }
            },
            {
              featureType: 'subway',
              elementType: 'all',
              stylers: {
                color: '#333366'  //地铁线路颜色
              }
            },
            {
              featureType: 'manmade',  //建筑物区域颜色
              elementType: 'all',
              stylers: {
                color: '#33FFCC'
              }
            },
            {
              featureType: 'local',//汽车通道颜色,例如进入某个小区或者某个停车场的汽车通道,或者加油站的汽车道
              elementType: 'all',
              stylers: {
                color: 'black'
              }
            },
            {
              featureType: 'arterial',  //区域主干道名字颜色
              elementType: 'labels',
              stylers: {
                // visibility: 'off'
                color: '#CCCC00'
              }
            },
            {
              featureType: 'boundary',//城镇区域的分割线,一般会出现在主干道上
              elementType: 'all',
              stylers: {
                color: '#FFFFFF'
              }
            },
            {
              featureType: 'building',//建筑物颜色
              elementType: 'all',
              stylers: {
                color: '#66FFFF'
              }
            },
            {
              featureType: 'label',
              elementType: 'labels.text.fill',
              stylers: {
                color: 'red'  //反正就是一些比较小的区域,比如什么什么村的,不怎么知名的小地方吧
              }
            }
          ]
        }
      },
      series: [
        {
          type: 'lines',
          coordinateSystem: 'bmap',
          data: lines,
          polyline: true,
          lineStyle: {
            color: 'purple',
            opacity: 0.6,
            width: 1
          }
        }
      ]
    })
  );
});

这两个可能比较抽象

 

 

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
ECharts是百度开源的一个基于JavaScript的可视化库,它支持多种图表类型,包括折线图、柱状图、散点图和饼图等。而且,ECharts还可以和百度地图进行结合,实现地理信息数据的可视化展示。 下面我来简单介绍一下如何使用ECharts实现百度地图的可视化。 首先,我们需要引入ECharts百度地图的API文件。在HTML文件中加入以下代码: ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>ECharts 百度地图扩展</title> <script src="https://cdn.staticfile.org/echarts/4.7.0/echarts.min.js"></script> <script src="http://api.map.baidu.com/api?v=2.0&ak=您的密钥"></script> </head> <body> <div id="map" style="width: 800px; height: 600px;"></div> </body> </html> ``` 其中,ECharts的文件引入使用了CDN,而百度地图的API文件需要自己去申请密钥并替换到代码中。 接着,在JavaScript中初始化地图,并将其与ECharts进行结合。以下是示例代码: ```javascript var chart = echarts.init(document.getElementById('map')); // 设置地图的配置项和数据 var option = { bmap: { center: [116.46, 39.92], zoom: 10, roam: true }, series: [{ type: 'scatter', coordinateSystem: 'bmap', data: [ [116.46, 39.92], [116.56, 39.92], [116.66, 39.92], [116.76, 39.92], [116.86, 39.92] ], symbolSize: 20, label: { show: true, formatter: function(params) { return params.value[0] + ', ' + params.value[1]; }, position: 'top' }, itemStyle: { color: 'purple' } }] }; // 使用刚指定的配置项和数据显示图表。 chart.setOption(option); ``` 以上代码中,我们定义了一个散点图系列,数据坐标系为百度地图,并设置了散点图的位置、大小、标签和颜色等属性。 最后,我们需要在页面加载完成后触发ECharts图表的渲染。以下是示例代码: ```javascript // 基于准备好的dom,初始化echarts实例 var chart = echarts.init(document.getElementById('map')); // 使用刚指定的配置项和数据显示图表。 chart.setOption(option); // 地图自适应 window.onresize = function() { chart.resize(); }; ``` 上述代码中,我们使用了`window.onresize`事件来自适应地图的大小变化。 以上就是使用ECharts进行百度地图可视化的简单介绍。希望对你有所帮助!

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值