console
var { LMap, LTileLayer, LMarker, LPopup, LGeoJson } = Vue2Leaflet;
let campus = {
'type': 'Feature',
'properties': {http://jsrun.pro/YubKp/edit#
'popupContent': 'This is the Auraria West Campus',
'style': {
weight: 2,
color: '#999',
opacity: 1,
fillColor: '#B0DE5C',
fillOpacity: 0.8
}
},
'geometry': {
'type': 'MultiPolygon',
'coordinates': [
[
[
[-105.00432014465332, 39.74732195489861],
[-105.00715255737305, 39.74620006835170],
[-105.00921249389647, 39.74468219277038],
[-105.01067161560059, 39.74362625960105],
[-105.01195907592773, 39.74290029616054],
[-105.00989913940431, 39.74078835902781],
[-105.00758171081543, 39.74059036160317],
[-105.00346183776855, 39.74059036160317],
[-105.00097274780272, 39.74059036160317],
[-105.00062942504881, 39.74072235994946],
[-105.00020027160645, 39.74191033368865],
[-105.00071525573731, 39.74276830198601],
[-105.00097274780272, 39.74369225589818],
[-105.00097274780272, 39.74461619742136],
[-105.00123023986816, 39.74534214278395],
[-105.00183105468751, 39.74613407445653],
[-105.00432014465332, 39.74732195489861]
], [
[-105.00361204147337, 39.74354376414072],
[-105.00301122665405, 39.74278480127163],
[-105.00221729278564, 39.74316428375108],
[-105.00283956527711, 39.74390674342741],
[-105.00361204147337, 39.74354376414072]
]
], [
[
[-105.00942707061768, 39.73989736613708],
[-105.00942707061768, 39.73910536278566],
[-105.00685214996338, 39.73923736397631],
[-105.00384807586671, 39.73910536278566],
[-105.00174522399902, 39.73903936209552],
[-105.00041484832764, 39.73910536278566],
[-105.00041484832764, 39.73979836621592],
[-105.00535011291504, 39.73986436617916],
[-105.00942707061768, 39.73989736613708]
]
]
]
}
};
new Vue({
el: '#app',
components: { LMap, LTileLayer, LMarker, LPopup, LGeoJson },
computed: {
brigadeIcon: {
get() {
return L.divIcon({
iconUrl: this.iconUrl.brigade,
className: 'map-marker brigade',
html: `<div class="brigade map icon"><img src="${this.iconUrl.brigade}"></div>`
});
}
}
},
data() {
return {
zoom: 14,
center: [39.74310, -104.9999],
//center: L.latLng(47.413220, -1.219482),
url: 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
marker: L.latLng(47.413220, -1.219482),
marker2:[39.74310, -104.9999],
iconUrl: {
brigade: 'https://unpkg.com/leaflet@1.0.3/dist/images/marker-icon.png'
},
coors: {
geojson: campus,
options: {
pointToLayer: function (feature, latlng) {
return L.marker(latlng, { icon: baseballIcon });
},
onEachFeature: this.onEachFeature
}
}
}
},
mounted() {
//console.log("--22--")
let map = this.$refs.map.mapObject;
console.log(L)
var drawnItems = new L.FeatureGroup();
map.addLayer(drawnItems);
var drawControl = new L.Control.Draw({
edit: {
featureGroup: drawnItems
}
});
map.addControl(drawControl);
map.on('draw:editstop', function (e) {
console.log('draw:editstop=',e);
//var layers = e.layers;
//_this.isRegionEdit =true;
})
map.on('draw:created', function (e) {
console.log(e)
var type = e.layerType,
layer = e.layer;
if (type === 'marker') {
// Do marker specific actions
}
// Do whatever else you need to. (save to db; add to map etc)
map.addLayer(layer);
console.log(e.layer.getLatLngs())
});
map.on('draw:edited', function (e) {
var layers = e.layers;
var content = null;
layers.eachLayer(function (layer) {
//do whatever you want; most likely save back to db
content = getPopupContent(layer);
if (content !== null) {
layer.setPopupContent(content);
}
});
});
},
methods: {
onEachFeature(feature, layer) {
let layerContent = feature.properties.popupContent;
layer.bindPopup(layerContent);
}
}
});
<div id="app">
<div class="map">
<l-map ref="map" :zoom="zoom" :center="center">
<l-tile-layer :url="url" :attribution="attribution"></l-tile-layer>
<l-marker :lat-lng="marker2" :draggable="false" :icon="brigadeIcon">
<l-popup content="item.name"/>
</l-marker>
<l-geo-json
:geojson="coors.geojson"
:options="coors.options"
/>
</l-map>
</div>
</div>
.map{width:100%;height:500px;}