如何利用Echarts根據(jù)經(jīng)緯度給地圖畫點畫線

更新時間：2022年05月24日 10:58:58 作者：Modify_lzq

最近工作中遇到了一個需求,需要利用echarts在地圖上面標記點位,所下面這篇文章主要給大家介紹了關(guān)于如何利用Echarts根據(jù)經(jīng)緯度給地圖畫點畫線的相關(guān)資料,需要的朋友可以參考下

1、相關(guān)介紹

在使用Echar進行繪制地圖對象，首先我們需要地圖的json文件，Echarts依賴默認會引入這個相關(guān)的json文件，所以后續(xù)使用這個地圖可以之間引用這里的json文件進行繪制Echarts地圖。

但是在后續(xù)重新構(gòu)建項目的時候發(fā)現(xiàn)了一個問題，Echarts的依賴包下沒有這個map文件了，我心想這不人麻了，這json文件我要去哪找。后面再對比版本之后發(fā)現(xiàn)，在5.0版本之前Echarts會默認將這些Map的json文件進行打包,但是在5.0之后就不會對這個進行打包加入到依賴之中了,可以看一下官網(wǎng)升級指南。

那說來說去還是這個json文件要去哪找,在這里我們可以在5.0版本之前的Echarts當中復(fù)制過來,或者我們可以從這里 http://datav.aliyun.com/portal/school/atlas/area_selector 進行下載json文件進行使用

2、地圖繪制

先給一個用于繪制地圖的canvas的div

<div id="china-map" style="width: 100%;height: 100%;"></div>

之后我們在當前vue導(dǎo)入echarts和前面下載的地市的json文件，并且這里使用的是5的版本，對于4的版本還可以采用以下方式引入，這里繪制地圖以安徽為例。

  // 5.0以前
  import echarts from 'echarts';
  // 5.0以后
  import * as echarts from 'echarts';
  import JSON from '../mapJson/anhui.json';

往下就是構(gòu)建地圖所需要使用的Echarts對象了，這里先定義一個mapOption對象，之后我們直接在方法當中對這個mapOption進行賦值

this.mapOption= {
          color: ['#5470c6'],
          tooltip: {
            trigger: 'item',
            renderMode: 'html',
            // 觸發(fā)方式
            triggerOn: 'click',
            enterable: true,
            backgroundColor: '#fff',
            padding: 0,
            textStyle: {
              color: '#000',
              fontSize: '12'
            },
            extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'
          },
          dispatchAction: {
            type: 'downplay'
          },
          roam: false,
          roamController: {
            show: true,
            x: 'right',
            mapTypeControl: {
              china: true
            }
          },
          series: [],
          geo: {
            show: true,
            map: 'anhui',
            type: 'map',
            mapType: 'anhui',
            roam: false,
            label: {
              normal: {
                // 顯示省份標簽
                show: false,
                textStyle: {
                  color: '#fff',
                  fontSize: 10
                }
              },
              emphasis: {
                // 對應(yīng)的鼠標懸浮效果
                show: true,
                // 選中后的字體樣式
                textStyle: {
                  color: '#000',
                  fontSize: 14
                }
              }
            },
            itemStyle: {
              color: '#ddb926',
              normal: {
                areaColor: '#8abcd1',
                borderColor: '#fff',
                borderWidth: 1
              },
              emphasis: {
                borderWidth: 0.5,
                borderColor: '#8abcd1',
                areaColor: '#fff'
              }
            },
            emphasis: {
              label: {
                show: false
              }
            }
          }
        }

最后直接獲取json對象，以及前面定義的div對象，將這里初始化了的mapOption進行傳入即可：

		echarts.registerMap('anhui', JSON, {});
        const myChart = echarts.init(
          document.getElementById('china-map'),
        );
        myChart.setOption(this.mapOption);
        window.addEventListener('resize', () => {
          myChart.resize();
        });

之后可以查看效果：這樣的話對于一個繪制地圖也就基本上完成了。

同樣的舉一反三，對于繪制其他地市的地圖，我們只需要導(dǎo)入其他地市的json即可，

import JSON from '../mapJson/zhejiang.json';

并且將mapOption下的geo的map和mapType進行響應(yīng)的調(diào)整即可，其余代碼都可進行復(fù)用，不必修改：查看效果：

3、根據(jù)經(jīng)緯度進行標點畫線

這里還是先繼續(xù)用安徽的地圖來進行說明，這里的Echarts來進行繪制點和線主要就是通過疊加，也就是在地圖上分別使用Echarts進行畫點畫線。而對于繪制點和線直接在series當中進行添加相關(guān)配置即可。

		{
              name: '',
              type: 'scatter',
              coordinateSystem: 'geo',
              color: ['#000'],
              tooltip: {
                position: "right",
                color: "#000",
                formatter(d) {
                  console.log(d)
                  return `<div style="padding: 5px 10px;">【${d.data.name}】</div>`;
                },
              },
              data: dataGeo,
            }

這里點的數(shù)據(jù) dataGeo 要進行構(gòu)建：其結(jié)構(gòu)如下：分別是城市名稱與其經(jīng)緯度。

        mapPointData.push({
          name: '六安',
          value: [116.50, 31.75]
        })
        mapPointData.push({
          name: '馬鞍山',
          value: [118.51, 31.68]
        })
        mapPointData.push({
          name: '宿州',
          value: [116.98, 33.63]
        })

這樣添加完成之后可以進行瀏覽頁面查看效果：到這里根據(jù)經(jīng)緯度進行繪制點也就完成了。

同樣的繪制線也和點一樣，同樣在series當中再添加一個繪制線的對象.

            {
              name: "",
              type: "lines",
              zlevel: 6,
              lineStyle: {
                type: 'solid',
                width: 1,
                opacity: 1,
                curveness: 0,
                orient: 'horizontal',
                color: "#000",
              },
              show: true,
              data: lineData,
              tooltip: {
                position: "right",
                color: "#000",
                formatter(d) {
                  console.log(d)
                  return `<div style="padding: 5px 10px;"> 【${d.data.point[0]}】< ---- >【${d.data.point[1]}】</div>`;
                },
              },
            },

同樣的我們需要對線的數(shù)據(jù)lineData進行構(gòu)建：數(shù)據(jù)格式如下：分別表示起始地市的名稱與其對應(yīng)地市的經(jīng)緯度

        lineData.push({
          point: ['六安', '馬鞍山'],
          coords: [
            [116.50, 31.75],
            [118.51, 31.68]
          ],
        })
        lineData.push({
          point: ['宿州', '馬鞍山'],
          coords: [
            [116.98, 33.63],
            [118.51, 31.68]
          ],
        })
        lineData.push({
          point: ['宿州', '六安'],
          coords: [
            [116.98, 33.63],
            [116.50, 31.75]
          ],
        })

最后還是查看效果：