ts代码:
ngOnInit() {
this.map1 = L.map("mapdiv1").setView([38.93, 99.92], 8);
this.map2 = L.map('mapdiv2').setView([38.93, 99.92], 8);
var imgLayer = L.tileLayer.chinaProvider("TianDiTu.Satellite.Map", {}); //加天地图
var imgAnnLayer = L.tileLayer.chinaProvider("TianDiTu.Satellite.Annotion", {}); //加天地图
var imgGroup = L.layerGroup([imgLayer, imgAnnLayer]);
var imgLayer1 = L.tileLayer.chinaProvider("TianDiTu.Satellite.Map", {}); //加天地图
var imgAnnLayer1 = L.tileLayer.chinaProvider("TianDiTu.Satellite.Annotion", {}); //加天地图
var imgGroup1 = L.layerGroup([imgLayer1, imgAnnLayer1]);
imgGroup.addTo(this.map1);
this.map1.zoomControl.remove()
imgGroup1.addTo(this.map2);
var maps = [this.map1, this.map2];
this.map2.zoomControl.remove()
//地图联动实现
function maplink(e) {
var _this = this;
maps.map(function (t) {
t.setView(_this.getCenter(), _this.getZoom())
})
}
//绑定
maps.map(function (t) {
t.on({ drag: maplink, zoom: maplink })
})
}
html代码:
<div id="mapdiv2" class="mapBase1"/>
<div id="mapdiv1" class="mapBase1"/>
css代码:
.mapBase1 {
width: 50%;
height: 100%;
float: right;
}