echarts 引入百度地图

在写大数据相关的大屏中，会遇到需自定义定点图标的问题，这样就必须运用到echarts series的custom属性。
echarts百度地图 custom 属性的运用：
首先上效果图：

这样一个效果的地图，需要运用echarts的 bmap引入地图，通过mapStyle属性来对地图进行调色，代码如下：

bmap: {center: [parseFloat(elderInfo.longitude),parseFloat(elderInfo.latitude),],//这里引入你的地图的中心点经纬度zoom: 14,roam: true,mapStyle: {styleJson: [{featureType: "water",elementType: "all",stylers: {color: "#003483",},},{featureType: "land",elementType: "all",stylers: {color: "#00023C",},},{featureType: "railway",elementType: "all",stylers: {visibility: "off",},},{featureType: "highway",elementType: "all",stylers: {color: "#000F54",},},{featureType: "highway",elementType: "labels",stylers: {visibility: "off",},},{featureType: "arterial",elementType: "geometry",stylers: {color: "#000F54",},},{featureType: "arterial",elementType: "geometry.fill",stylers: {color: "#000F54",},},{featureType: "poi",elementType: "labels.text.fill",stylers: {color: "#ffffff",visibility: "on",},},{featureType: "poi",elementType: "labels.text.stroke",stylers: {color: "#ffffff",visibility: "on",},},{featureType: "green",elementType: "all",stylers: {visibility: "off",},},{featureType: "subway",elementType: "all",stylers: {visibility: "off",},},{featureType: "manmade",elementType: "all",stylers: {color: "#000F52",},},{featureType: "local",elementType: "all",stylers: {// visibility: "off",color: "#000F52",},},{featureType: "arterial",elementType: "labels",stylers: {visibility: "off",},},{featureType: "boundary",elementType: "all",stylers: {color: "#000F52",},},{featureType: "building",elementType: "all",stylers: {visibility: "off",// 'color': '#000F52'},},{featureType: "label",elementType: "labels",stylers: {color: "#00023C",},},{featureType: "poilabel",elementType: "labels",stylers: {color: "#00023C",},},{featureType: "poilabel",elementType: "labels.text.fill",stylers: {color: "#002F7D",},},{featureType: "label",elementType: "labels.text.fill",stylers: {color: "#002F7D",},},],},},

这样对地图调色完成后，需用到series中的custom属性来自定义图标

series:[{type: "custom",name: "站点",id: "homeMap",coordinateSystem: "bmap",renderItem: function (params, api) {return addImage(params, api, dataTemp);},data: dataTemp,zlevel: 1,label: {show: false,},}
]
//计算图片的位置，已经通过不同的状态显示不同的图片
var addImage = function (params, api, realData) {let imgUrl = "";if (realData[params.dataIndex].state == 1) {imgUrl = that.img1;} else if (realData[params.dataIndex].state == 2) {imgUrl = that.img2;}realData[params.dataIndex].x = api.coord([realData[params.dataIndex].lng,realData[params.dataIndex].lat,])[0];realData[params.dataIndex].y =api.coord([realData[params.dataIndex].lng,realData[params.dataIndex].lat,])[1] - 38;return {type: "image",style: {image: imgUrl,x:api.coord([realData[params.dataIndex].lng,realData[params.dataIndex].lat,])[0] - 38,y:api.coord([realData[params.dataIndex].lng,realData[params.dataIndex].lat,])[1] - 76,width: 76,height: 76,},};};

通过重复定义给点标明名称

series:[{name: "中心站点",type: "effectScatter",coordinateSystem: "bmap",data: data,encode: {value: 2,},symbolSize: function (val) {return val[2] / 10;},showEffectOn: "emphasis",rippleEffect: {brushType: "stroke",},hoverAnimation: true,label: {formatter: "{b}",position: "inside",show: true,color: "#fff",fontSize: 18,},itemStyle: {color: "#f4e925",shadowBlur: 10,shadowColor: "#333",},zlevel: 1,}
]

echarts 引入百度地图相关推荐

echarts引入百度地图并且添加点击事件
echarts引入百度地图并且添加点击事件 (1)下载依赖项 npm install echarts --save (2)引入echarts到页面当中 import * as echarts from ...
echarts引入百度地图API，设置bmap属性问题
echarts option里的bmap属性结构如下: bmap: {center: [117.239346, 31.824116], // 当前视角中心位置的坐标zoom: 12,roam: tru ...
vue中使用echarts结合百度地图制作地图（引入百度地图、获取百度地图实例、设置百度地图）
1.初始化echarts以及例子可以看管网的地址:https://echarts.apache.org/examples/zh/editor.html?c=map-polygon 2说下我遇到的问题 ...
echarts 使用百度地图加入自定义图标标记
首先先上效果图,静态图(PS.制作动图还在学习中~): 地图上的文字未展示,根据经纬度标记图,循环展示每个标记点的数据~ 一.如何引入百度地图申请百度开发秘钥AK http://lbsyun.bai ...
echarts使用百度地图
前情提要获得百度地图授权的ak密钥引入echarts的百度地图准备好echarts百度地图需要的数据自定义百度地图的样式去掉百度地图的logo 一.获取百度地图的ak密钥首先得注册成为百度 ...
[超详细]Echarts+vue+百度地图动态实现城市疫情地图
动态中国城市疫情地图的实现,主要是参照Echarts官网官方案例的方法:Examples - Apache ECharts ,但是官方给的案例数据都是静态写在Option的Data中的无法根据疫情实时 ...
Echarts与百度地图结合实现风场矢量图相关问题
这是部分js代码,代码里有一些标注,文章最后有相关问题,请耐心阅读,欢迎指导意见留言 function loadmap() { **这段是风场数据处理调用的方法,可以暂时忽略**// https:// ...
可视化篇：Echarts2.0引入百度地图
写在最前 Echarts作为百度团队下一个可视化的js库,自2.0更新至3.0以来,其带来的视觉冲击更加强悍,数据可视更加精美,图形交互更加贴合用户. 由于echarts2在百度地图的实例上没有作过多 ...
可视化篇：Echarts2.0引入百度地图(转载)
原链接:https://blog.csdn.net/yc_1993/article/details/51367575?spm=1001.2014.3001.5501 写在最前 Echarts作为百度团 ...
可视化篇：Echarts3.0引入百度地图（更新）
update: 由于目前echarts3.8.X比之前旧版改动较多,其实地图实例处许多朋友留言跑不通,今天更新下新版的做法,亲测已经可以. perface 一直抽不开身,留言区以及不少朋友都在问如何在 ...

echarts 引入百度地图

echarts 引入百度地图

echarts 引入百度地图相关推荐

最新文章

热门文章