在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>
就可以得到以下结果