import 'ol/ol.css'
import { Map, View } from 'ol'
import { Tile as TileLayer } from 'ol/layer'
import XYZ from 'ol/source/XYZ'
// import { defaults as defaultControls } from 'ol/control'

export function baseLayer (type) {
  switch (type) {
    case 'td':
      return getTDMap()
    default:
      return getTDMap()
  }
}

function getTDMap () {
  return [
    new TileLayer({
      source: new XYZ({
        url: 'http://t4.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=88e2f1d5ab64a7477a7361edd6b5f68a'
      })
    }),
    new TileLayer({
      source: new XYZ({
        url: 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=88e2f1d5ab64a7477a7361edd6b5f68a'
      })
    })
  ]
}

export class VMap {
  map = {};
  static map = VMap
  constructor (target = 'map', option = {}) {
    const view = Object.assign({
      zoom: 12,
      center: [118.045456, 24.567489],
      projection: 'EPSG:4326'
    }, option.view)
    this.map = new Map({
      target: target,
      layers: baseLayer(),
      view: new View(view),
      controls: []
    })
  }
}
