<template>
  <div id="map"
       class="content" />
</template>

<script>
import normal_style from '../assets/js/normal_style.js'
import axios from 'axios'
export default {
  data () {
    return {
      map: null
    }
  },
  mounted () {
    this.initMap()
  },
  methods: {
    initMap () {
      const that = this
      that.map = new mapboxgl.Map({
        container: 'map',
        center: [120.476913, 31.416667],
        zoom: 5,
        style: {
          version: 8,
          name: 'Mapbox Streets',
          sources: {
            'osm-tiles': {
              type: 'raster',
              tiles: ['http://c.tile.openstreetmap.org/{z}/{x}/{y}.png'],

              tileSize: 256
            }
          },
          layers: [
            {
              id: '123',
              type: 'raster',
              source: 'osm-tiles',
              'source-layer': 'osmtiles'
            }
          ]
        }
        // style:normal_style
      })
    },
    loadWFS (url, option) {
      var geoJsonUrl =
        'http://192.168.11.35:8999/geoserver/wfs?service=WFS&version=1.0.0&request=getFeature&typeName=sz_pg:sz_pg_china_mb_china_poi&outputFormat=application/json'
      // 线 var geoJsonUrl = 'http://192.168.11.35:8999/geoserver/wfs?service=WFS&version=1.0.0&request=getFeature&typeName=sz_pg:sz_pg_mb_bg_line&outputFormat=application/json'
      // var geoJsonUrl = 'http://192.168.11.35:8999/geoserver/wfs?service=WFS&version=1.0.0&request=getFeature&typeName=sz_pg:sz_pg_mb_admin&outputFormat=application/json';
      // var geoJsonUrl = 'http://192.168.11.35:8999/geoserver/wfs?service=WFS&version=1.0.0&request=getFeature&typeName=sz_pg:sz_pg_mb_road&outputFormat=application/json';
      // var geoJsonUrl = 'http://192.168.11.35:8999/geoserver/wfs?service=WFS&version=1.0.0&request=getFeature&typeName=sz_pg:sz_pg_mb_label&outputFormat=application/json';
      // var geoJsonUrl = 'http://192.168.11.35:8999/geoserver/wfs?service=WFS&version=1.0.0&request=getFeature&typeName=sz_pg:sz_pg_mb_label&outputFormat=application/json';
      axios.get(geoJsonUrl).then((res) => {
        console.log(res)
        const features = res.data.features
        console.log(features, '元素层')
        const layerType = null
        const geometryType = features[0].geometry.type
        const addLayerOption = {
          id: 'points',
          type: layerType,
          source: {
            type: 'geojson',
            data: {
              type: 'FeatureCollection',
              features: features
            }
          },
          layout: {
            visibility: 'visible'
          }
        }
        if (geometryType == 'MultiLineString') {
          addLayerOption.type = 'line'
        } else if (geometryType == 'Line') {
          addLayerOption.type = 'line'
        } else if (geometryType == 'Point') {
          addLayerOption.type = 'circle'
        } else if (geometryType == ' MultiPoint') {
          addLayerOption.type = 'circle'
        } else if (geometryType == 'Polygon') {
          addLayerOption.type = 'fill'
          addLayerOption.paint = {
            'fill-color': 'rgba(200,100,240,0.4)',
            'fill-outline-color': 'rgba(200,100,240,1)'
          }
        } else if (geometryType == 'MultiPolygon') {
          addLayerOption.type = 'fill'
          addLayerOption.paint = {
            'fill-color': 'rgba(200,100,240,0.4)',
            'fill-outline-color': 'rgba(200,100,240,1)'
          }
        }

        this.map.addLayer(addLayerOption)
      })
    },
    loadWMS (url, option) {
      console.log('111')

      this.map.addSource('wms-source', {
        'type': 'raster',
        'tiles': [url],
        'tileSize': 512
      })
      this.map.addLayer({
        'id': 'wms-layer',
        'type': 'raster',
        'source': 'wms-source',
        'paint': {}
      })
    },
    loadWMTS (url, option) {
      this.map.addSource('wmts-source', {
        'type': 'raster',
        'tiles': ['http://192.168.11.35:8999/geoserver/ows?service=WMS&request=GetLegendGraphic&format=image%2Fpng&width=20&height=20&layer=dem_test%3Ajs'],

        'tileSize': 256
      })
      this.map.addLayer({
        'id': 'wmts-layer',
        'type': 'raster',
        'source': 'wmts-source',
        'paint': {
          'raster-opacity': 0.8
        }
      })
    },
    loadTMS (url, option) {
      var tmsUrl = 'http://192.168.11.35:8999/geoserver/gwc/service/tms/1.0.0/sz_pg%3Asz_pg_mb@EPSG%3A900913@pbf'

      this.map.addLayer({
        'id': 'tms-layer',
        'type': 'raster',
        'source': {
          'type': 'raster',
          'tiles': [tmsUrl]
        }

      })
    }
  }
}
</script>

<style lang="scss" scoped>
.content {
  width: 100%;
  height: 100%;
}
</style>
