Vue3+ECharts+高德地图JS API

Vue3+ECharts+高德地图JS API

1.导包

npm i @amap/amap-jsapi-loader --save

npm install echarts --save

2.创建组件AMapECharts.vue

<template>
    <div ref="el" :style="{ width: width, height: height, position: 'relative' }"></div>
</template>

<script setup lang='ts'>
import * as echarts from 'echarts';
import 'echarts-extension-amap';
import AMapLoader from '@amap/amap-jsapi-loader';
import { onMounted, onUnmounted, ref, watch } from 'vue';

const props = defineProps({
    width: {
        type: String,
        default: '100%'
    },
    height: {
        type: String,
        default: '400px'
    },
    // 是否开启监听图表容器的大小并改变图表大小
    resize: {
        type: Boolean,
        default: true
    },
    echartsOption: {
        type: Object,
        default: () => ({
            // 加载 amap 组件
            amap: {
                // 3D模式，无论你使用的是1.x版本还是2.x版本，都建议开启此项以获得更好的渲染体验
                viewMode: '3D',
                // 高德地图支持的初始化地图配置
                // 高德地图初始中心经纬度
                center: [108.39, 39.9],
                // 高德地图初始缩放级别
                zoom: 4,
                // 是否开启resize
                resizeEnable: true,
                // 自定义地图样式主题
                mapStyle: 'amap://styles/dark',
                // 移动过程中实时渲染 默认为true 如数据量较大 建议置为false
                renderOnMoving: true,
                // ECharts 图层的 zIndex 默认 2000
                // 从 v1.9.0 起 此配置项已被弃用 请使用 `echartsLayerInteractive` 代替
                // echartsLayerZIndex: 2019,
                // 设置 ECharts 图层是否可交互 默认为 true
                // 设置为 false 可实现高德地图自身图层交互
                // 此配置项从 v1.9.0 起开始支持
                echartsLayerInteractive: true,
                // 是否启用大数据模式 默认为 false
                // 此配置项从 v1.9.0 起开始支持
                largeMode: false
                // 说明：如果想要添加卫星、路网等图层
                // 暂时先不要使用layers配置，因为存在Bug
                // 建议使用amap.add的方式，使用方式参见最下方代码
            },
            series: [
                {
                    type: 'scatter',
                    // 使用高德地图坐标系
                    coordinateSystem: 'amap',
                    // 数据格式跟在 geo 坐标系上一样，每一项都是 [经度，纬度，数值大小，其它维度...]
                    data: [[115, 35, 18], [120.1, 30.2, 20]],
                    encode: {
                        value: 2
                    }
                }
            ]
        })
    }
})

const el = ref(null);
let myChart: any;

// 防抖函数
function debounce(func: Function, duration: number = 500) {
    let timeoutID: number;
    return function (...args: any) {
        // console.log(args);
        clearTimeout(timeoutID)
        timeoutID = setTimeout(() => {
            func.apply(this, args);
        }, duration);
    }
}

let d_resize = debounce(() => {
    myChart.resize();
}, 500);

function openResize() {
    // 监听页面的resize事件，重新改变图表大小
    window.addEventListener('resize', d_resize);
}
// 初始化echarts
function echartsInit() {
    myChart = echarts.init(el.value);
}
// 设置option
function echartsSetOption(option: Object) {
    myChart.setOption(option);
}
// 摧毁echarts
function echartsDestroy() {
    myChart && myChart.dispose();
}

// 进行一系列操作，包括创建echarts实例，绑定事件，重新绘制等
function echartsRun() {
    // // onload后才能访问window对象上的AMap
    // window.onload = function () {
    // 初始化一个echarts实例
    echartsInit();
    AMapLoader.load({
        key: "*******************", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale", "AMap.ToolBar", "AMap.ControlBar", "AMap.Geolocation", "AMap.MapType"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
    })
        .then((AMap) => {
            // 绘制图表
            echartsSetOption(props.echartsOption);
            // 监听图表容器的大小并改变图表大小
            props.resize && openResize();
            // 获取 ECharts 高德地图组件
            var amapComponent = myChart.getModel().getComponent('amap');
            // 获取高德地图实例，使用高德地图自带的控件(需要在高德地图js API script标签手动引入)
            var amap = amapComponent.getAMap();
            // 添加控件
            amap.addControl(new AMap.Scale());
            amap.addControl(new AMap.ToolBar({
                position: {
                    bottom: '110px',
                    right: '50px'
                }
            }));
            amap.addControl(new AMap.ControlBar());
            amap.addControl(new AMap.Geolocation());
            amap.addControl(new AMap.MapType());
            // 添加图层
            var satelliteLayer = new AMap.TileLayer.Satellite();
            var roadNetLayer = new AMap.TileLayer.RoadNet();
            const traffic = new AMap.TileLayer.Traffic({
                autoRefresh: true, //是否自动刷新，默认为false
                interval: 180, //刷新间隔，默认180s
            });
            // amap.add([satelliteLayer, roadNetLayer]);
            // amap.add([traffic]);
            //  添加一个 Marker
            amap.add(new AMap.Marker({
                position: [115, 35]
            }));
            // 禁用 ECharts 图层交互，从而使高德地图图层可以点击交互
            amapComponent.setEChartsLayerInteractive(false);
        })
        .catch((e) => {
            console.log(e);
        });

    // }
}

// 监听echartsOption，重新绘画
watch(props.echartsOption, () => {
    echartsSetOption(props.echartsOption);
});

onMounted(() => {
    echartsRun();
});
onUnmounted(() => {
    // 取消监听图表容器的大小，改变图表大小事件
    props.resize && window.removeEventListener('resize', d_resize);
    echartsDestroy();
});
</script>

<style></style>

以上组件的封装，请结合实际情况自行完善。

3.使用结果

参考文献

高德地图JS API结合Vue使用
Github Echarts高德地图扩展
Echarts地图示例