百度地图和echarts结合实例
1.由echart对象(bmapChart)获取百度地图对象(bdMap),echart对象(bmapChart)适用于所有的echart的操作和接口,百度地图对象(bdMap)适用于百度地图的所有接口和操作
init: function () {
var cityname = "寿光市";
var bdMap;
var blist = [];
var districtLoading = 0; var bmapChart = echarts.init(document.getElementById('echarts-map-chart')); //echart 对象
var mapOption = GetOption(cityname, cityname);
bmapChart.setOption(mapOption); var ecModel = bmapChart._model;
ecModel.eachComponent('bmap', function (bmapModel) {
if (bdMap == null) {
bdMap = bmapModel.__bmap;//由echart实例获取百度地图的实例
}
});
bdMap.disableDoubleClickZoom();//禁止双击缩放
addDistrict(cityname); function convertData(name) {
var res = [];
for (var i = 0; i < bdhousedata.length; i++) { var dataItem = bdhousedata[i];
if (dataItem.value[3] == name) {
res.push(dataItem);
}
}
return res;
} function GetOption(na, city) {
var geoitemstyle = {
normal: {
areaColor: '#031525',
borderColor: '#3B5077',
},
emphasis: {
areaColor: '#00CDCD',
}
};
var opt = {
bmap: {
center: [118.82, 37.05],// 中心位置坐标
zoom: 11,
show: true,
map: na,
label: {
normal: {
show: true,
color: '#FFC125',
fontSize: 13.9,
},
emphasis: {
color: '#FFC125',
fontSize: 13.9,
show: true,
}
},
right: 300,
roam: true, },
backgroundColor: '#286895', series: [ ],
}
return opt;
} function addDistrict(districtName) {
//使用计数器来控制加载过程
districtLoading++;
var bdary = new BMap.Boundary();
bdary.get(districtName, function (rs) { //获取行政区域
var count = rs.boundaries.length; //行政区域的点有多少个
if (count === 0) {
alert('未能获取当前输入行政区域');
return;
}
for (var i = 0; i < count; i++) {
blist.push({ points: rs.boundaries[i], name: districtName });
};
//加载完成区域点后计数器-1
districtLoading--;
if (districtLoading == 0) {
//全加载完成后画端点
drawBoundary();
}
});
}
function drawBoundary() {
//包含所有区域的点数组
var pointArray = []; var pNW = { lat: 59.0, lng: 73.0 }
var pNE = { lat: 59.0, lng: 136.0 }
var pSE = { lat: 3.0, lng: 136.0 }
var pSW = { lat: 3.0, lng: 73.0 }
//向数组中添加一次闭合多边形,并将西北角再加一次作为之后画闭合区域的起点
var pArray = [];
pArray.push(pNW);
pArray.push(pSW);
pArray.push(pSE);
pArray.push(pNE);
pArray.push(pNW);
//循环添加各闭合区域
for (var i = 0; i < blist.length; i++) {
//添加多边形层并显示
var ply = new BMap.Polygon(blist[i].points, { strokeWeight: 3, strokeColor: "#EEAD0E", fillOpacity: 0.01, fillColor: " #ffffff", enableClicking: true }); //建立多边形覆盖物
ply.name = blist[i].name;
bdMap.addOverlay(ply); //将点增加到视野范围内
var path = ply.getPath();
pointArray = pointArray.concat(path);
//将闭合区域加到遮蔽层上,每次添加完后要再加一次西北角作为下次添加的起点和最后一次的终点
pArray = pArray.concat(path);
pArray.push(pArray[0]);
} //添加遮蔽层
var plyall = new BMap.Polygon(pArray, { strokeOpacity: 0.0000001, strokeColor: "#000000", strokeWeight: 0.00001, fillColor: "#05102C", fillOpacity: 1 }); //建立多边形覆盖物
bdMap.addOverlay(plyall);
} }
百度地图和echarts结合实例的更多相关文章
- 百度地图、ECharts整合HT for Web网络拓扑图应用
前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...
- 百度地图结合ECharts实现复杂覆盖物(Overlay)
先来看效果图 一 前置知识 官方Overlay-覆盖物的抽象基类 方法 返回值 描述 initialize(map: Map) HTMLElement 抽象方法,用于初始化覆盖物,当调用map.add ...
- 百度地图结合echarts并添加行政区块
作者:LJaer链接:https://www.zhihu.com/question/49251513/answer/125728764来源:知乎<!DOCTYPE html> <ht ...
- 百度地图JSSDK使用小实例
代码示例 <html> <head> <meta http-equiv="Content-Type" content="text/html; ...
- 百度地图Api进阶教程-实例高级操作8.html
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...
- ECharts+百度地图网络拓扑应用
前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...
- 【教程】高德地图使用ECharts实现数据可视化
关于百度地图结合ECharts实现数据可视化的资料已经很多了,毕竟是官方提供支持的,这里就不再赘述.今天我们来讲一下让高德地图与ECharts结合来实现数据可视化图表的展示. 一.ECharts 高德 ...
- 百度地图 JavaScript API
最近有点懒 项目结尾了 完了好长时间 没有去总结项目中的问题 想了下还是写写吧 这是一个关于百度地图的 网页展示 <!DOCTYPE html><html><head ...
- HTML5 调用百度地图API地理定位
<!DOCTYPE html> <html> <title>HTML5 HTML5 调用百度地图API地理定位实例</title> <head&g ...
随机推荐
- ng-起步
目前,无论你使用什么前端框架,都必然要使用到各种 NodeJS 工具,Angular 也不例外.与其它框架不同,Angular 从一开始就走的"全家桶"式的设计思路,因此 @ang ...
- vs2015配置cv文件,不用每次新建项目在配置
首先 选择空项目:新建完成后点击属性管理器 一定要确定你的环境是x86还是x64:我的是x64: 选择新的项目属性表 点击属性配置:配置cv的库目录.包含目录.链接器输入:可参考我前面的博文 Open ...
- Codeforces Round #613 (Div. 2) (A-E)
A略 直接求和最大的子序列即可(注意不能全部选中整个子序列) or #include<bits/stdc++.h> using namespace std; void solve(){ i ...
- appium 爬取微信的相册内容(不知什么时候能写完)
# crowl wechat through appium from appium import webdriver from selenium.webdriver.support.ui import ...
- Linux内核提权漏洞(CVE-2019-13272)
漏洞描述 kernel / ptrace.c中的ptrace_link错误地处理了想要创建ptrace关系的进程的凭据记录,这允许本地用户通过利用父子的某些方案来获取root访问权限 进程关系,父进程 ...
- 启动zabbix-server/agent报错:cannot open "/etc/zabbix/logs/zabbix_server.log": [13] Permission denied
注:该报错解决方式同样适用于zabbix-agent 启动zabbix-server报错信息如下: 2月 27 16:52:44 localhost.localdomain zabbix_server ...
- ArcMap 导入 CGCS2000 点坐标数据
最近开始用 ArcGIS 做管网项目,第一步就接触到 CGCS2000 坐标系数据,要把管网的数据给导入进来, 一开始不知道是哪个坐标系,试了半天,都偏到国外去了,最后在一篇博客里找到了类似的管网数据 ...
- PP: Soft-DTW: a differentiable loss function for time-series
Problem: new loss Label: new loss; Abstract: A differentiable learning loss; Introduction: supervise ...
- Oracle 12c 如何在 PDB 中添加 SCOTT 模式(数据泵方式)
Oracle 12c 建库后,没有 scott 模式,本篇使用数据泵方式,在12c版本之前数据库中 expdp 导出 scott 模式,并连接 12c 的 pdb 进行 impdp 导入. 目录 1. ...
- mysql空数据的处理
1.统计分析时,统计值为null则转为0 //统计婚姻接口调用次数select count ,(zsj/count) as pjdysjfrom(-- 实时调用量 评论返回时间差(取平均值)selec ...