使用echarts 绘制县级以下 州里地图并标注若干坐标点。获取县级以下州里的
最终结果：https://i-blog.csdnimg.cn/direct/74c378d89d214511ba7c72fe82d0ac04.gif
要做一个州里级的地图，并标出某些企业的坐标点。
1、使用高德，但高德不支持县级以下。放弃
https://i-blog.csdnimg.cn/direct/75255a598064483283015f20e352d0f4.png
2、使用echarts 图表
但是使用地理坐标系时，我还是没有州里的边界限经纬度。首先要获取边界限啊，方法如下：
1、 使用 “BIGEMAP GIS Office-万能版” ，获取边界坐标。 软件下载：BIGEMAP GIS Office-万能版
参考文章：高德地图绘制州里边界限_高德地图体现边界限-CSDN博客
添加百度地图：
百度地图url：https://map.baidu.com/
https://i-blog.csdnimg.cn/direct/11248eb3a147464e869ac1262a774e52.png
选择要下载的州里。我都下载的能勾选的最小级别，级别越大文件会越大，越清晰，但我只要边界，不必要文件太大。
https://i-blog.csdnimg.cn/direct/e933e58da85c4623a495e7367ba1aa5b.png
2、将下载的 .kml 文件转为json格式。
使用工具：geojson.io | powered by Mapbox 网页版
https://i-blog.csdnimg.cn/direct/e32c9295a453448088a9408a885dd380.png
点击左上角 open 导入 文件即可。右侧出现的json，就是我们必要的，直接复制到 .json 文件中就可以了。
至此结束。
我的完整代码
import luxi from '@/utils/mapData.json' // 引入地图文件，格式和‘geojson.io | powered by Mapbox ’ 生成的json一模一样
// 地图创建方法
createMap(){
this.mapChart = echarts.init(document.getElementById('myMap'));
// 地图散点图配置
conststationData = [
{id:1,name:'企业1',value:,jb:12,tpf:18},
{id:2,name:'企业2',value:,jb:12,tpf:18},
{id:3,name:'企业3',value:,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;
}, /* 提示框 样式，千万别加 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 https://i-blog.csdnimg.cn/direct/6e88903190cd4bc89fdbf3addea77eb0.png
也是客户端，安装就能使。但它是高德家的，也没有具体到州里。（我卸载了，没有截图）
3、使用 DataV.GeoAtlas地理小工具系列，也没有州里。
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]