import L from 'leaflet';
import 'leaflet-side-by-side';
// geoman
import '@geoman-io/leaflet-geoman-free';
import '@geoman-io/leaflet-geoman-free/dist/leaflet-geoman.css';
let L = this.L;
let _this = this;
let url = _this.districtUrl + '/region/{z}/{x}/{y}?code=100000';
let MainvectorTile = L.vectorGrid
.protobuf(url, {
rendererFactory: L.canvas.tile,
vectorTileLayerStyles: {
province: {
weight: 1, // 边线宽度
fillColor: '#85e0b7', // 填充颜色
color: '#BEBEBE', // 边线颜色
fill: true,
fillOpacity: 0.8, // 填充颜色透明度
},
points: {
weight: 1,
color: 'red',
opacity: 1,
fillColor: 'white',
fill: true,
radius: 2,
fillOpacity: 0.3,
},
},
interactive: true, // 开启VectorGrid触发mouse/pointer事件
getFeatureId: function (f) {
if (f.properties.center) {
let arr = f.properties.center.split(',');
arr[0] = parseFloat(arr[0].replace('{', ''));
arr[1] = parseFloat(arr[1].replace('}', ''));
let MyText = L.divIcon({
html: f.properties.name,
className: 'my-div-icon',
iconSize: 40,
});
L.marker([arr[1], arr[0]], { icon: MyText }).addTo(
_this.MainMapGroup
);
}
},
// tms: true // 如果使用 TMS,则必须开启
})
.addTo(this.MainMapGroup);
// this.MainMap.remove(MainvectorTile);
let self = this;
MainvectorTile.on('mouseover', function (e) {
// console.log(e.layer.properties);
let properties = e.layer.properties.adcode;
self.adcode = properties;
//console.log(properties);
});
MainvectorTile.on('click', function (e) {
// console.log(e.layer.properties + "xzq"); // adcode
});