<template lang="md">
#### 预览
<doc-preview>
  <sl-map  class="map" :center="center" :mapType="mapType"   @contextmenuPos="contextmenuPos" :minZoom="minZoom" :maxZoom="maxZoom" :zoom="zoom" :projection="projection" @ready="ready" @click="click" @dblclick="dblclick" @rightClick="rightClick"  ref="map">
  </sl-map>
 </doc-preview>
<script>
import Overlay from 'ol/Overlay'
// import axios from 'axios'
// import qs from 'qs'
// import paginationPanel from '@/components/paginationPanel.vue'
// import {lineListData} from './road.js'
// import {addVector} from '../base/poiQuery'
export default {
  data () {
    return {
       drawStyle:{//画时候的手型
          image: {
              src: 'data:image/png;base64, ',
              size: [30, 30],
              rotation: 0,
              opacity: 1
            },
            stroke: {
                color: "#FF5809",
                width: 4
            },
            fill: { color: '#dec674' }
       },
       defaultClusterPointStyle: {
         image: {
           icon: 'iconWIFI',
           color: 'green'
         }
       },
       style:{
         image: {
           icon: 'iconGunMachine',
           color: 'blue'
        }
      },
      velocity: '100',
      url:'http://172.20.36.63:8080/geoserver/wfs?service=wfs&version=1.1.0&request=GetFeature&typeNames=sailing:device_info&outputFormat=application/json&srsname=EPSG:4326',
      drawType:'Point',
      mapfrontVueComponent:{},
      activedEdit: true,
      edtiFeatures: [],
      id: "temp",
      type: 'LineString',
      visible:true,
      heatfeatures:[],
      radius:8,
      flashingObject:null,
      blur:8,
      lonAndLat:{
                  lon: 106.937265,
                  lat: 27.706626,
              },
      name: "临时图层",
      actived: false,
      measureActive: false,
      mapType: "3",
      projection: 'EPSG:3857',
      center: [10219363.15 ,2772103.49],//上海
      // center:[10406023.547916455,5287148.860693453],
      // center: [93.514313,42.837251],//哈密
      // center: [106.932276,27.708165],
      zoom:2,
      minZoom:1,
      maxZoom:20,
      freeHandFlag:false,
      menu:{},
      routeObj:{},
      movingLineObject:{},
      timerProvince:{},
      showLightCount:0,
      position: {'lon':121.098381,'lat':31.168805},
      features: [],
      drawFeatures: [],
      testFeatures1: [],
      testFeatures2: [],
      selectedRoute:"",
      route:'',
      freeHandLayer:{},
      timeFlag:false,
      poimap:{},
      timeWatch:{},
      timeWatch2:{},
      timeWatch3:{},
      stopRendingFlag:false,
      // serverurl:'http://172.20.36.63:7001/geometryGJC',
      serverurl:'http://127.0.0.1:7001/geometry',
      tablename:'qingpufinalroad',
      // tablename:'hamifinalroad',//hamifinalroad1为wgs84
      mapZoom:"15",
      mapCenter: "121.29949364962295,31.18793438654",
      isClear:false,
      poiMap:{},
      allCount:0,
      flashCount:0,
      diguiFlagWatchValue:false,
      resolution:[0.002121011546007801,0.0010605057730039005,0.0005302528865019488,0.00026512644325097414,0.00013256322162548715,0.00006628161081274347,0.000033140805406371734],
      routingArr:[],
      tileLayer:{},
      constantSpeedRouteArr:[],
      movingMap:{},
      isOpenScaleLine:true,//地图比例尺
      isOpenZoomSlider:false,//zoom控件
      isOpenOverview:false,//鹰眼缩略图
      isOpenFullScreen:true,//全屏
      drawLineCount:0,
      freeHandDrawRouteArr:[],
      // drawCount:0
      indexDBdb:null
  }
},
created(){
},
 watch:{
    // mapZoom(val) {
    //   this.zoom = parseInt(val)
    // },
    // selectedRoute(val){
    //   this.route = val
    // },
    // mapCenter(val){
    //   this.center =[parseFloat(val.split(",")[0]), parseFloat(val.split(",")[1])]
    // },
    // diguiFlagWatchValue(val){//画轨迹开始为false,若改为true则调用新的画线方法
    //     if(val==true){
    //        this.stopAndClear()
    //        this.diguiFlagWatchValue = false;
    //     }
    // }
  },
  methods: {
     ready(obj){
         var matrixIds =['0',  '1',  '2',  '3',  '4',  '5',  '6',  '7',  '8',  '9',  '10',  '11',  '12',  '13',  '14',  '15',  '16',  '17',  '18',  '19']
          var resolutions = [156543.03392804097,
                              78271.51696402048,
                              39135.75848201024,
                              19567.87924100512,
                              9783.93962050256,
                              4891.96981025128,
                              2445.98490512564,
                              1222.99245256282,
                              611.49622628141,
                              305.748113140705,
                              152.8740565703525,
                              76.43702828517625,
                              38.21851414258813,
                              19.109257071294063,
                              9.554628535647032,
                              4.777314267823516,
                              2.388657133911758,
                              1.194328566955879,
                              0.5971642834779395,
                              0.29858214173896974
                  ]
                  const map = this.map = obj.map
          const layer = this.createLayer(map, {isBaseMap:false, 
            type:this.MapServiceType.wmts, 
            config:{
                url: 'http://172.20.34.23:8090/iserver/services/map-china400/wmts100',
                matrixSet:'Custom_ChinaDark',
                layerName:'ChinaDark',//图层名
                format: 'image/png',//图片格式
                projection:'EPSG:3857',//投影坐标系设置矩阵
                resolutions:resolutions,//分辨率数组
                matrixIds: matrixIds,//矩阵标识列表，与地图级数保持一致
                tileOrigin:[-20037508, 20037508],
                //tileOrigins:undefined,
                origin: [9753174.27843552, 5748886.328199991],//切片原点（左上角）
                center:[9753274, 5438550],
                // extent:[
                //   -2.0037508342789248E7 ,-2.003750834278914E7
                // ,2.0037508342789244E7, 2.0037508342789087E7
                // ]
            }
        })
     }
  }
}
</script>
<style scoped>
        *{
          box-sizing: border-box;
        }
        html {
        height: 100%;
        background-color: #111;
        font-size: 10px;
        }
        body {
          background-image: linear-gradient(0deg, transparent 24%, rgba(32, 255, 77, 0.15) 25%, rgba(32, 255, 77, 0.15) 26%, transparent 27%, transparent 74%, rgba(32, 255, 77, 0.15) 75%, rgba(32, 255, 77, 0.15) 76%, transparent 77%, transparent), linear-gradient(90deg, transparent 24%, rgba(32, 255, 77, 0.15) 25%, rgba(32, 255, 77, 0.15) 26%, transparent 27%, transparent 74%, rgba(32, 255, 77, 0.15) 75%, rgba(32, 255, 77, 0.15) 76%, transparent 77%, transparent);
          background-size: 7rem 7rem;
          background-position: -5.2rem -5.2rem;
          width: 100%;
          height: 100%;
          position: relative;
          padding: 0;
          margin: 0;
          font-size: 1.6rem;
        }
        .lon-Lat{
          width: 250px;
          z-index: 100;
          position: absolute;
          bottom: 180px;
          left: calc(50% - 110px);
          font-weight: bolder;
        }
    .popupTable{
      border-collapse:collapse;
      table-layout:fixed;
      border-radius:5px;
      overflow:hidden;
      margin: 10px auto;
      border:2px solid #70aefb ;
      background-color: #328ef4;
      color: #c7dafb;
		}
	 .popupTable td,th{
		/* padding: 5px;
		width: 33%; */
		text-align: center;
		border:1px solid #70aefb ;
		vertical-align:middle;
		/* font-size: 15px; */
		width: 80%;
  }
	.table-color-green{
	 	background-color: green;
	 }
	.table-color-grey{
	 	  background-color:  #696969;
	 }
	.table-color-black{
	 	  background-color: black;
	 }
</style>
</style>