美文网首页
echarts中使用百度地图(注意文章时间)

echarts中使用百度地图(注意文章时间)

作者: CRJ997 | 来源:发表于2019-12-02 19:42 被阅读0次

    今天项目中使用echarts结合百度地图进行图形绘制。具体操作流程可以看其他人的文章
    这里推荐一篇:Vue + Echarts + 百度地图 实践

    问题描述

    项目环境: vue

    照着上面的流程,注册了百度开发者,在index.html中引入了百度的api

    <script type="text/javascript" src="http://api.map.baidu.com/apiv=3.0&ak=你的ak"></script>
    

    装了echarts包,在图形绘制组件map中引入了bmap套件:

    import 'echarts/extension/bmap/bmap';
    

    百度地图个性化编辑这里进行地图编辑并把生成好的json文件下载,把json数据放到项目中。
    (其他配置typescript的操作就不说了)好了,本来以为大功告成,结果在个性化地图编辑那边编辑好之后,把生成的json放到echarts的bmap的mapStyle的styleJson里面的时候,发现没效果啊

    let result: any = {
          title: {
            text: '全国主要城市空气质量 - 百度地图',
            subtext: 'data from PM25.in',
            sublink: 'http://www.pm25.in',
            left: 'center'
          },
          tooltip : {
            trigger: 'item'
          },
          bmap: {
            center: [104.114129, 37.550339],
            zoom: 5,
            roam: true,
            mapStyle: {
                styleJson: styleJson // styleJson是从另一个文件引入的json数据,就是个性化编辑生成的json数据
            }
        }
    

    加进去之后全都是百度地图默认的样式,没有变化。

    解决方法

    1. 对比了一下echarts的官方例子,和我的json,发现颜色好像不对,echarts那边是6位16进制颜色值,但是我这边生成的是8位的。改了几个颜色值发现还是没用。

    2. 然后怀疑echarts的是支持旧版的百度地图个性化,因为百度地图的个性化地图这个文档有说明。

      个性化地图说明

    仔细观察了一下echarts里面的百度地图的绘制方式,发现还真是瓦片图。好的,确定是旧版无误了。

    然后去找旧版的地图编辑器:旧版地图编辑器
    编辑样式完成后,把json贴上,刷新,大功告成。

    相关文章

      网友评论

          本文标题:echarts中使用百度地图(注意文章时间)

          本文链接:https://www.haomeiwen.com/subject/wuwfgctx.html