可视化篇：Echarts2.0引入百度地图

最新推荐文章于 2024-06-17 18:02:18 发布

杨铖

最新推荐文章于 2024-06-17 18:02:18 发布

阅读量3.7w

点赞数 28

分类专栏：可视化文章标签：可视化 echarts 百度地图

本文链接：https://blog.csdn.net/yc_1993/article/details/51367575

版权

写在最前
Echarts作为百度团队下一个可视化的js库，自2.0更新至3.0以来，其带来的视觉冲击更加强悍，数据可视更加精美，图形交互更加贴合用户。
由于echarts2在百度地图的实例上没有作过多的说明，echarts3更是删除了该实例，另外由于工作需要，捣鼓一番，作个笔记。

下面针对的是echarts2.2.7，其源码下载地址为：http://echarts.baidu.com/build/echarts-2.2.7.zip

百度API调用及echart库引入

1. 百度API ak申请：

http://lbsyun.baidu.com/apiconsole/key?application=key
api申请
为引入百度地图，需要申请自己的密钥，该密钥作为后面的src引入。

2. 申请认证企业信息：

http://lbsyun.baidu.com/apiconsole/auth ，配额增加申请。

当然，如果个人用户，没必要增加配额，一般不会超限制数。

3. 下载相关javaScript库：

jquery.min.js，require.js，echarts.js，这里我都已下载好，JQ用的是jQuery v1.10.2，require用的是RequireJS 2.2.0，echart用的是echarts-2.2.7，引入如下：
这里写图片描述
其中第二个 script 标签里对应的需换成申请的ak，example2.js对应为echart效果。

4. 百度地图额外依赖库main.js

main
这里模块化的引入对应文件夹下echarts文件，main.js存放于下载的echarts源码中的extension\BMap\src路径下，同时需引入其他echarts2的图形控件，在build\dist\chart路径，在该路径下对应有：

需要时再引入即可，若无需其他可视化扩展，可删除除map.js外的其他js文件。

5. 为实例化百度地图背景构建一个容器：

实例化

Margin设为0则与浏览器无边界融合，div属性容器id，后面js脚本里需要用到该属性，并将echart填充到该容器里，当然，div可以有多个，故可以填充多个echart实例。实例化后再js脚本里调用echart api即可：

调用API

上图中的方法都封装在main.js中，使用的时候按上图调用即可，其中css样式对应之前的容器大小，BMapExt为初始化的地图对象，具体可看main.js源码，中间getMap,getEchartsContainer为获取地图实例及echart实例对象，BMap.Point是定义当前打开地图的中心点，最下面两个函数则定义了地图的缩放等级及是否可以滚动缩放。

6. 引入的文档结构：

7. 测试代码–首页

<html>
    <head>
        <meta charset="utf-8">
        <style type="text/css">
            body {
                margin: 0;
            }
            #main {
                height: 100%;
            }
        </style>
    </head>
    <body>
        <div id="main"></div>
        <script src="./echarts/echarts.js"></script>
        <script type="text/javascript"   src="http://api.map.baidu.com/api?v=2.0&ak=53oVIOgmSIejwV7EfphPgTynOZbIiVYu"></script>
        <script src="./js/jquery.min.js"></script>
        <script src="./js/require.js"></script>
        <script src="./js/example2.js"></script>
    </body>
</html>

8. 测试代码–echarts+百度地图样式：

(function () {
    require.config({
        paths: { echarts: "echarts", },
    });

    require(
    [
        "echarts",
        "echarts/chart/main",
        "echarts/chart/map"
    ],
    function (echarts, BMapExtension) {
        $('#main').css({ height:$('body').height(), width: $('body').width() });

        // 初始化地图
        var BMapExt = new BMapExtension($('#main')[0], BMap, echarts,{ enableMapClick: false });
        var map = BMapExt.getMap();
        var container = BMapExt.getEchartsContainer();

        var startPoint = { x: 113.328755, //天河城 y: 23.137588 };

        var point = new BMap.Point(startPoint.x, startPoint.y);
        map.centerAndZoom(point, 17);
        map.enableScrollWheelZoom(true);
        // 地图自定义样式
        map.setMapStyle({ styleJson: [ { 'featureType': 'land', //调整土地颜色 'elementType': 'geometry', 'stylers': { 'color': '#081734' } }, { 'featureType': 'building', //调整建筑物颜色 'elementType': 'geometry', 'stylers': { 'color': '#04406F' } }, { 'featureType': 'building', //调整建筑物标签是否可视 'elementType': 'labels', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'highway', //调整高速道路颜色 'elementType': 'geometry', 'stylers': { 'color': '#015B99' } }, { 'featureType': 'highway', //调整高速名字是否可视 'elementType': 'labels', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'arterial', //调整一些干道颜色 'elementType': 'geometry', 'stylers': { 'color':'#003051' } }, { 'featureType': 'arterial', 'elementType': 'labels', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'green', 'elementType': 'geometry', 'stylers': { 'visibility': 'off' } }, { 'featureType': 'water', 'elementType': 'geometry', 'stylers': { 'color': '#044161' } }, { 'featureType': 'subway', //调整地铁颜色 'elementType': 'geometry.stroke', 'stylers': { 'color': '#003051' } }, { 'featureType': 'subway', 'elementType': 'labels',

最低0.47元/天解锁文章

杨铖

关注

28
点赞
踩
55

收藏

觉得还不错? 一键收藏
198
评论
可视化篇：Echarts2.0引入百度地图

写在最前 Echarts作为百度团队下一个可视化的js库，自2.0更新至3.0以来，其带来的视觉冲击更加强悍，数据可视更加精美，图形交互更加贴合用户。由于echarts2在百度地图的实例上没有作过多的说明，echarts3更是删除了该实例，另外由于工作需要，捣鼓一番，作个笔记。
复制链接

扫一扫

专栏目录