Vue（二）：ECharts、高德地图 实现经纬度动态箭头指向

准备

​​npm i echarts-extension-amap​​​​import "echarts-extension-amap";​​

​​npm i echarts​​​​import echarts from "echarts";​​

​​npm i @amap/amap-jsapi-loader​​​​import AMapLoader from "@amap/amap-jsapi-loader";​​

展示

完整代码

<template>
    <div class="home">
        <div id="map"></div>
    </div>
</template>

<script>import AMapLoader from "@amap/amap-jsapi-loader";
import echarts from "echarts";
import "echarts-extension-amap";
// @ is an alias to /src
export default {
    name: "Home",
    data() {
        return {
            option: {
                //amap地图配置
                amap: {
                    center: [107, 37],
                    resizeEnable: true,
                    mapStyle: "amap://styles/light", //地图样式白色
                    zoom: 5, //缩放
                    viewMode: "3D", //是否启用3d地图
                    pitch: 15, //视角高度
                    skyColor: "#33216a",
                },
                animation: true,
                series: [
                    {
                        type: "lines",
                        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"],
                            ],
                        ],
                    },
                ],
            },
        };
    },
    created() {
        AMapLoader.load({
            key: "你的-高德key",                // 申请好的Web端开发者Key，首次调用 load 时必填
            version: "1.4.15",                                        // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
            plugins: [],                                            // 需要使用的的插件列表，如比例尺'AMap.Scale'等
            AMapUI: {                                                // 是否加载 AMapUI，缺省不加载
                version: "1.1",                                    // AMapUI 缺省 1.1
                plugins: [],                                        // 需要加载的 AMapUI ui插件
            },
            Loca: {                                                // 是否加载 Loca， 缺省不加载
                version: "1.3.2",                                    // Loca 版本，缺省 1.3.2
            },
        }).then((AMap) => {
            let chart = echarts.init(document.getElementById("map"));
            chart.setOption(this.option);
            chart.getModel().getComponent("amap").getAMap();
        });
    },
};</script>

<style lang="less" scoped>.home {
    height: calc(100% - 50px);
    margin: auto 10px;
    background-color: #fff;
    box-shadow: 0 0 6px 2px #c3c3c3;
}
#map {
    width: 100%;
    height: 100%;
    /deep/.amap-container {
        width: 100%;
        height: 100%;
        position: relative !important;
    }
}</style>