leaflet
/*
* @Autor: Mr Lu
* @Version: 1.0
* @Date: 2019-12-03
* @LastEditors: OBKoro1
* @LastEditTime: 2019-12-11
* @Description: 地图标点
*/
<template>
<div>
<div id="image-map"></div>
<div class="flex flex-wrap">
<p
v-for="(point,index) in pointArray"
:key="index"
class="pointFlag"
:class="currentId==point.id?'active':''"
@click.stop="changeView(point)"
>
<label>{{point.id}}</label>
<span class="closeFlag" @click.stop="removeMarker(point)" v-show="currentId==point.id">
<i class="iconfont iconqingchu"></i>
</span>
</p>
</div>
</div>
</template>
<script>
import L from "leaflet";
import "leaflet/dist/leaflet.css";
export default {
name: "CopyMe",
components: {},
data() {
return {
map: null,
i: 1,
url: require("./a.jpg"),
currentId: "",
pointArray: []
};
},
computed: {},
created() {},
mounted() {
this.imgLoad(this.url);
},
watch: {},
methods: {
skipPage(item) {
this.$router.push({
name: item.path
});
},
imgLoad(url) {
var img = new Image();
img.src = url;
if (img.complete) {
this.initMap(img.width, img.height);
} else {
img.onload = () => {
this.initMap(img.width, img.height);
img.onload = null;
};
}
},
initMap(w, h) {
var bounds = [[0, 0], [h, w]];
this.map = L.map("image-map", {
crs: L.CRS.Simple,
maxZoom: 20,
minZoom: -4,
maxBounds: bounds,
center: [0, 0],
zoomControl: false,
zoomAnimationThreshold: 20
});
this.map.getContainer().style.width = "100%";
this.map.getContainer().style.height = 300 + "px";
this.map.fitBounds(bounds);
//this.map.setMaxBounds(bounds);
var image = L.imageOverlay(this.url, bounds, {
interactive: true
}).addTo(this.map);
image.on("click", this.onMapClick);
this.reshowMarker();
},
onMapClick(e) {
this.addMarker(e.latlng.lat, e.latlng.lng);
},
reshowMarker() {
var points = [
{ id: 1, lat: 564, lng: 488 },
{ id: 2, lat: 552, lng: 796 },
{ id: 3, lat: 320, lng: 552 }
];
if (points.length) {
points.forEach(item => {
this.addMarker(item.lat, item.lng);
});
}
},
changeView(item) {
this.currentId = item.id;
this.map.setView([item.lat, item.lng], 1);
},
removeMarker(obj) {
this.currentId = "";
let removeIndex = this.pointArray.findIndex(item => item.id == obj.id);
if (removeIndex != -1) {
this.pointArray[removeIndex].mark.remove();
this.pointArray.splice(removeIndex, 1);
this.pointArray.forEach((item, index) => {
if (item.id > obj.id) {
item.id = item.id - 1;
item.mark.bindTooltip(String(item.id)).openTooltip();
}
});
this.map.setView([0, 0], -2);
}
},
addMarker(lat, lng) {
let pointIndex = this.pointArray.length;
var myIcon = L.divIcon({ className: "add_point_blue" });
var mark = L.marker([lat, lng], { icon: myIcon }).addTo(this.map);
mark
.bindTooltip((pointIndex + 1).toString(), {
offset: [0, -6],
direction: "center",
permanent: true,
className: "leaflet-label"
})
.openTooltip();
this.pointArray.push({
id: pointIndex + 1,
mark: mark,
lat,
lng
});
//console.log(JSON.stringify(this.pointArray));
}
},
destroyed() {}
};
</script>
<style lang="scss">
#image-map {
width: 100%;
height: 3rem;
margin-bottom: 10px;
background: #fff;
.leaflet-control {
display: none;
}
}
.leaflet-label {
height: 0.3rem;
min-width: 0.3rem;
font-size: 0.13rem;
display: flex;
color: #fff;
background: rgba(0, 128, 203, 1);
justify-content: center;
align-items: center;
border-radius: 50%;
}
.add_point_blue {
width: 0.1rem;
height: 0.1rem;
color: #fff;
/* border-radius: 50%; */
background: transparent;
}
.pointFlag {
width: 14%;
height: 0.5rem;
display: flex;
justify-content: center;
align-items: center;
margin-left: 0.05rem;
margin-right: 0.05rem;
margin-bottom: 0.1rem;
background: #ddd;
position: relative;
&.active {
background: #fff;
}
.closeFlag {
position: absolute;
right: -5px;
top: -5px;
width: 15px;
height: 15px;
display: flex;
justify-content: center;
align-items: center;
}
.closeFlag.active {
background: #fff;
}
}
</style>
