在vue中使用laeflet

在public中引入jquery和laeflet的js以及css

 <script src="./jquery-1.8.2.js"></script>
    <!-- <script src="./leaflet.markercluster-src.js"></script> -->
    <script src="./realworld.388.js"></script>
    <script src="./shapefile.js"></script>
    <script src="./leaflet-src.js"></script>

    
    <link rel="stylesheet" href="./screen.css">
    <link rel="stylesheet" href="./leaflet.css">
    <link rel="stylesheet" href="./MarkerCluster.css">
    <link rel="stylesheet" href="./MarkerCluster.Default.css">

    <script src="./countries.js"></script>
    <script src="./province.js"></script>

在要显示地图的页面引入代码

<template>
    <div id="app">
        <div id="map" style="background-color: #679EE3"></div>
    </div>
</template>

<style lang="scss">
</style>

<script>
export default {
    name: "app",
    data() {
        return {};
    },
    mounted() {
        // console.log($);
        var tiles = L.tileLayer("", {
                maxZoom: 18,
            }),
            latlng = L.latLng(39.9, 116.3);
        console.log(tiles);

        var map = L.map("map", { center: latlng, zoom: 5, layers: [tiles] });
        console.log(map);

        function style_countries(feature) {
            return {
                fillColor: "#ffffff",
                weight: 1,
                opacity: 1,
                color: "#f2f2f2",
                // dashArray: '3',
                fillOpacity: 0.7,
            };
        }

        function style_province(feature) {
            return {
                fillColor: "#ffffff",
                weight: 1,
                opacity: 1,
                color: "#f2f2f2",
                fillOpacity: 1,
            };
        }

        //显示底图图层
        var json_countries = L.geoJson(countries, {
            style: style_countries,
        })
            .bindTooltip(function (layer) {
                //鼠标放置显示一个提示框
                return layer.feature.properties.NAME_ZH;
            })
            .addTo(map);
        console.log(json_countries);

        //
        var json_provices = L.geoJson(
            province,
            {
                style: style_province,
            },
            {
                minZoom: 10,
                maxZoom: 18,
            }
        )
            .bindTooltip(function (layer) {
                return layer.feature.properties.name;
            })
            .addTo(map);
        console.log(json_provices);
        //
        //
        //
        //
        //
    },
};
</script>

就可以得到以下结果