转载来源：https://efe.baidu.com/blog/echarts-map-tutorial-2/

ECharts 实现地图散点图（下）

 小红  2016-06-13  ECharts, 教程, 地图

上一篇我们介绍了如何使用 ehcarts 内置地图实现地图上绘制的散点图，这篇中，我们将讲解如何在百度地图上绘制散点图。

一、初始准备

首先要创建 html 和引入 ECharts 包，具体说明详见上篇：[ECharts 实现地图散点图（一）](/2016/04/28/echarts-map-tutorial.html)。

二、引入echarts百度地图扩展包

在 github 上下载 ECharts 扩展 bmap.js，放在 /extension/ 目录下，并引入 html 中：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ECharts map Demo</title>
</head>
<body>
	<div id="map-wrap" style="height: 500px;">
		<!-- 这里以后是地图 -->
	</div>
</body>
<script src="/dep/echarts.min.js"></script>

<script src="/extension/bmap.js"></script>

</html>

三、绘制地图

1.在 js 中，新建 ECharts 示例，并为其设置配置项 option：

var bmapChart = echarts.init(document.getElementById('map-wrap'));

var option = {
	// 这里是 ECharts 的配置项，接下来会说明
}

bmapChart.setOption(option);

2.添加百度地图：

在 option 中添加 bmap 相关设置：

var option = {
	bmap: {
      	center: [116.307698, 40.056975], // 中心位置坐标
      	zoom: 5, // 地图缩放比例
      	roam: true // 开启用户缩放
  	}

}

ECharts 将百度地图部分配置集成在了 bmap 中，包括：

参数 说明 格式
center 中心点的百度坐标 坐标数组, 如：[116.307698, 40.056975]
zoom 初始缩放比 number
roam 是否允许用户缩放操作 boolean
mapStyle 地图自定义样式 object, 如：{ styleJson: [...] }

这样百度地图就加载到页面中了，这里显示百度地图的默认样式，稍后第四部分将为百度地图添加自定义样式的配置：

百度地图1

四、绘制散点图

绘制散点图的方法与上篇中绘制散点图方法相同，需要修改的部分是，将散点图的坐标系 coordinateSystem 改成使用 bmap

var myData = [

	{name: '海门', value: [121.15, 31.89, 90]},
  	{name: '鄂尔多斯', value: [109.781327, 39.608266, 120]},
  	{name: '招远', value: [120.38, 37.35, 142]},
    {name: '舟山', value: [122.207216, 29.985295, 123]},
  	...
]

var option = {
	bmap: {
      	...
  	},
  	visualMap: {	// 视觉映射组件
		type: 'continuous',
		min: 0,
		max: 200,
		calculable: true,
		inRange: {
             	color: ['#50a3ba','#eac736','#d94e5d']
          },
		textStyle: {
			color: '#fff'
		}
     	}
	series: [
		{
			name: '销量',
			type: 'scatter',

			coordinateSystem: 'bmap', // 坐标系使用bmap

			data: myData
		}
	]
}

绘制散点后的百度地图：

百度地图2

四、 自定义百度地图样式

地图的样式配置 bmap.mapStyle 中 styleJson 与百度地图内置的样式配置一致，具体参考百度地图API开发指南中 定制个性地图章节的介绍。

这里我们设置一个较暗色调的地图,如下：

var option = {
		bmap: {
      		center: [116.307698, 40.056975],
         		zoom: 5,

     	    	roam: true, // 允许缩放

     	    	mapStyle: {  // 百度地图自定义样式
     	    		styleJson: [
     	    			// 陆地
                 		{
						"featureType": "land",
                          "elementType": "all",
                          "stylers": {
                              "color": "#073763"
                          }
                      },
                      // 水系
                      {
                          "featureType": "water",
                          "elementType": "all",
                          "stylers": {
                              "color": "#073763",
                              "lightness": -54
                          }
                      },
                      // 国道与高速
                      {
                          "featureType": "highway",
                          "elementType": "all",
                          "stylers": {
                              "color": "#45818e"
                          }
                      },
                      // 边界线
                      {
                          "featureType": "boundary",
                          "elementType": "all",
                          "stylers": {
                              "color": "#ffffff",
                              "lightness": -62,
                              "visibility": "on"
                          }
                      },
                      // 行政标注
                      {
                          "featureType": "label",
                          "elementType": "labels.text.fill",
                          "stylers": {
                              "color": "#ffffff",
                              "visibility": "on"
                          }
                      },
                      {
                          "featureType": "label",
                          "elementType": "labels.text.stroke",
                          "stylers": {
                              "color": "#444444",
                              "visibility": "on"
                          }
                      }
     	    		]
     	    	}
  		},
  		...
	}

实现效果如下图：

百度地图3

除了上述四个配置，其他地图设置都可以通过 百度地图提供的API 实现

获取百度地图实例的方法如下：

var bmap = bmapCharts.getModel().getComponent('bmap').getBMap(); // 百度地图实例

例如，我们可以为地图添加一个缩放控件和一个比例尺：

bmap.addControl(new BMap.NavigationControl()); // 缩放控件
bmap.addControl(new BMap.ScaleControl()); // 比例尺

百度地图4

ECharts 散点图+百度地图（案例转载）的更多相关文章

  1. 几个不错的echarts +百度地图 案例

    https://echarts.baidu.com/examples/editor.html?c=map-polygon https://echarts.baidu.com/examples/edit ...

  2. GJM：Unity导入百度地图SDK [转载]

    感谢您的阅读.喜欢的.有用的就请大哥大嫂们高抬贵手"推荐一下"吧!你的精神支持是博主强大的写作动力以及转载收藏动力.欢迎转载! 版权声明:本文原创发表于 [请点击连接前往] ,未经 ...

  3. echarts 与 百度地图bmap结合系列： 如何设置地图缩放级别和监听缩放事件

    简单的demo: // ehcarts 的实例对象 this.myChart = echarts.init(el) // ehcarts加载完成事件 this.myChart.on('finished ...

  4. react项目结合echarts,百度地图实现热力图

    一.最近在一个react项目(antd pro)中需要展示一个热力地图.需求是: 1.热力地图可缩放: 2.鼠标点击可以展示该点地理坐标,及热力值. 3.初始化时候自适应展示所有的热力点. 4.展示热 ...

  5. Mono For Android中完美使用百度地图SDK（v2.1.2&v2.1.3）(转)

    在Xamarin Mono For Android的开发中,如果要使用第三方的jar,就必须进行绑定.通过创建Java Bindings Library项目来自动生成C#到java的代码映射代码,最终 ...

  6. Echarts3.0 引入百度地图(转载)

    转载来源: https://blog.csdn.net/yc_1993/article/details/52431989 Echarts3.0引入百度地图 update: 由于目前echarts3.8 ...

  7. Echarts+百度地图

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 百度地图、ECharts整合HT for Web网络拓扑图应用

    前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...

  9. 百度地图结合echarts并添加行政区块

    作者:LJaer链接:https://www.zhihu.com/question/49251513/answer/125728764来源:知乎<!DOCTYPE html> <ht ...

随机推荐

  1. ios label根据内容自适应高度

    label自适应高度,想必大家也都很熟悉怎么去做,上代码: UILabel *label3 = [[UILabel alloc]initWithFrame:CGRectMake(150, 50, 15 ...

  2. Bladex使用代码生成器操作步骤

    一.从私服上下载BladeX和Saber 二.运行BladeX所有服务 三.运行Saber 四.数据库创建自己需要使用的表(建议表名和字段名为:bldex_xxxx,xxx_xxxx,不要使用驼峰命名 ...

  3. 【计算机视觉】PASCAL VOC数据集分析

    PASCAL VOC数据集分析 PASCAL VOC为图像识别和分类提供了一整套标准化的优秀的数据集,从2005年到2012年每年都会举行一场图像识别challenge. 本文主要分析PASCAL V ...

  4. Navicat工具链接 mysql"Access denied for user'root'@'IP'" 用户远程赋值

    如题 用Navicat远程连接数据库出现错误   给用户添加权限 连接MySQL mysql -uroot -p: use mysql; 更改权限 使用grant all privileges on来 ...

  5. 生信-使用NCBI进行目的基因的引物设计

    使用NCBI进行目的基因的引物设计 全文概述 利用生信工具进行目的基因的引物设计,使用了NCBI进行筛选与设计引物,使用 idtdna对筛选出的DNA进行检查.本文分享了如何筛选出高质量的基因引物,帮 ...

  6. Apache Kafka Consumer 消费者集

    1.目标 在我们的上一篇文章中,我们讨论了Kafka Producer.今天,我们将讨论Kafka Consumer.首先,我们将看到什么是Kafka Consumer和Kafka Consumer的 ...

  7. Java基础笔试练习（九）

    1.下面所示的java代码,运行时,会产生()类型的异常 ? int Arry_a[] = new int[10]; System.out.println(Arry_a[10]); A.Arithme ...

  8. Ant Design Vue select下拉列表设置默认值

    在项目中需要为Ant Design Vue 的 select 组件设置一个默认值,如下图所示的状态下拉选择框,默认选择全部 代码如下: <a-select v-model="query ...

  9. Python--代码1（接口测试：测试用例从数据库读取写到yaml文件中）

    一. 从数据库中读取全部接口,并写入yaml文件 数据库中的数据存储格式如下图: import pymysql import os import json # from ruamel import y ...

  10. PAT(B) 1070 结绳（Java）

    题目链接:1070 结绳 (25 point(s)) 题目描述 给定一段一段的绳子,你需要把它们串成一条绳.每次串连的时候,是把两段绳子对折,再如下图所示套接在一起.这样得到的绳子又被当成是另一段绳子 ...