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)
    })
  }