使用echarts 绘制县级以下 州里地图并标注若干坐标点。获取县级以下州里的 ...

最终结果：

    要做一个州里级的地图，并标出某些企业的坐标点。
  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 文件中就可以了。
  
  至此结束。
   我的完整代码

1. import luxi from '@/utils/mapData.json'   // 引入地图文件，格式和‘geojson.io | powered by Mapbox ’ 生成的json一模一样
5.    
6. // 地图创建方法
7.           createMap(){
8.             this.mapChart = echarts.init(document.getElementById('myMap'));
10.             // 地图散点图配置
11.             const  stationData = [
12.               {id:1,name:'企业1',value:[114.039211,27.636837],jb:12,tpf:18},
13.               {id:2,name:'企业2',value:[114.016862,27.642597],jb:12,tpf:18},
14.               {id:3,name:'企业3',value:[114.206765,27.62392],jb:12,tpf:18},
15.             ]
17.             let option = {
18.               tooltip: {
19.                 padding: 10,
20.                 backgroundColor:"rgba(5,42,99,0.9)",
21.                 borderColor:"rgba(5,42,99,0.9)",
22.                 textStyle:{
23.                   color:"#fff"
24.                 },
25.                 show: true,
26.                 formatter:  (params) =>{
27.                   return this.createtooltip(params.data)
28.                 }
29.               },
30.               geo: [{
31.                 map: 'luxi',   // 我的地图文件
32.                 roam: true,//是否开启鼠标缩放和平移漫游
33.                 zoom: '1.2',
34.                 silent:false,   //图形是否不响应和触发鼠标事件，默认为 false，即响应和触发鼠标事件。
35.                 label: {
36.                   show:false,
37.                   normal: {
38.                     show: true,
39.                     fontSize: "14",
40.                     color: "#ffffff"
41.                   },
42.                   emphasis: {  //高亮状态下的图形形和标签样式
43.                     show: true,
44.                     textStyle: {
45.                       color: "#fff"
46.                     }
47.                   }
48.                 },
49.                 itemStyle: {
50.                   color:{   // 地图块颜色
51.                     type: 'linear',
52.                     x: 0,
53.                     y: 0,
54.                     x2: 0,
55.                     y2: 1,
56.                     colorStops: [{
57.                       offset: 0, color: '#2f5084' // 0% 处的颜色
58.                     }, {
59.                       offset: 1, color: '#2272c9' // 100% 处的颜色
60.                     }],
61.                     global: false // 缺省为 false
62.                   },
63.                   borderColor: '#acccfb',
64.                   emphasis: {   // 高亮时的颜色
65.                     color:{   // 地图块颜色
66.                       type: 'linear',
67.                       x: 0,
68.                       y: 0,
69.                       x2: 0,
70.                       y2: 1,
71.                       colorStops: [{
72.                         offset: 0, color: '#1764f9' // 0% 处的颜色
73.                       }, {
74.                         offset: 1, color: '#2786fe' // 100% 处的颜色
75.                       }],
76.                       global: false // 缺省为 false
77.                     },
78.                     show: true,
79.                   }
80.                 }
81.               },
84.               ],
85.               series: [{    // 使用散点图  标注企业点
86.                 type: 'scatter',
87.                 coordinateSystem: 'geo', //使用地理坐标系
88.                 data: stationData,
89.                 symbolSize: 10,
90.                 itemStyle: {
91.                   normal: {
92.                     color: '#FFA500' // 设置为橘黄色
93.                   }
94.                 },
95.               }]
96.             }
98.             this.mapChart.setOption(option);
100.             // 散点图点击时
101.             this.mapChart.on('click',(params)=>{
102.               console.log(params)
103.               
104.             })
105.           },
107. // 自定义 提示框
108.       createtooltip(item){
109.             const ele = `<div class="qiye-tank" >
110.                   <div class="tank-title">${item.name}</div>
111.                   <div class="tank-text">碳排放量总数：${item.tpf}</div>
112.                   <div class="tank-text">碳效评级：${item.jb}</div>
113.                 </div>`
114.             return ele;
116.           },

复制代码

1. /* 提示框 样式，千万别加 scoped */
2. <style lang="scss">
3.   .qiye-tank {
4.     white-space: nowrap;
5.     font-weight: 400;
6.     font-size: 12px;
7.     color: #FFFFFF;
8.     line-height: 2;
9.     border-radius: 6px;
10.     .tank-title{
11.       font-size: 15px;
12.       font-weight: 700;
13.     }
14.   }
15. </style>

复制代码

 
   其他获取边界方式：（不能具体到州里。）
  1、使用“水经微图”。参考：echarts 根据geojson 数据绘制地区图（精确到镇） - 凉面好好吃 - 博客园
  但是，安装后，未授权的只能看地图不能下载地图。官方客服不理人，还把人踢出群聊。哎，算了，我找别的。
  2、使用“人文帮”。Docs  

  也是客户端，安装就能使。但它是高德家的，也没有具体到州里。（我卸载了，没有截图）
  3、使用  DataV.GeoAtlas地理小工具系列，也没有州里。
  
  

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。