<template>
 <div>
    <div class="map" id="map" ref="map"></div>
    <iframe hidden="hidden" src="http://map.xmtfj.gov.cn/proxys/openApi/visitRecorder.aspx?system=智慧水土保持信息管理云平台"></iframe>
 </div>
</template>

<script>
import * as L from 'leaflet'
import * as Esri from 'esri-leaflet'
import "proj4";
import "proj4leaflet";
import 'leaflet.wmts'

L.esri = Esri
 export default {
   name: '',
   mounted() {
     this.loadMap()
   },
   methods: {
     loadMap2() {
       var map = L.map('map', {
            // crs: L.CRS.EPSG4326,s
            center: [24.485483, 118.085457],
            zoomControl: true
        });
        // var map = L.map(this.$refs.map).setView([37.75, -122.45], 12);

        // L.esri.basemapLayer('Topographic').addTo(map);

        // // L.esri.Vector.basemap('Newspaper').addTo(map);

        const token = 'KhTlmtGizEANsimdOfkRQmKaaGxT-MUMW85WHpmm9tRW1J5VN3NCJ832WDJK24VV_dqlf26M7BIamtX38rIvVw..';
        // // http://222.76.242.138
        // let url = 'http://222.76.242.138/arcgis/rest/services/DOM2017/MapServer?token='+token
        // L.esri.dynamicMapLayer({
        //    url: url
        // }).addTo(map)

        var matrixIds = [];
				for (var i = 0; i < 22; ++i) {
					matrixIds[i] = {
						identifier: "" + i,
						topLeftCorner: new L.LatLng(90, -180)
					};
				}

				//设置地图wmts瓦片地图加载配置
				var urlMap= 'http://222.76.242.138/arcgis/rest/services/CGCS_DOMMAP/MapServer/WMTS?token='+token//瓦片地图地址
				var wmtsOptionsMap = {
					// layer: '',//瓦片地图名称
					tileSize: 256, //切片大小
					format: "image/png",//瓦片图格式
					matrixIds: matrixIds,//可缩放
				}
				var wmtsMap = new L.TileLayer.WMTS(urlMap, wmtsOptionsMap)
				map.addLayer(wmtsMap)



        // L.esri.basemapLayer('Gray').addTo(map);

        // map.setView([38.83, -98.5], 7)

        // // var url = 'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Petroleum/KGS_OilGasFields_Kansas/MapServer/';
        // let url = 'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Petroleum/KGS_OilGasFields_Kansas/MapServer'
        // // let url = 'http://121.196.41.253:6080/arcgis/rest/services/shuibao2/MapServer/0'
        // L.esri.dynamicMapLayer({
        //   url: url,
        //   // opacity: 0.25,
        //   useCors: false
        // }).addTo(map);

        
      //  console.log(imgMap)
      // //  imgMap

      //  console.log(map)
        // map.addLayer(imgMap)
     },
     loadMap() {
        const mapConfig = {
          origin: [104.19500000, 35.13000000],
          EPSG: "EPSG:4490", //地图空间参考值
          epsginfo: '+proj=longlat +ellps=GRS80 +no_defs', //proj4描述
          resolutions: [
            1.40625,
            0.703125,
            0.3515625,
            0.17578125,
            0.087890625,
            0.0439453125,
            0.02197265625,
            0.010986328125,
            0.0054931640625,
            0.00274658203125,
            0.001373291015625,
            6.866455078125E-4,
            3.4332275390625E-4,
            1.71661376953125E-4,
            8.58306884765625E-5,
            4.291534423828125E-5,
            2.1457672119140625E-5,
            1.0728836059570312E-5,
            5.364418029785156E-6,
            2.682209064925356E-6,
            1.3411045324626732E-6
          ],
          center: [32.05898506104946, 118.83657915219665], //地图中心点
        }
        const  CRS = new L.Proj.CRS(mapConfig.EPSG,mapConfig.epsginfo,// EPSG:4490的PROJ.4描述
                        {
                            origin: mapConfig.origin,
                            resolutions: mapConfig.resolutions,
                        }
                    );
                    console.log(CRS,'CRS')
        let map = L.map('map',{
            crs: CRS,  // 定义的坐标系
            center: mapConfig.center,
            zoom: 15,
        });

        const token = 'KhTlmtGizEANsimdOfkRQvZ-6Kh34ULfOdrvhFP9WvUNIb9J6YGTy8gbUIofWRi-lkdLZynLOurzjGAiqA3DCA..';
        // const token = 'KhTlmtGizEANsimdOfkRQnglK8MEWkXfeJt0fvTFp4OW0xTpYvbgZu43Ch4Az_MsdzqfrqW7qEYCS0noH5tEzg..'
        // const token = 'KhTlmtGizEANsimdOfkRQnglK8MEWkXfeJt0fvTFp4OW0xTpYvbgZu43Ch4Az_MsdzqfrqW7qEYCS0noH5tEzg..'
        console.log(token,'token')
        // let url = 'http://dev.eginsoft.cn:6080/arcgis/rest/services/shuibao2/MapServer/10'
        // let url =  `http://222.76.242.138/arcgis/rest/services/HB/CGCS_DOMMAP/MapServer/WMTS/1.0.0?token=${token}`
        let url = `http://222.76.242.138/arcgis/rest/services/CGCS_DOMMAP/MapServer?token=${token}`
        // L.esri.featureLayer({url:url}).addTo(map);
        // L.esri.dynamicMapLayer({url:url}).addTo(map)
        // L.esri.tiledMapLayer({url:url,token: token}).addTo(map);

        // let url = 'http://dev.eginsoft.cn:6080/arcgis/services/Refuse/Refuse/MapServer/WMSServer'

        // url = 'http://222.76.242.138/arcgis/rest/services/DOM2008H/MapServer?f=json&token=QqN6u18qiRmWdAsA39OP3WmhdljKaGP-RPP8JpAhCmUMjyETqZz31-2R7pkJMg9FX5whgZO8iQ3cAANpkjt4TQ..'
        L.esri.tiledMapLayer({url:url}).addTo(map)
      
     }
   }
 }
</script>

<style scoped>
.map{
      width: 100%;
    height: 100vh;
}
</style>