echarts+百度地图如何定义边界线

1.首先我们找到html文件里面的变量geoJson,这通过DataV.GeoAtlas地理小工具系列得到的json数据,你可以在里面找到自己想要的省份数据。

2.变量styleJson是地图的样式,可以去登录百度账号百度地图开放平台查询文档。

3.方法getCenterPoint是获取当前区域中心点的经纬度,我们将会在区域的中心点显示区域名称和具体数值。

function getCenterPoint(data) {
	var geoCoordinateList = []
	for(var i = 0;i<data.length;i++){
		geoCoordinateList.push({lat:data[i][1],lng:data[i][0]})
	}
	const geoCoordinateListFlat = geoCoordinateList.reduce((s, v) => {
		return(s = s.concat(v))
	}, [])
	const total = geoCoordinateListFlat.length
	let X = 0
	let Y = 0
	let Z = 0
	for(const g of geoCoordinateListFlat) {
		const lat = g.lat * Math.PI / 180
		const lon = g.lng * Math.PI / 180
		const x = Math.cos(lat) * Math.cos(lon)
		const y = Math.cos(lat) * Math.sin(lon)
		const z = Math.sin(lat)
		X += x
		Y += y
		Z += z
	}

	X = X / total
	Y = Y / total
	Z = Z / total
	const Lon = Math.atan2(Y, X)
	const Hyp = Math.sqrt(X * X + Y * Y)
	const Lat = Math.atan2(Z, Hyp)

	return {
		lng: Lon * 180 / Math.PI,
		lat: Lat * 180 / Math.PI
	}
}

4.方法convertData返回的是地图上红色散点里面的数据,是对idata的数据格式做的一层转换。

  	var idata = [
    { name: "张三", geo: [113.946415, 23.013205], value: 402 },
    { name: "李四", geo: [113.666432, 22.989253], value: 402 },
    { name: "王五", geo: [113.802112, 22.962635], value: 402 },
    { name: "小明", geo: [113.88145, 22.828399], value: 402 },
];

var convertData = function (data) {
    var res = []
    for (var i = 0; i < data.length; i++) {
        var item = data[i]
        res.push({
            name: item.name,
            value: item.geo.concat(item.value)
        })
    }
    return res
}

5.setOption里面的参数option.series是echarts散点图的配置项,option.bmap是百度地图的配置项,比如center是当前地图的中心点,zoom是缩放数值,roam是是否可以缩放,mapStyle是地图的样式。

myChart.setOption(option = {
    animation: false,
    bmap: {
        center: [113.746262, 23.046237],
        zoom: 11,
        roam: true,
        
        mapStyle: {
            styleJson: styleJson,
        }
    },
    series: [
        {
            name: '点',
            type: 'scatter',
            coordinateSystem: 'bmap',
            symbol: 'pin',
            symbolSize: symbolSize,
            label: {
                normal: {
                    show: true,
                    textStyle: {
                        color: '#fff',
                        fontSize: 9,
                    },
                    formatter: function (params) {
                        return params.value[2]
                    },
                },
            },

            itemStyle: {
                normal: {
                    color: '#f30000', //标志颜色#F62157
                }
            },
            zlevel: 6,
            data: convertData(idata),
        }
    ]
});

注意:如果你想要在vue文件里面运行,需要加上下面这段代码,并且用loadBMap().then(() => this.init());的方式调用。

export function loadBMap(ak) {
    return new Promise(function (resolve, reject) {
      if (typeof BMap !== 'undefined') {
        resolve(BMap)
        return true
      }
      window.onBMapCallback = function () {
        resolve(BMap)
      }
      let script = document.createElement('script')
      script.type = 'text/javascript'
      script.src = 'http://api.map.baidu.com/api?v=2.0&ak=' + ak + '&__ec_v__=20190126&callback=onBMapCallback'
      script.onerror = reject
      document.head.appendChild(script)
    })
  }
相关推荐
也无晴也无风雨37 分钟前
深入剖析输入URL按下回车,浏览器做了什么
前端·后端·计算机网络
Martin -Tang1 小时前
Vue 3 中,ref 和 reactive的区别
前端·javascript·vue.js
FakeOccupational3 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
放逐者-保持本心,方可放逐3 小时前
react 组件应用
开发语言·前端·javascript·react.js·前端框架
曹天骄4 小时前
next中服务端组件共享接口数据
前端·javascript·react.js
阮少年、4 小时前
java后台生成模拟聊天截图并返回给前端
java·开发语言·前端
郝晨妤5 小时前
鸿蒙ArkTS和TS有什么区别?
前端·javascript·typescript·鸿蒙
AvatarGiser6 小时前
《ElementPlus 与 ElementUI 差异集合》Icon 图标 More 差异说明
前端·vue.js·elementui
喝旺仔la6 小时前
vue的样式知识点
前端·javascript·vue.js
别忘了微笑_cuicui6 小时前
elementUI中2个日期组件实现开始时间、结束时间(禁用日期面板、控制开始时间不能超过结束时间的时分秒)实现方案
前端·javascript·elementui