用echarts在百度地图bmap自定义形状

创建html文件
引入百度地图API、Echarts、以及echarts的百度地图插件BMap

echarts和bmap可以到官网去下载, 这里的路径是本地的

    <script src="http://api.map.baidu.com/api?v=2.0&ak=g3Ufu6jCRS2TNcCwsn5E3gZP"></script><script src="./echarts.min.js"></script><script src="./bmap.min.js"></script>

初始化Echarts并配置选项，部分配置已在注释中说明

 var div = document.getElementById('container');var myChart = echarts.init(div);//要显示的多边形var area_data = [//第一个多边形的经纬度坐标
[[112.564881, 26.919803],[112.564917, 26.908528],[112.574547, 26.908496],[112.574475, 26.916807],[112.57372, 26.917065]],
//第二个多边形的经纬度坐标[[112.579886, 26.908145],[112.579994, 26.899431],[112.584629, 26.899334],[112.584288, 26.908016]],
//第三个多边形的经纬度坐标[[112.564791, 26.908234],[112.574565, 26.908202],[112.574708, 26.899535],[112.569606, 26.899471],[112.564953, 26.899552]]];//渲染函数function renderItem(params, api) {//由于render是对应data里边的每一项，而params里边没有传入data ，api的value也取不到这里所要取得的值// 所以这里的数据取 area_data 里边的，而在 series.data 中只传入一个和area_data长度相同的简单数组即可。var coords = area_data[params.dataIndex];var points = [];for (var i = 0; i < coords.length; i++) {points.push(api.coord(coords[i]));}console.log(params, api);return {type: 'polygon',shape: {points: points},style: api.style()};}
//echarts 配置项option = {tooltip: {trigger: 'item'},bmap: {center: [112.572925, 26.903983],zoom: 15,roam: true,},series: [{name: '轮廓',type: 'custom',coordinateSystem: 'bmap',renderItem: renderItem,itemStyle: {normal: {opacity: 0.5,fill: '#00f',},emphasis: {fill: '#f0f',}},animation: false,//silent: true,data: ['社区1', '社区2', '社区3'],z: -10}]};myChart.setOption(option);

下图中红色区域即为所绘制的自定义的轮廓

3.完整代码

<!DOCTYPE html>
<html>
<head><title>demo</title><style>#container {width: 800px;height: 800px;}</style>
</head>
<body><div id="container"></div><script src="http://api.map.baidu.com/api?v=2.0&ak=g3Ufu6jCRS2TNcCwsn5E3gZP"></script><script src="./echarts.min.js"></script><script src="./bmap.min.js"></script><script>var div = document.getElementById('container');var myChart = echarts.init(div);//要显示的多边形var area_data = [//第一个多边形的经纬度坐标[[112.564881, 26.919803],[112.564917, 26.908528],[112.574547, 26.908496],[112.574475, 26.916807],[112.57372, 26.917065]],//第二个多边形的经纬度坐标[[112.579886, 26.908145],[112.579994, 26.899431],[112.584629, 26.899334],[112.584288, 26.908016]],//第三个多边形的经纬度坐标[[112.564791, 26.908234],[112.574565, 26.908202],[112.574708, 26.899535],[112.569606, 26.899471],[112.564953, 26.899552]]];//渲染函数function renderItem(params, api) {//由于render是对应data里边的每一项，而params里边没有传入data ，api的value也取不到这里所要取得的值// 所以这里的数据取 area_data 里边的，而在 series.data 中只传入一个和area_data长度相同的简单数组即可。var coords = area_data[params.dataIndex];var points = [];for (var i = 0; i < coords.length; i++) {points.push(api.coord(coords[i]));}console.log(params, api);return {type: 'polygon',shape: {points: points},style: api.style()};}//echarts 配置项option = {tooltip: {trigger: 'item'},bmap: {center: [112.572925, 26.903983],zoom: 15,roam: true,},series: [{name: '轮廓',type: 'custom',coordinateSystem: 'bmap',renderItem: renderItem,itemStyle: {normal: {opacity: 0.5,fill: '#00f',},emphasis: {fill: '#f0f',}},animation: false,//silent: true,data: ['社区1', '社区2', '社区3'],z: -10}]};myChart.setOption(option);</script>
</body>
</html>

用echarts在百度地图bmap自定义形状相关推荐

echarts 使用百度地图加入自定义图标标记
首先先上效果图,静态图(PS.制作动图还在学习中~): 地图上的文字未展示,根据经纬度标记图,循环展示每个标记点的数据~ 一.如何引入百度地图申请百度开发秘钥AK http://lbsyun.bai ...
echarts 与百度地图bmap结合系列：如何设置地图缩放级别和监听缩放事件
简单的demo: // ehcarts 的实例对象 this.myChart = echarts.init(el)// ehcarts加载完成事件 this.myChart.on('finished' ...
echarts实现中国地图和自定义形状的词云图
目录 1.中国地图 2.词云图 3.资源源码用echarts实现了中国地图上的发票流入流出图和小鸟形状的词云图. 先看下效果中国地图(有动态的流入流出箭头和悬浮框提示信息): 词云图(小鸟形状,也 ...
街道社区网格化信息管理Echarts集成百度地图bmap样式表冲突导致的无法显示地图的解决方案
删除通用样式表图片样式,成功解决: img {border: none;max-width: 100%; } Done!
echarts使用百度地图
前情提要获得百度地图授权的ak密钥引入echarts的百度地图准备好echarts百度地图需要的数据自定义百度地图的样式去掉百度地图的logo 一.获取百度地图的ak密钥首先得注册成为百度 ...
Echarts与百度地图结合实现风场矢量图相关问题
这是部分js代码,代码里有一些标注,文章最后有相关问题,请耐心阅读,欢迎指导意见留言 function loadmap() { **这段是风场数据处理调用的方法,可以暂时忽略**// https:// ...
Echarts结合百度地图API
Echarts结合百度地图API 下面的代码运用到了Echarts 和百度地图API,地图的样式自定义的.(效果图在最下边) 运用到了百度API中的自定义控件,监听事件addEventListener ...
php网页地图上自定义,网页嵌入百度地图和使用百度地图api自定义地图的详细步骤...
在网页中插入百度地图如果想在自己的网页上面加入百度地图的话,可以用百度地图的api.具体使用方法如下: 第二步:设置地图,大家可以对网站显示地图的宽高进行设置,其余选项不动. 第三步:添加标注.点击 ...
vue3 使用echarts和百度地图
文章目录前言一.使用echarts 1. 安装echarts 2. echarts中使用百度地图 2.1 引入百度地图 2.2 全部代码 2.3 结果 3 echarts使用geomap进行地图展 ...

用echarts在百度地图bmap自定义形状

用echarts在百度地图bmap自定义形状

用echarts在百度地图bmap自定义形状相关推荐

最新文章

热门文章