官网地址：快速上手 | L7

 CDN方式引入：

<head>
<! --引入最新版的L7--> 
<script src = 'https://unpkg.com/@antv/l7'></script>

<! --指定版本号引入L7--> 
<script src = 'https://unpkg.com/@antv/l7@2.0.11'></script>

</head>

 npm方式：

// L7 依赖
npm install --save @antv/l7

// 第三方底图依赖
npm install --save @antv/l7-maps;
<script setup>
import { onMounted } from 'vue'
import { Scene, PointLayer } from '@antv/l7';
import { GaodeMap } from '@antv/l7-maps';
onMounted(() => {
    const scene = new Scene({
        id: 'map',
        map: new GaodeMap({
            pitch: 0,
            type: 'amap',
            style: 'dark',
            center: [140.067171, 36.26186],
            zoom: 5.32,
            maxZoom: 10
        })
    });
    scene.on('loaded', () => {
        const plane = initPlane();
        fetch(
            'https://gw.alipayobjects.com/os/basement_prod/d3564b06-670f-46ea-8edb-842f7010a7c6.json' //支持多种地图数据GeoJson,CSV,JSon Image
        )
            .then(res => res.json())
            .then(data => {
                const pointLayer = new PointLayer({})
                    .source(data)
                    .shape('circle')
                    .size('mag', [1, 25])
                    .color('mag', mag => {
                        return mag > 4.5 ? '#5B8FF9' : '#5CCEA1';
                    })
                    .active(true)
                    .style({
                        opacity: 0.3,
                        strokeWidth: 1
                    });
                scene.addLayer(pointLayer);
                pointLayer.on('click', e => {
                    const { lng, lat } = e.lngLat;
                    scene.setCenter([lng, lat], {
                        padding: {
                            right: 120
                        }
                    });
                    plane.style.right = '0px';
                    plane.innerHTML = `
                        <p>click info</>
                        <p>featureId: ${e.featureId}</p>
                        <p>lng: ${lng}</p>
                        <p>lat: ${lat}</p>
                    `;
                });
                pointLayer.on('unclick', (e) => {
                    console.log(e)
                    const { lng, lat } = e.lngLat;
                    plane.style.right = '-120px';
                    scene.setCenter([lng, lat], {
                        padding: {
                            right: 0
                        }
                    });
                });
            });
    });

    function initPlane() {
        const el = document.createElement('div');
        el.style.background = '#fff';
        el.style.position = 'absolute';
        el.style.padding = '10px';
        el.style.top = '0';
        el.style.right = '-120px';
        el.style.width = '100px';
        el.style.height = '100%';
        el.style.zIndex = '10';
        el.style.transition = '0.5s';
        // el.innerText = '123'
        const wrap = document.getElementById('map');
        wrap.appendChild(el);
        return el;
    }
})
</script>

<template>
    <div class="map-page">
        <div id="map">
        </div>
    </div>
</template>

<style scoped lang="less">
.map-page {

    // overflow:hidden;
    position: relative;//地图父级盒子不加相对定位地图将会错位
    width: 100%;
    height: 100%;

    #map {}
}
</style>

 

 

 

 

注意：在构建地图父级盒子时需要加上position: relative,因为组件内已经把地图进行绝对定位，如果不这样做会造成地图和坐标点偏移

此篇代码是使用vue3+js写法，采用setup语法糖方式编写，个人喜欢这样编写

# vue.js # javascript # 前端
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue