leaflet双屏,双图绑定,双图联动 (每天进步一点点)

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;
}
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值