地图

基础示例

内置在线地图可能需要https支持，根据实际情况使用

<template>
    <div style="height: 300px;">
        <LeafLet @drag="drag" :options="{ center: [34.265619, 108.953509], zoom: 18 }">
            <LTileLayer :url="mapServices.GaoDe.Satellite.Map"
                :options="{ maxZoom: 18, minZoom: 2, subdomains: mapServices.GaoDe.Subdomains }"></LTileLayer>
            <LTileLayer :url="mapServices.GaoDe.Satellite.Annotion"
                :options="{ maxZoom: 18, minZoom: 2, subdomains: mapServices.GaoDe.Subdomains }"></LTileLayer>
        </LeafLet>
    </div>
</template>
<script setup lang="ts">
import { LeafLet, LTileLayer, mapServices } from "@howuse/leaflet"

function drag(e) {
    console.log(e)
}
</script>

多边形

<template>
    <div style="height: 300px;">
        <LeafLet :options="{ center: [34.25958194852398, 108.94701969612933], zoom: 16 }" :coordTransform="coordTransform">
            <LTileLayer :url="mapServices.GaoDe.Normal.Map" :options="{ maxZoom: 18, minZoom: 2 }">
            </LTileLayer>
            <LPolygon
                :latlngs="[[34.266548, 108.951741], [34.266608, 108.955064], [34.264475, 108.955253], [34.26446, 108.952028]]"
                :options="{
                    color: 'red',
                }">
            </LPolygon>
        </LeafLet>
    </div>
</template>
<script setup lang="ts">
import { type CoordTransformType, LeafLet, LTileLayer, mapServices, LPolygon } from "@howuse/leaflet"
import { ref } from "vue";

const coordTransform = ref<CoordTransformType | undefined>('wgs84tobd09')

</script>

点标记

<template>
    <div style="height: 300px;">
        <LeafLet :options="{ center: [34.25958194852398, 108.94701969612933], zoom: 16 }" :coordTransform="coordTransform">
            <LTileLayer :url="mapServices.GaoDe.Normal.Map" :options="{ maxZoom: 18, minZoom: 2 }">
            </LTileLayer>
            <LMarker :latlng="[34.266548, 108.951741]">
            </LMarker>
            <LMarker :latlng="[34.266608, 108.955064]">
            </LMarker>
            <LMarker :latlng="[34.264475, 108.955253]">
            </LMarker>
            <LMarker :latlng="[34.26446, 108.952028]">
            </LMarker>
        </LeafLet>
    </div>
</template>
<script setup lang="ts">
import { type CoordTransformType, LeafLet, LTileLayer, mapServices, LMarker } from "@howuse/leaflet"
import { ref } from "vue";

const coordTransform = ref<CoordTransformType | undefined>('wgs84tobd09')

</script>

点标记绑定弹窗

点击坐标查看绑定的弹窗信息

<template>
    <div style="height: 300px;">
        <LeafLet :options="{ center: [34.25958194852398, 108.94701969612933], zoom: 16 }" :coordTransform="coordTransform">
            <LTileLayer :url="mapServices.GaoDe.Normal.Map" :options="{ maxZoom: 18, minZoom: 2 }">
            </LTileLayer>
            <LMarker :latlng="[34.266548, 108.951741]">
                <LPopup>
                    <div>这里是测试内容</div>
                </LPopup>
            </LMarker>
            <LMarker :latlng="[34.266548, 108.952741]">
                <LPopup>
                    <div>这里是测试内容222</div>
                </LPopup>
            </LMarker>
        </LeafLet>
    </div>
</template>
<script setup lang="ts">
import { type CoordTransformType, LeafLet, LTileLayer, mapServices, LMarker, LPopup } from "@howuse/leaflet"
import { ref } from "vue";

const coordTransform = ref<CoordTransformType | undefined>('wgs84tobd09')

</script>

拖动点示例

<template>
    <div>
        <LDragItem :data="1234">
            <span>
                <img src="/leaflet/marker-icon.png">
            </span>
        </LDragItem>
    </div>
    <div style="height: 300px;">
        <LeafLet :options="{ center: [34.25958194852398, 108.94701969612933], zoom: 16 }" @drop="drop">
            <LTileLayer :url="mapServices.GaoDe.Normal.Map" :options="{ maxZoom: 18, minZoom: 2 }">
            </LTileLayer>
            <LMarker v-for="latlng in dragResult" :latlng="[latlng.lat, latlng.lng]" :options="{ draggable: true }"
                @drag="drag">
            </LMarker>
        </LeafLet>
    </div>
</template>
<script setup lang="ts">
import { LeafLet, LTileLayer, mapServices, LMarker, LDragItem, type DropEventedExtra } from "@howuse/leaflet"
import { ref } from "vue";

const dragResult = ref<L.LatLng[]>([])

function drop(e: DragEvent, args: DropEventedExtra) {
    console.log(args.data) // 获取绑定的data数据
    dragResult.value.push(args.latlon)
}

function drag(e) {
    console.log(e.target.getLatLng()) // 获取拖拽之后的坐标
}
</script>

弹窗

<template>
    <div style="height: 300px;">
        <LeafLet :options="{ center: [34.265619, 108.953509], zoom: 18 }">
            <LTileLayer :url="mapServices.GaoDe.Normal.Map" :options="{ maxZoom: 18, minZoom: 2 }">
            </LTileLayer>
            <LPopup :latlng="[34.265709, 108.95372]" :options="{ closeOnClick: false }" v-model:visible="visible">
                <div>这是一个段落</div>
                <div>这是一个段落</div>
                <div>这是一个段落</div>
                <div>这是一个段落</div>
            </LPopup>
        </LeafLet>
        <ElButton @click="visible = true" v-if="!visible">打开弹窗</ElButton>
        <ElButton @click="visible = false" v-else>关闭弹窗</ElButton>
    </div>
</template>
<script setup lang="ts">
import { LeafLet, LTileLayer, LPopup, mapServices } from "@howuse/leaflet"
import { ElButton } from "element-plus"
import { ref } from "vue";

const visible = ref(true)
</script>

地图纠偏

地图同一个点展示位置存在偏差，需要纠正大多数转换不是特别准确，但是尽可能的缩小偏差。百度官方坐标系转高德坐标系，https://lbsyun.baidu.com/jsdemo3.0.htm#coodv3-0 百度坐标本身是在火星坐标之上再次加密形成，较难转换，实际使用过程中视具体情况而定。

<template>
    <div style="height: 300px;">
        <ElSpace>
            <ElButton @click="changeMap('baidu')">百度地图</ElButton>
            <ElButton @click="changeMap('gaode')">高德地图</ElButton>
            <ElButton @click="changeMap('tencent')">腾讯地图</ElButton>
            <ElButton @click="changeMap('google')">谷歌地图</ElButton>
        </ElSpace>
        <LeafLet @drag="drag" :options="{ center: [34.25958194852398, 108.94701969612933], zoom: 18 }"
            :coordTransform="coordTransform">
            <LTileLayer :url="url" :options="{ maxZoom: 18, minZoom: 2 }">
            </LTileLayer>
            <LMarker :latlng="[34.25958194852398, 108.94701969612933]" :coordTransform="coordTransform"></LMarker>
        </LeafLet>
    </div>
</template>
<script setup lang="ts">
import { ElSpace, ElButton } from "element-plus"
import { type CoordTransformType, LeafLet, LTileLayer, mapServices, LMarker } from "@howuse/leaflet"
import { ref } from "vue";

const url = ref(mapServices.Baidu.Normal.Map)
const coordTransform = ref<CoordTransformType | undefined>('wgs84tobd09')

function changeMap(map: "baidu" | "gaode" | "tencent" | "google") {
    switch (map) {
        case "baidu":
            url.value = mapServices.Baidu.Normal.Map
            coordTransform.value = "wgs84tobd09"
            break
        case "gaode":
            url.value = mapServices.GaoDe.Normal.Map
            coordTransform.value = "wgs84togcj02"
            break
        case "tencent":
            url.value = mapServices.Tencent.Normal.Map
            coordTransform.value = "wgs84togcj02"
            break;
        case "google":
            url.value = mapServices.Google.Normal.Map
            coordTransform.value = undefined
            break;
    }
}

function drag(e) {
    console.log(e)
}
</script>

参考项目

leaflet 点、线、面绘制 https://www.geoman.io/docs

Element-Plus

leaflet 地图

地图

基础示例

多边形

点标记

点标记绑定弹窗

拖动点示例

弹窗

地图纠偏

参考项目

地图 ​

基础示例 ​

多边形 ​

点标记 ​

点标记绑定弹窗 ​

拖动点示例 ​

弹窗 ​

地图纠偏 ​

参考项目 ​

地图

基础示例

多边形

点标记

点标记绑定弹窗

拖动点示例

弹窗

地图纠偏

参考项目