SOURCE

console 命令行工具 X clear

                    
>
console
var chartDom = document.getElementById('ec-id');
var myChart = echarts.init(chartDom);
//哈弗赛恩公式 计算 经纬度之间的举例,地球的半径,通常取 6371 公里
function haversine(lat1, lon1, lat2, lon2, R = 6371) {
    var dLat = (lat2 - lat1) * Math.PI / 180;
    var dLon = (lon2 - lon1) * Math.PI / 180;
    var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
            Math.cos(lat1 * Math.PI / 180) * Math.cos(lat2 * Math.PI / 180) *
            Math.sin(dLon/2) * Math.sin(dLon/2);
    var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
    return R * c;
}

var ser_dd = []
var ser_ds =  {
    name: '标记', type: 'scatter', coordinateSystem: 'geo', symbol: 'pin',
    symbolSize: 25, data: ser_dd,
    label: { show: true, formatter: (p)=>{ return p.data.name;} }
};
var ser_cor1 = [];
var ser_hx1 = {
    name: '航线', type: 'lines', coordinateSystem: 'geo', polyline: true,
    data: [{ coords: ser_cor1 }],
    lineStyle: { color: '#c46e54', width: 2, opacity: 1, type: 'dotted', curveness: 1 }
};

var option = {
    geo: {
        show: true, map: 'china', roam: true,
        left: "4%", right: "4%", top: "2%", bottom: "21%",
        itemStyle: {
            areaColor: "#0184d5",
            shadowColor: "rgba(0, 0, 0, 0.3)",
            shadowBlur: 2,
            shadowOffsetX: 5,
        },
    },
    series: [
        { type: "map", name: "地图", geoIndex: 0 },
        ser_ds
    ]
};

myChart.setOption(option);
//console.log(myChart);
let cityName,cityId;
myChart.on("click", { seriesName: "地图" }, function (params) {
    let name = params.name,
        {offsetX,offsetY} = params.event,
        xy = myChart.convertFromPixel('geo', [offsetX,offsetY]),
        len = haversine(116.405285, 39.904989, xy[0], xy[1]);
    // console.log("click",name, params);
    // console.log('坐标=>经纬', name, offsetX, offsetY, xy, '距离北京', len);
    ser_dd.push({ name: ''+ser_dd.length,value: xy })
    //航迹设置
    ser_cor1.push(xy);
    if(ser_cor1.length == 2){ option.series.push(ser_hx1); }
    myChart.setOption(option);
});
<h3><a href="https://echarts.apache.org/zh/index.html" target="_blank">echarts</a>-航线编辑</h3>
<div id="ec-id" style="width:100%;height:600px;border:1px solid rgba(25,186,139,.17)">
    123
</div>

本项目引用的自定义外部资源