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)
    })
  }
相关推荐
醉の虾20 分钟前
Vue3 使用v-for 渲染列表数据后更新
前端·javascript·vue.js
张小小大智慧28 分钟前
TypeScript 的发展与基本语法
前端·javascript·typescript
hummhumm38 分钟前
第 22 章 - Go语言 测试与基准测试
java·大数据·开发语言·前端·python·golang·log4j
asleep7011 小时前
第8章利用CSS制作导航菜单
前端·css
hummhumm1 小时前
第 28 章 - Go语言 Web 开发入门
java·开发语言·前端·python·sql·golang·前端框架
幼儿园的小霸王1 小时前
通过socket设置版本更新提示
前端·vue.js·webpack·typescript·前端框架·anti-design-vue
疯狂的沙粒2 小时前
对 TypeScript 中高级类型的理解?应该在哪些方面可以更好的使用!
前端·javascript·typescript
gqkmiss2 小时前
Chrome 浏览器 131 版本开发者工具(DevTools)更新内容
前端·chrome·浏览器·chrome devtools
Summer不秃2 小时前
Flutter之使用mqtt进行连接和信息传输的使用案例
前端·flutter
旭日猎鹰2 小时前
Flutter踩坑记录(二)-- GestureDetector+Expanded点击无效果
前端·javascript·flutter