最终效果：
要做一个乡镇级的地图，并标出某些企业的坐标点。
1、使用高德，但高德不支持县级以下 。放弃
2、使用echarts 图表
但是使用地理坐标系时，我还是没有乡镇的边界线经纬度。首先要获取边界线啊，方法如下：
1、 使用 "BIGEMAP GIS Office-全能版" ，获取边界坐标。 软件下载：BIGEMAP GIS Office-全能版
参考文章：高德地图绘制乡镇边界线_高德地图显示边界线-CSDN博客
添加百度地图：
百度地图url：https://map.baidu.com/
选择要下载的乡镇。我都下载的能勾选的最小级别，级别越大文件会越大，越清晰，但我只要边界，不需要文件太大。
2、将下载的 .kml 文件转为json格式。
使用工具：geojson.io | powered by Mapbox 网页版
点击左上角 open 导入 文件即可。右侧出现的json，就是我们需要的，直接复制到 .json 文件中就可以了。
至此结束。
我的完整代码
javascript
import luxi from '@/utils/mapData.json' // 引入地图文件，格式和'geojson.io | powered by Mapbox ' 生成的json一模一样
// 地图创建方法
createMap(){
this.mapChart = echarts.init(document.getElementById('myMap'));
// 地图散点图配置
const stationData = [
{id:1,name:'企业1',value:[114.039211,27.636837],jb:12,tpf:18},
{id:2,name:'企业2',value:[114.016862,27.642597],jb:12,tpf:18},
{id:3,name:'企业3',value:[114.206765,27.62392],jb:12,tpf:18},
]
let option = {
tooltip: {
padding: 10,
backgroundColor:"rgba(5,42,99,0.9)",
borderColor:"rgba(5,42,99,0.9)",
textStyle:{
color:"#fff"
},
show: true,
formatter: (params) =>{
return this.createtooltip(params.data)
}
},
geo: [{
map: 'luxi', // 我的地图文件
roam: true,//是否开启鼠标缩放和平移漫游
zoom: '1.2',
silent:false, //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
label: {
show:false,
normal: {
show: true,
fontSize: "14",
color: "#ffffff"
},
emphasis: { //高亮状态下的图形形和标签样式
show: true,
textStyle: {
color: "#fff"
}
}
},
itemStyle: {
color:{ // 地图块颜色
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#2f5084' // 0% 处的颜色
}, {
offset: 1, color: '#2272c9' // 100% 处的颜色
}],
global: false // 缺省为 false
},
borderColor: '#acccfb',
emphasis: { // 高亮时的颜色
color:{ // 地图块颜色
type: 'linear',
x: 0,
y: 0,
x2: 0,
y2: 1,
colorStops: [{
offset: 0, color: '#1764f9' // 0% 处的颜色
}, {
offset: 1, color: '#2786fe' // 100% 处的颜色
}],
global: false // 缺省为 false
},
show: true,
}
}
},
],
series: [{ // 使用散点图 标注企业点
type: 'scatter',
coordinateSystem: 'geo', //使用地理坐标系
data: stationData,
symbolSize: 10,
itemStyle: {
normal: {
color: '#FFA500' // 设置为橘黄色
}
},
}]
}
this.mapChart.setOption(option);
// 散点图点击时
this.mapChart.on('click',(params)=>{
console.log(params)
})
},
// 自定义 提示框
createtooltip(item){
const ele = `<div class="qiye-tank" >
<div class="tank-title">${item.name}</div>
<div class="tank-text">碳排放量总数：${item.tpf}</div>
<div class="tank-text">碳效评级：${item.jb}</div>
</div>`
return ele;
},
css
/* 提示框 样式，千万别加 scoped */
<style lang="scss">
.qiye-tank {
white-space: nowrap;
font-weight: 400;
font-size: 12px;
color: #FFFFFF;
line-height: 2;
border-radius: 6px;
.tank-title{
font-size: 15px;
font-weight: 700;
}
}
</style>其他获取边界方式：（不能具体到乡镇。）
1、使用"水经微图"。参考：echarts 根据geojson 数据绘制区域图（精确到镇） - 凉面好好吃 - 博客园
但是，安装后，未授权的只能看地图不能下载地图。官方客服不理人，还把人踢出群聊。哎，算了，我找别的。
2、使用"人文帮"。Docs
也是客户端，安装就能使。但它是高德家的，也没有具体到乡镇。（我卸载了，没有截图）
3、使用 DataV.GeoAtlas地理小工具系列，也没有乡镇。
