高德地图2.0api截图 & EchartsJs截图相关

截图功能实现

安装依赖

npm install @amap/screenshot 
// 截图功能官方文档
https://github.com/AMap-Web/amap-screenshot

import { Screenshot } from '@amap/screenshot' // 高德地图2.0api截图
const wenduChart = ref(null);
const shiduChart = ref(null);

// 高德地图api部分
const huizhiMap = () => {
    window._AMapSecurityConfig = {
        securityJsCode: "gaode_apiPassword",
    };

    AMapLoader.load({
        key: "gaode_apiKey", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale"],
    }).then((AMap) => {
        map = new AMap.Map("map", {
            // 设置地图容器id
            viewMode: "3D", // 是否为3D地图模式
            zoom: 11, // 初始化地图级别
            center: [116.397428, 39.90923], // 初始化地图中心点位置
            // 关键配置 需要在此处进行配置 ！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！
            WebGLParams: {
                preserveDrawingBuffer: true
            }
        });

        var polyline = new AMap.Polyline({
            path: [[116.397428, 39.90923], [117.397428, 38.90923]],
            strokeColor: "#3366FF", // 线颜色
            strokeWeight: 5,     // 线宽
            strokeStyle: "solid", // 线样式（solid|dashed）
            strokeOpacity: 0.8,   // 线透明度
        });



        map.add(polyline);
    }).catch((e) => {
        console.log(e);
    });
}
// 湿度图标绘制 这边只放一个 看看例子就行）
const shiduEcharts = () => {
    var chartDom = document.getElementById('shidu');
    shiduChart.value = echarts.init(chartDom);
    var option;

    option = {
        title: {
            text: '湿度曲线图'
        },
        tooltip: {
            trigger: 'axis'
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: shidu.time

        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                name: '湿度',
                type: 'line',
                stack: 'Total',
                data: shidu.data
            }
        ]
    };

    option && shiduChart.value.setOption(option);
}

关键代码部分

其中 高德地图使用的是第三方库 详见上方

EcartsJs 保存使用的是 EcartsJs 的截图方法

// 关键代码部分
const exportChartsToBase64 = () => {
    var wendu = new Image();
    wendu.src = wenduChart.value.getDataURL({
        pixelRatio: 2,
        backgroundColor: '#fff'
    });

    var shidu = new Image();
    shidu.src = shiduChart.value.getDataURL({
        pixelRatio: 2,
        backgroundColor: '#fff'
    });

    const screenshot = new Screenshot(map)

    screenshot.toDataURL().then(url => {
        console.log('地图截图api: ', url)
    })

    console.log('echartsjs 图表截图',wendu);
    console.log('echartsjs 图表截图',shidu);
};