<template>
  <div class="map-container" id="map" style="width: calc(100%);height:100%;background: rgb(48, 65, 86)">
  </div>
</template>

<script>
export default {
  name: "MapGl",
  mounted() {
    this.loadMap()
  },
  data(){
    return {
      map:''
    }
  },
  methods: {
    loadMap() {
      return new Promise(resolve => {
        var normalMapm = L.tileLayer('http://t3.tianditu.com/vec_c/wmts?layer=vec&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=cb01ca3004c2ecfef2462b3900da786d', {
          maxZoom: 17,
          minZoom: 5,
          zoomOffset: 1
        })
        var normalMapa = L.tileLayer('http://t0.tianditu.gov.cn/cva_c/wmts?layer=cva&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=cb01ca3004c2ecfef2462b3900da786d', {
          maxZoom: 17,
          minZoom: 5,
          zoomOffset: 1
        })
        var imgMapm = L.tileLayer('http://t0.tianditu.gov.cn/img_c/wmts?layer=img&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=cb01ca3004c2ecfef2462b3900da786d', {
          maxZoom: 17,
          minZoom: 5,
          zoomOffset: 1
        })
        var imgMapa = L.tileLayer('http://t0.tianditu.gov.cn/cia_c/wmts?layer=cia&style=default&tilematrixset=c&Service=WMTS&Request=GetTile&Version=1.0.0&Format=tiles&TileMatrix={z}&TileCol={x}&TileRow={y}&tk=cb01ca3004c2ecfef2462b3900da786d', {
          maxZoom: 17,
          minZoom: 5,
          zoomOffset: 1
        })
        var normalMap = L.layerGroup([normalMapm, normalMapa]),
            imgMap = L.layerGroup([imgMapm, imgMapa]);
        var baseLayers = {"卫星": imgMap, "行政": normalMap};
        var overlayLayers = {}
        this.map = L.map("map", {
          center: [35.0109, 118.246909], // 地图中心
          zoom: 14, //缩放比列
          zoomControl: false, //禁用 + - 按钮
          doubleClickZoom: false, // 禁用双击放大
          attributionControl: false, // 移除右下角leaflet标识
          crs: L.CRS.EPSG4326, //设置坐标系4326
          layers: [imgMap],
        });
        L.control.layers(baseLayers, overlayLayers).addTo(this.map);
        // 设置绘制线条颜色
        this.map.pm.setPathOptions({
          color: "orange",
          fillColor: "green",
          fillOpacity: 0.4
        });
        this.map.pm.setLang("zh"); //设置语言  en, de, it, ru, ro, es, fr, pt_br, zh , nl
        resolve(this.map)
      })
    }
  }
}
</script>

<style scoped>
.map-container {
  width: 100%;
  height: 100%;
  background-color: #ffffff;
}
</style>