高德地图和Echarts共同实现飞线图

先看效果图:

由于GIF工具的问题显示的有点卡顿,在实际测试中很顺滑.

实现以上的效果:

高德地图Echarts中的 lines(路径图)来实现的.

首先我们要安装高德地图和Echarts这个安装步骤我就省略了.

其中有一个重要的命令:

npm install echarts-extension-amap --save
// 我们要安装 echarts-extension-amap
// 否则会因为找不到 amap 引起报错: Unkown coordinate system amap

直接上代码吧,详细的注释都在代码里面了:

<template>
    <div class="app-container">
        <div id="map" style="width: 100%;height: 100%;"></div>
    </div>
</template>

<script setup>
import AMapLoader from "@amap/amap-jsapi-loader";
import { ref, onMounted } from "vue";
import * as echarts from "echarts";
// 这里需要安装 echarts-extension-amap 插件; 否则会报错(Unkown coordinate system amap)
// 安装命令: npm install echarts-extension-amap --save
import "echarts-extension-amap"; // 高德地图坐标系插件

const option = {
    amap: {// 高德地图配置
        center: [104.114129, 37.550339], // 地图中心点
        zoom: 7,// 地图缩放级别
        viewMode: '3D',// 地图模式
        resizeEnabled: true,// 是否监控地图容器尺寸变化
        mapStyle: 'amap://styles/darkblue',// 地图样式
        pitch: 15, //视角高度
        skyColor: "#33216a", //天空颜色
    },
    animation: true, //是否开启动画
    series: [
        {
            type: "lines",// 线图(在Echarts的配置项手册中可以查到)
            coordinateSystem: "amap",// 高德地图坐标系
            effect: {// 线特效配置
                show: true,// 是否显示特效
                period: 3,// 特效动画时间
                trailLength: 0,// 特效尾迹长度
                symbol: "arrow",// 特效图形
                symbolSize: 15,// 特效图形大小
            },
            lineStyle: {// 线样式
                normal: {// 正常状态
                    color: "#FF0000",// 线颜色
                    width: 3,// 线宽
                    opacity: 0.5,// 线透明度
                    curveness: -0.2,// 线曲度
                },
            },
            data: [// 线数据
                [
                    ["116.372655", "40.036025"],// 起点
                    ["118.79901", "31.98436"],// 终点
                ],
            ],
        },
    ]
}

onMounted(() => {
    initMap();
})

function initMap() {
    window._AMapSecurityConfig = {
        securityJsCode: 'xxxxxxxxx', // 高德地图的code
    }
    AMapLoader.load({
        key:"xxxxxxxxx", // 申请好的Web端开发者Key，首次调用 load 时必填
        version:"2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        // plugins:[''], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
    }).then((AMap) => {
        let chart = echarts.init(document.getElementById("map"));
        chart.setOption(option);
        chart.getModel().getComponent('amap').getAMap();//获取高德地图实例
    });
}
</script>
<style scoped>
</style>

(3条消息) 在vue3项目中使用新版高德地图_vue3使用高德地图_开发那点事儿~的博客-CSDN博客

(3条消息) vue3中使用echarts和echarts自适应_vue3 tsecharts 自适应_开发那点事儿~的博客-CSDN博客