vue + echart 百度地图添加本地图片渲染

废话不多说先上效果图:

首先先说,echarts百度地图的渲染:

安装echart: npm install echarts@4.8 --save

安装百度地图: 

npm install vue-baidu-map --save

# 在 main.js 里面

import echarts from 'echarts';

import BaiduMap from 'vue-baidu-map'

Vue.use(BaiduMap, {

  ak: '你的百度地图的key'

})

申请地址:百度地图开放平台 | 百度地图API SDK | 地图开发

vue页面:

import echarts from "echarts/lib/echarts";
//百度地图
import "echarts/extension/bmap/bmap";
<div id="main" class="echartMap"></div>
        var chartDom = document.getElementById('main');
        var myChart = echarts.init(chartDom);

        var option = {
            backgroundColor: 'transparent',
            title: {
                // text: '',
                // subtext: '',
                // sublink: '',
                left: 'center',
                textStyle: {
                    color: '#fff'
                }
            },
            tooltip: {
                trigger: 'item',
                formatter: function (params, ticket, callback) {
                    // console.log("params:", params)
                    if (params.value !== undefined){
                        return (
                            "基站名称: " + params.name + "<br />" +
                            "BCCH: " + params.value[3] + "<br />"+
                            "TCH: " + params.value[4] + "<br />"+
                            "TCH1: " + params.value[5] + "<br />"+
                            "BSIC: " + params.value[6] + "<br />"+
                            "公里标: " + params.value[2] + "<br />"+
                            "纬度: " + params.value[1] + "<br />" +
                            "经度: " + params.value[0] + "<br />"
                        )
                    }
                }
            },
            geo: { //地图配置
				map: 'bmap',
                zoom: 12,
                roam: true,
                center: [ 88.36715698242188,  39.135459756570164],
                label:{
                    show: true,
                    offset: [1, 1000],
                    color: "#fff"
                },
                itemStyle: {
                    color: '#1A3F57', //地图背景色
                    borderColor: '#516a89', //省市边界线00fcff 516a89
                    borderWidth: 1
                },
                emphasis: {
                    itemStyle: {
                        color: '#87CEEB' //悬浮背景
                    },
                },
                backgroundColor: "#013954",
			},
            bmap: {
                center: [ 88.36715698242188,  39.135459756570164],
                zoom: 12,
                roam: true,
                mapStyle: {
                    // 定义bmap的样式
                    //地图不同类型的颜色设置,以及是否展示
                    // styleJson: []
                }
            },
            // 散点图配置
            series: [
               
                {
                    // 基站塔图
                    type: 'effectScatter',
                    coordinateSystem: 'bmap',
                    rippleEffect : { //气泡效
						brushType : 'stroke'
					},
                    hoverAnimation: true, //气泡效果end
                    zlevel: 6,
                    symbol: 'image://' + require('../../assets/images/map/bas.png'),
		            symbolSize: 20,
                    label: {
                        normal: {
                            formatter: function (params) {
                                return params.data.name
                            },
                            position: 'bottom',
                            let: '10%',
                            color: "black",
		
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

IT博客技术分享

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值