<template>
  <div style="width:100%;height:100%">
    <div id="map" ref="rootmap"></div>
  </div>
</template>

<script>
import "ol/ol.css";
import Map from "ol/Map";
// import TileLayer from "ol/layer/Tile";
// import ImageLayer from "ol/layer/Image";
import View from "ol/View";
// import ol from "ol";

// import {getTopLeft, getWidth} from "ol/extent";

// import ImageWMS from "ol/source/ImageWMS";
// import WMTS from "ol/source/WMTS";
// import TileWMS from "ol/source/TileWMS";
// import WMTSTileGrid from "ol/tilegrid/WMTS";
// ol.source.TileImage
// ol.layer.Tile
import {get as getProjection, transform} from "ol/proj";
import {TileGrid} from "ol/tilegrid/TileGrid";
import {TileImage} from "ol/source/TileImage";
import {XYZ} from "ol/source";
import {Tile} from "ol/layer";



// import {Vector as SourceVec} from "ol/source";
// import {Feature} from "ol";
// import {LineString, Point} from "ol/geom";
// import {Icon, Stroke, Style} from "ol/style";
// import {Vector as LayerVec} from "ol/layer";


export default {
  props: {

  },
  data() {
    return {
      map: null,
    };
  },
  mounted() {

    this.initdev();



    this.map.on("click", function (e) {


    });


    var view = this.map.getView();

    view.on('change:resolution', function (e) {

    });
    view.on('change:center', function (e) {

    });
    this.map.on('moveend', function (e) {

    });

  },
  methods: {
    transpoints: function (points, type) {
      if (false) {
        return points;
      } else {
        if (type == 1) {
          var pp = [];
          points.forEach(point => {
            pp.push(transform(point, "EPSG:3857", "EPSG:4326"));
          });
          return pp;
        } else {
          var pp = [];
          points.forEach(point => {
            pp.push(transform(point, "EPSG:4326", "EPSG:3857"));
          });
          return pp;
        }
      }
    },

    initdev: function () {

      // function getWMTSLayer(url, layer) {
      //   let key = "98ec3e37b32974c2d58ea1a790640fe7"
      //   let projection = getProjection("EPSG:3857");
      //   let projectionExtent = projection.getExtent();
      //   let size = getWidth(projectionExtent) / 256;

      //   function getResolutions() {
      //     let resolutions = [];
      //     for (let z = 1; z < 19; ++z) {
      //       resolutions[z] = size / Math.pow(2, z);
      //     }
      //     return resolutions
      //   }

      //   return new TileLayer({
      //     source: new WMTS({
      //       url: url,
      //       layer: layer,
      //       style: "default",
      //       matrixSet: "w",
      //       format: "tiles",
      //       tileGrid: new WMTSTileGrid({
      //         origin: getTopLeft(projectionExtent),
      //         resolutions: getResolutions(),
      //         matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19],
      //       }),
      //     }),

      //   })

      // }

      // var projection = getProjection("EPSG:3857");



      // const ign = getWMTSLayer('https://t{0-7}.tianditu.gov.cn/vec_w/wmts?tk=98ec3e37b32974c2d58ea1a790640fe7', 'vec');



      // var map = new Map({
      //   target: 'map',
      //   layers: [
      //     ign,
      //     getWMTSLayer('https://t{0-7}.tianditu.gov.cn/cva_w/wmts?tk=98ec3e37b32974c2d58ea1a790640fe7', 'cva'),
      //   ],
      //   view: new View({
      //     projection: projection
      //   })
      // });


      var projection = getProjection("EPSG:3857");
   const satellite = new Tile({ // 卫星地图
    visible: false, // 显示或隐藏（用于切换地图图层（卫星切换街道））
    source: new XYZ({
      attributions: '',
      url: 'https://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=6&x={x}&y={y}&z={z}&scl=1&ltype=10'
    })
  })
  const street = new Tile({ // 街道地图
    visible: true, // 显示或隐藏（用于切换地图图层（卫星切换街道））
    source: new XYZ({
      attributions: '',
      url: 'https://webst0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}'
    })
  })
  // 创建地图
  const map = new Map({
    target: 'map',
    layers: [ // 图层放置（类似有卫星图层，街道图层等）
      satellite,
      street
    ],
    view: new View({
      zoom: 11, // 当前缩放
      maxZoom: 16, // 最大缩放
      minZoom: 8, // 最小缩放
      projection: 'EPSG:4326',
      center: [121.65523,31.892831], // 中心坐标
    })
  })

  street.setVisible(false)
    satellite.setVisible(true)

      // map.getView().fit([75.0, 20.0, 135.0, 50.0], map.getSize());
      this.map = map;
      //  map.getView().setCenter(
      //     [118.642876, 31.970445]
      // );
      // map.getView().setCenter(this.transpoints([
      //   [118.642876, 31.970445]
      // ], 0)[0]);
      // map.getView().setZoom(13);
    },

  }
};
</script>

<style scoped>
#map {
  height: 100%;
}

</style>
