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

<script>

import TMap from "../plugin/index";

export default {
  name: "theme",
  data() {
    return {
      url:'http://10.10.64.30:8009/geoserver/wfs?typeName=world:hubei',
      url2:'http://10.10.64.30:8009/geoserver/wfs?typeName=world:metro_point'
    }
  },
  methods: {
    InitMap() {
      let map = new TMap.map({
        url: "http://10.10.64.30:8009/geoserver/gwc/service/wmts/?layer=world:world_info&format=image/png",
        crs: 'EPSG:4326',
        center: [114, 30],
        zoom: 4,
        maxZoom: 18,
        minZoom: 0,
        target: 'map',
      })
      this.map = map
      this.vectorLayer2 = new TMap.vectorLayer({url: this.url}).addTo(map)


      let theme = {
        type:'rankArea',
        field:'people',
        text:{
          key: "people",
          fontColor: "#ffffff",
          fontSize: "20px",
        },
        style:{
          '0': {
            fillColor: "#4ce165"
          },
          '50': {
            fillColor: "#3eb54a"
          },
          '100': {
            fillColor: "#dedb5c"
          },
          '200': {
            fillColor: "#f57829"
          },
          '300': {
            fillColor: "#f80f69"
          }
        }
      }

      let styleAreaMap = '<?xml version="1.0" encoding="UTF-8" standalone="yes"?>' +
        '<StyledLayerDescriptor version="1.0.0" xsi:schemaLocation="http://www.opengis.net/sld StyledLayerDescriptor.xsd" xmlns="http://www.opengis.net/sld" xmlns:ogc="http://www.opengis.net/ogc" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">' +
        '  <NamedLayer>' +
        '    <Name>style1</Name>' +
        '    <UserStyle>' +
        '      <Name>style1</Name>' +
        '      <Title>style1</Title>' +
        '      <FeatureTypeStyle>' +
        '        <Rule>' +
        '          <Name>rank0</Name>' +
        '          <Filter xmlns="http://www.opengis.net/ogc">' +
        '            <And>' +
        '              <PropertyIsGreaterThan>' +
        '                <PropertyName>people</PropertyName>' +
        '                <Literal>0</Literal>' +
        '              </PropertyIsGreaterThan>' +
        '              <PropertyIsLessThanOrEqualTo>' +
        '                <PropertyName>people</PropertyName>' +
        '                <Literal>64</Literal>' +
        '              </PropertyIsLessThanOrEqualTo>' +
        '            </And>' +
        '          </Filter>' +
        '          <PolygonSymbolizer>' +
        '            <Fill>' +
        '              <CssParameter name="fill">#6ae9ff</CssParameter>' +
        '              <CssParameter name="fill-opacity">0.8</CssParameter>' +
        '            </Fill>' +
        '            <Stroke>' +
        '              <CssParameter name="stroke">#fff</CssParameter>' +
        '              <CssParameter name="stroke-width">1</CssParameter>' +
        '            </Stroke>' +
        '          </PolygonSymbolizer>' +
        '          <TextSymbolizer>' +
        '            <Label>' +
        '              <ogc:PropertyName>name</ogc:PropertyName>' +
        '            </Label>' +
        '            <Font>' +
        '              <CssParameter name="font-family">Microsoft YaHei UI</CssParameter>' +
        '              <CssParameter name="font-style">normal</CssParameter>' +
        '              <CssParameter name="font-size">20</CssParameter>' +
        '            </Font>' +
        '            <LabelPlacement>' +
        '              <PointPlacement>' +
        '                <Displacement>' +
        '                  <DisplacementX>0</DisplacementX>' +
        '                  <DisplacementY>0</DisplacementY>' +
        '                </Displacement>' +
        '                <Rotation>0</Rotation>' +
        '              </PointPlacement>' +
        '            </LabelPlacement>' +
        '            <Fill>' +
        '              <CssParameter name="fill">#ffffff</CssParameter>' +
        '            </Fill>' +
        '            <Halo>' +
        '              <Fill>' +
        '                <CssParameter name="fill">transparent</CssParameter>' +
        '              </Fill>' +
        '            </Halo>' +
        '          </TextSymbolizer>' +
        '        </Rule>' +
        '        <Rule>' +
        '          <Name>rank1</Name>' +
        '          <Filter xmlns="http://www.opengis.net/ogc">' +
        '            <And>' +
        '              <PropertyIsGreaterThan>' +
        '                <PropertyName>people</PropertyName>' +
        '                <Literal>64</Literal>' +
        '              </PropertyIsGreaterThan>' +
        '              <PropertyIsLessThanOrEqualTo>' +
        '                <PropertyName>people</PropertyName>' +
        '                <Literal>128</Literal>' +
        '              </PropertyIsLessThanOrEqualTo>' +
        '            </And>' +
        '          </Filter>' +
        '          <PolygonSymbolizer>' +
        '            <Fill>' +
        '              <CssParameter name="fill">#5bd0f4</CssParameter>' +
        '              <CssParameter name="fill-opacity">0.8</CssParameter>' +
        '            </Fill>' +
        '            <Stroke>' +
        '              <CssParameter name="stroke">#fff</CssParameter>' +
        '              <CssParameter name="stroke-width">1</CssParameter>' +
        '            </Stroke>' +
        '          </PolygonSymbolizer>' +
        '          <TextSymbolizer>' +
        '            <Label>' +
        '              <ogc:PropertyName>name</ogc:PropertyName>' +
        '            </Label>' +
        '            <Font>' +
        '              <CssParameter name="font-family">Microsoft YaHei UI</CssParameter>' +
        '              <CssParameter name="font-style">normal</CssParameter>' +
        '              <CssParameter name="font-size">20</CssParameter>' +
        '            </Font>' +
        '            <LabelPlacement>' +
        '              <PointPlacement>' +
        '                <Displacement>' +
        '                  <DisplacementX>0</DisplacementX>' +
        '                  <DisplacementY>0</DisplacementY>' +
        '                </Displacement>' +
        '                <Rotation>0</Rotation>' +
        '              </PointPlacement>' +
        '            </LabelPlacement>' +
        '            <Fill>' +
        '              <CssParameter name="fill">#ffffff</CssParameter>' +
        '            </Fill>' +
        '            <Halo>' +
        '              <Fill>' +
        '                <CssParameter name="fill">transparent</CssParameter>' +
        '              </Fill>' +
        '            </Halo>' +
        '          </TextSymbolizer>' +
        '        </Rule>' +
        '        <Rule>' +
        '          <Name>rank2</Name>' +
        '          <Filter xmlns="http://www.opengis.net/ogc">' +
        '            <And>' +
        '              <PropertyIsGreaterThan>' +
        '                <PropertyName>people</PropertyName>' +
        '                <Literal>128</Literal>' +
        '              </PropertyIsGreaterThan>' +
        '              <PropertyIsLessThanOrEqualTo>' +
        '                <PropertyName>people</PropertyName>' +
        '                <Literal>192</Literal>' +
        '              </PropertyIsLessThanOrEqualTo>' +
        '            </And>' +
        '          </Filter>' +
        '          <PolygonSymbolizer>' +
        '            <Fill>' +
        '              <CssParameter name="fill">#4cb7ea</CssParameter>' +
        '              <CssParameter name="fill-opacity">0.8</CssParameter>' +
        '            </Fill>' +
        '            <Stroke>' +
        '              <CssParameter name="stroke">#fff</CssParameter>' +
        '              <CssParameter name="stroke-width">1</CssParameter>' +
        '            </Stroke>' +
        '          </PolygonSymbolizer>' +
        '          <TextSymbolizer>' +
        '            <Label>' +
        '              <ogc:PropertyName>name</ogc:PropertyName>' +
        '            </Label>' +
        '            <Font>' +
        '              <CssParameter name="font-family">Microsoft YaHei UI</CssParameter>' +
        '              <CssParameter name="font-style">normal</CssParameter>' +
        '              <CssParameter name="font-size">20</CssParameter>' +
        '            </Font>' +
        '            <LabelPlacement>' +
        '              <PointPlacement>' +
        '                <Displacement>' +
        '                  <DisplacementX>0</DisplacementX>' +
        '                  <DisplacementY>0</DisplacementY>' +
        '                </Displacement>' +
        '                <Rotation>0</Rotation>' +
        '              </PointPlacement>' +
        '            </LabelPlacement>' +
        '            <Fill>' +
        '              <CssParameter name="fill">#ffffff</CssParameter>' +
        '            </Fill>' +
        '            <Halo>' +
        '              <Fill>' +
        '                <CssParameter name="fill">transparent</CssParameter>' +
        '              </Fill>' +
        '            </Halo>' +
        '          </TextSymbolizer>' +
        '        </Rule>' +
        '        <Rule>' +
        '          <Name>rank3</Name>' +
        '          <Filter xmlns="http://www.opengis.net/ogc">' +
        '            <And>' +
        '              <PropertyIsGreaterThan>' +
        '                <PropertyName>people</PropertyName>' +
        '                <Literal>192</Literal>' +
        '              </PropertyIsGreaterThan>' +
        '              <PropertyIsLessThanOrEqualTo>' +
        '                <PropertyName>people</PropertyName>' +
        '                <Literal>256</Literal>' +
        '              </PropertyIsLessThanOrEqualTo>' +
        '            </And>' +
        '          </Filter>' +
        '          <PolygonSymbolizer>' +
        '            <Fill>' +
        '              <CssParameter name="fill">#3d9ee0</CssParameter>' +
        '              <CssParameter name="fill-opacity">0.8</CssParameter>' +
        '            </Fill>' +
        '            <Stroke>' +
        '              <CssParameter name="stroke">#fff</CssParameter>' +
        '              <CssParameter name="stroke-width">1</CssParameter>' +
        '            </Stroke>' +
        '          </PolygonSymbolizer>' +
        '          <TextSymbolizer>' +
        '            <Label>' +
        '              <ogc:PropertyName>name</ogc:PropertyName>' +
        '            </Label>' +
        '            <Font>' +
        '              <CssParameter name="font-family">Microsoft YaHei UI</CssParameter>' +
        '              <CssParameter name="font-style">normal</CssParameter>' +
        '              <CssParameter name="font-size">20</CssParameter>' +
        '            </Font>' +
        '            <LabelPlacement>' +
        '              <PointPlacement>' +
        '                <Displacement>' +
        '                  <DisplacementX>0</DisplacementX>' +
        '                  <DisplacementY>0</DisplacementY>' +
        '                </Displacement>' +
        '                <Rotation>0</Rotation>' +
        '              </PointPlacement>' +
        '            </LabelPlacement>' +
        '            <Fill>' +
        '              <CssParameter name="fill">#ffffff</CssParameter>' +
        '            </Fill>' +
        '            <Halo>' +
        '              <Fill>' +
        '                <CssParameter name="fill">transparent</CssParameter>' +
        '              </Fill>' +
        '            </Halo>' +
        '          </TextSymbolizer>' +
        '        </Rule>' +
        '        <Rule>' +
        '          <Name>rank4</Name>' +
        '          <Filter xmlns="http://www.opengis.net/ogc">' +
        '            <And>' +
        '              <PropertyIsGreaterThan>' +
        '                <PropertyName>people</PropertyName>' +
        '                <Literal>256</Literal>' +
        '              </PropertyIsGreaterThan>' +
        '              <PropertyIsLessThanOrEqualTo>' +
        '                <PropertyName>people</PropertyName>' +
        '                <Literal>320</Literal>' +
        '              </PropertyIsLessThanOrEqualTo>' +
        '            </And>' +
        '          </Filter>' +
        '          <PolygonSymbolizer>' +
        '            <Fill>' +
        '              <CssParameter name="fill">#2e86d5</CssParameter>' +
        '              <CssParameter name="fill-opacity">0.8</CssParameter>' +
        '            </Fill>' +
        '            <Stroke>' +
        '              <CssParameter name="stroke">#fff</CssParameter>' +
        '              <CssParameter name="stroke-width">1</CssParameter>' +
        '            </Stroke>' +
        '          </PolygonSymbolizer>' +
        '          <TextSymbolizer>' +
        '            <Label>' +
        '              <ogc:PropertyName>name</ogc:PropertyName>' +
        '            </Label>' +
        '            <Font>' +
        '              <CssParameter name="font-family">Microsoft YaHei UI</CssParameter>' +
        '              <CssParameter name="font-style">normal</CssParameter>' +
        '              <CssParameter name="font-size">20</CssParameter>' +
        '            </Font>' +
        '            <LabelPlacement>' +
        '              <PointPlacement>' +
        '                <Displacement>' +
        '                  <DisplacementX>0</DisplacementX>' +
        '                  <DisplacementY>0</DisplacementY>' +
        '                </Displacement>' +
        '                <Rotation>0</Rotation>' +
        '              </PointPlacement>' +
        '            </LabelPlacement>' +
        '            <Fill>' +
        '              <CssParameter name="fill">#ffffff</CssParameter>' +
        '            </Fill>' +
        '            <Halo>' +
        '              <Fill>' +
        '                <CssParameter name="fill">transparent</CssParameter>' +
        '              </Fill>' +
        '            </Halo>' +
        '          </TextSymbolizer>' +
        '        </Rule>' +
        '        <Rule>' +
        '          <Name>rank5</Name>' +
        '          <Filter xmlns="http://www.opengis.net/ogc">' +
        '            <And>' +
        '              <PropertyIsGreaterThan>' +
        '                <PropertyName>people</PropertyName>' +
        '                <Literal>320</Literal>' +
        '              </PropertyIsGreaterThan>' +
        '              <PropertyIsLessThanOrEqualTo>' +
        '                <PropertyName>people</PropertyName>' +
        '                <Literal>384</Literal>' +
        '              </PropertyIsLessThanOrEqualTo>' +
        '            </And>' +
        '          </Filter>' +
        '          <PolygonSymbolizer>' +
        '            <Fill>' +
        '              <CssParameter name="fill">#1f6dcb</CssParameter>' +
        '              <CssParameter name="fill-opacity">0.8</CssParameter>' +
        '            </Fill>' +
        '            <Stroke>' +
        '              <CssParameter name="stroke">#fff</CssParameter>' +
        '              <CssParameter name="stroke-width">1</CssParameter>' +
        '            </Stroke>' +
        '          </PolygonSymbolizer>' +
        '          <TextSymbolizer>' +
        '            <Label>' +
        '              <ogc:PropertyName>name</ogc:PropertyName>' +
        '            </Label>' +
        '            <Font>' +
        '              <CssParameter name="font-family">Microsoft YaHei UI</CssParameter>' +
        '              <CssParameter name="font-style">normal</CssParameter>' +
        '              <CssParameter name="font-size">20</CssParameter>' +
        '            </Font>' +
        '            <LabelPlacement>' +
        '              <PointPlacement>' +
        '                <Displacement>' +
        '                  <DisplacementX>0</DisplacementX>' +
        '                  <DisplacementY>0</DisplacementY>' +
        '                </Displacement>' +
        '                <Rotation>0</Rotation>' +
        '              </PointPlacement>' +
        '            </LabelPlacement>' +
        '            <Fill>' +
        '              <CssParameter name="fill">#ffffff</CssParameter>' +
        '            </Fill>' +
        '            <Halo>' +
        '              <Fill>' +
        '                <CssParameter name="fill">transparent</CssParameter>' +
        '              </Fill>' +
        '            </Halo>' +
        '          </TextSymbolizer>' +
        '        </Rule>' +
        '        <Rule>' +
        '          <Name>rank6</Name>' +
        '          <Filter xmlns="http://www.opengis.net/ogc">' +
        '            <PropertyIsGreaterThan>' +
        '              <PropertyName>people</PropertyName>' +
        '              <Literal>384</Literal>' +
        '            </PropertyIsGreaterThan>' +
        '          </Filter>' +
        '          <PolygonSymbolizer>' +
        '            <Fill>' +
        '              <CssParameter name="fill">#013cb7</CssParameter>' +
        '              <CssParameter name="fill-opacity">0.8</CssParameter>' +
        '            </Fill>' +
        '            <Stroke>' +
        '              <CssParameter name="stroke">#fff</CssParameter>' +
        '              <CssParameter name="stroke-width">1</CssParameter>' +
        '            </Stroke>' +
        '          </PolygonSymbolizer>' +
        '          <TextSymbolizer>' +
        '            <Label>' +
        '              <ogc:PropertyName>name</ogc:PropertyName>' +
        '            </Label>' +
        '            <Font>' +
        '              <CssParameter name="font-family">Microsoft YaHei UI</CssParameter>' +
        '              <CssParameter name="font-style">normal</CssParameter>' +
        '              <CssParameter name="font-size">20</CssParameter>' +
        '            </Font>' +
        '            <LabelPlacement>' +
        '              <PointPlacement>' +
        '                <Displacement>' +
        '                  <DisplacementX>0</DisplacementX>' +
        '                  <DisplacementY>0</DisplacementY>' +
        '                </Displacement>' +
        '                <Rotation>0</Rotation>' +
        '              </PointPlacement>' +
        '            </LabelPlacement>' +
        '            <Fill>' +
        '              <CssParameter name="fill">#ffffff</CssParameter>' +
        '            </Fill>' +
        '            <Halo>' +
        '              <Fill>' +
        '                <CssParameter name="fill">transparent</CssParameter>' +
        '              </Fill>' +
        '            </Halo>' +
        '          </TextSymbolizer>' +
        '        </Rule>' +
        '      </FeatureTypeStyle>' +
        '    </UserStyle>' +
        '  </NamedLayer>' +
        '</StyledLayerDescriptor>'



      let themeObject = TMap.theme.convert(theme)
      this.vectorLayer2.setSldStyle(themeObject)

     /* TMap.transfer.toSldObject(styleAreaMap).then(res=>{
        this.vectorLayer2.setSldStyle(res)

      })*/
      this.vectorLayer2.getSldStyle('xml').then(res=>{
        console.log(res)
      })




      /*  TMap.transfer.toSldObject(style).then(res=>{
          console.log(res)
        })*/

    }
  },
  mounted() {
    this.InitMap()
  }
}
</script>

<style scoped>
body{
  margin: 0;
}
#map {
  width: 100%;
  height: 100%;
}
</style>
