<template>
  <div id="centerMap" class="map"></div>
  <div ref="content"></div>
</template>
<script setup>
  import { ref, onMounted, nextTick } from 'vue';
  import 'leaflet/dist/leaflet.css';
  import * as L from 'leaflet';
  //   import 'leaflet.fullscreen/Control.FullScreen';
  //   import 'leaflet.fullscreen/Control.FullScreen.css';
  import 'leaflet-measure-path/leaflet-measure-path.css';
  import 'leaflet-measure-path/leaflet-measure-path.js';

  onMounted(async () => {
    await nextTick();
    initMap();
  });
  const map = ref('');
  const content = ref(null);
  function initMap() {
    map.value = L.map('centerMap', {
      center: [23.125178, 113.280637],
      zoom: 14,
      zoomControl: true,
      attributionControl: false,
      crs: L.CRS.EPSG4326, // 默认3857
      fullscreenControl: true,
      maxZoom: 17,
    });
    //定义一个比例尺控件
    let scale = L.control.scale();
    scale.addTo(map.value);

    // 这个 比例尺的
    scale.getContainer().childNodes[0].style.cssText =
      'margin-bottom:-4px;color:#FFF;text-shadow:none;border:2px solid #FFF;background:none;border-top:0px;';

    scale.getContainer().childNodes[1].hidden = true;

    // // 经纬度投影
    const IMG_C =
      'http://t1.tianditu.com/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=3cf92df1e46b9a576fa8d3f427030886';
    const CIA_C =
      'http://t1.tianditu.com/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=3cf92df1e46b9a576fa8d3f427030886';
    L.tileLayer(IMG_C, {
      zoomOffset: 1, // 经纬度投影打开
      maxZoom: 17,
      tileSize: 256,
    }).addTo(map.value);

    // L.tileLayer(CIA_C, {
    //   zoomOffset: 1, // 经纬度投影打开
    //   maxZoom: 17,
    //   tileSize: 256,
    // }).addTo(map.vue);

    position();
  }
  function position() {
    var mousePositionControl = L.control({
      position: 'bottomright',
    });

    mousePositionControl.onAdd = function (map) {
      var div = L.DomUtil.create('div', 'mouse-position');
      return div;
    };

    mousePositionControl.updatePosition = function (latlng) {
      var lat = latlng.lat.toFixed(5);
      var lng = latlng.lng.toFixed(5);

      content.value.innerHTML =
        '<div style="color:#FFF;margin-bottom:-10px;margin-right:20px;"><span>经度: ' +
        lng +
        '</span><span style="margin-left: 20px;">纬度: ' +
        lat +
        '</span></div>';
    };
    mousePositionControl.addTo(map.value);
    map.value.on('mousemove', function (e) {
      mousePositionControl.updatePosition(e.latlng);
    });
  }
</script>
<style>
  .map {
    height: 100%;
  }
</style>
