<template>
  <div style="width: 100%;height: 100%">
    <div style="position: absolute;left: 10px;top: 10px;z-index: 99">
      <button @click="setSld">SLD赋值</button>
      <button @click="setColor">Color赋值</button>
      <button @click="changeBaseLayer">切换底图</button>
    </div>
    <div id="map" ></div>
  </div>

</template>

<script>
import TMap from "../plugin/index";
var parser = require('fast-xml-parser');
var he = require('he');

export default {
  name: "SLD",
  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',
      colortest:"#db1010"
    }
  },
  methods: {
    changeBaseLayer(){
      this.map.changeBaseLayer({url: "http://10.10.64.30:8009/geoserver/gwc/service/wmts/?layer=world:world_info&format=image/png"})
    },
    setColor(){
      this.vectorLayer2.setColors(['#b7f98a', '#48ed3d', '#f0d411', '#e87410', '#db1010'])
      let xml = this.vectorLayer2.getSldXML()
      console.log(xml)
    },
    setSld(){
      this.vectorLayer2.setStyle(this.styleHeatMap)
    },
    InitMap() {
      let map = new TMap.map({
        url:["http://t0.tianditu.gov.cn/vec_c/wmts?tk=5524c003a4f5e5ba639f3d3dd5e0193b","http://t0.tianditu.gov.cn/cva_c/wmts?tk=5524c003a4f5e5ba639f3d3dd5e0193b"],
        center: [114, 30],
        zoom: 4,
        maxZoom: 18,
        minZoom: 0,
        target: 'map',
      })
      this.map = map
      this.vectorLayer2 = new TMap.heatmap({url: this.url2,weightField:'lx'}).addTo(map).on({'loadfinish':()=>{
        this.vectorLayer2.onView()
      }})

      this.styleHeatMap = '<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>Heatmap</Name><UserStyle><Title>Heatmap</Title><Abstract>A heatmap surface showing population density</Abstract><FeatureTypeStyle><Transformation><ogc:Function name="vec:Heatmap"><ogc:Function name="parameter"><ogc:Literal>data</ogc:Literal></ogc:Function><ogc:Function name="parameter"><ogc:Literal>weightAttr</ogc:Literal><ogc:Literal>lx</ogc:Literal></ogc:Function><ogc:Function name="parameter"><ogc:Literal>radiusPixels</ogc:Literal><ogc:Function name="env"><ogc:Literal>radius</ogc:Literal><ogc:Literal>10</ogc:Literal></ogc:Function></ogc:Function><ogc:Function name="parameter"><ogc:Literal>pixelsPerCell</ogc:Literal><ogc:Literal>10</ogc:Literal></ogc:Function><ogc:Function name="parameter"><ogc:Literal>outputBBOX</ogc:Literal><ogc:Function name="env"><ogc:Literal>wms_bbox</ogc:Literal></ogc:Function></ogc:Function><ogc:Function name="parameter"><ogc:Literal>outputWidth</ogc:Literal><ogc:Function name="env"><ogc:Literal>wms_width</ogc:Literal></ogc:Function></ogc:Function><ogc:Function name="parameter"><ogc:Literal>outputHeight</ogc:Literal><ogc:Function name="env"><ogc:Literal>wms_height</ogc:Literal></ogc:Function></ogc:Function></ogc:Function></Transformation><Rule><RasterSymbolizer><Geometry><ogc:PropertyName>the_geom</ogc:PropertyName></Geometry><Opacity>0.6</Opacity><ColorMap type="ramp"><ColorMapEntry color="#b7f98a" label="nodata" quantity="0.2"></ColorMapEntry><ColorMapEntry color="#48ed3d" label="nodata" quantity="0.4"></ColorMapEntry><ColorMapEntry color="#f0d411" label="nodata" quantity="0.6"></ColorMapEntry><ColorMapEntry color="#e87410" label="nodata" quantity="0.8"></ColorMapEntry><ColorMapEntry color="#db1010" label="nodata" quantity="1.0"></ColorMapEntry></ColorMap></RasterSymbolizer></Rule></FeatureTypeStyle></UserStyle></NamedLayer></StyledLayerDescriptor>'

      let style = '<?xml version="1.0" encoding="UTF-8"?>' +
        '<StyledLayerDescriptor xmlns="http://www.opengis.net/sld"' +
        '  xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"' +
        '  xmlns:xlink="http://www.w3.org/1999/xlink" xsi:schemaLocation="http://www.opengis.net/sld http://schemas.opengis.net/sld/1.1.0/StyledLayerDescriptor.xsd"' +
        '  xmlns:se="http://www.opengis.net/se" version="1.0.0"' +
        '  xmlns:ogc="http://www.opengis.net/ogc">' +
        '  <NamedLayer>' +
        '    <Name>Hoogspanning</Name>' +
        '    <UserStyle>' +
        '      <Name>Hoogspanning</Name>' +
        '      <FeatureTypeStyle>' +
        '        <Rule>' +
        '          <Filter>' +
        '         <And>'+
        '            <PropertyIsGreaterThan>' +
        '              <PropertyName>people</PropertyName>' +
        '              <Literal>1</Literal>' +
        '            </PropertyIsGreaterThan>' +
        '            <PropertyIsLessThanOrEqualTo>' +
        '              <PropertyName>people</PropertyName>' +
        '              <Literal>100</Literal>' +
        '            </PropertyIsLessThanOrEqualTo>' +
        '         </And>'+
        '          </Filter>' +
        '          <Name>All</Name>' +
        '          <sld:PolygonSymbolizer>' +
        '            <sld:Fill>' +
        '              <sld:CssParameter name="fill">#0000FF</sld:CssParameter>' +
        '              <sld:CssParameter name="fill-opacity">0.6</sld:CssParameter>' +
        '            </sld:Fill>' +
        '            <sld:Stroke>' +
        '              <sld:CssParameter name="stroke">#00FF00</sld:CssParameter>' +
        '              <sld:CssParameter name="stroke-opacity">0.6000000238418579</sld:CssParameter>' +
        '              <sld:CssParameter name="stroke-width">2</sld:CssParameter>' +
        '            </sld:Stroke>' +
        '          </sld:PolygonSymbolizer>' +

        '          <sld:TextSymbolizer>' +
        '            <sld:Label>' +
        '              <ogc:PropertyName>name</ogc:PropertyName>' +
        '            </sld:Label>' +
        '            <sld:Halo>        ' +
        '               <sld:Radius>3</sld:Radius>' +
        '                 <sld:Fill>' +
        '                   <sld:CssParameter name="fill">#ffffff</sld:CssParameter>' +
        '                 </sld:Fill>' +
        '            </sld:Halo>' +
        '            <sld:Font>' +
        '              <sld:CssParameter name="font-family">宋体</sld:CssParameter>' +
        '              <sld:CssParameter name="font-size">12</sld:CssParameter>' +
        '              <sld:CssParameter name="font-style">normal</sld:CssParameter>' +
        '              <sld:CssParameter name="font-weight">bold</sld:CssParameter>' +
        '            </sld:Font>' +'  <LabelPlacement>' +
        '           <PointPlacement>' +
        '             <AnchorPoint>' +
        '               <AnchorPointX>0.5</AnchorPointX>' +
        '               <AnchorPointY>0.0</AnchorPointY>' +
        '             </AnchorPoint>' +
        '             <Displacement>' +
        '               <DisplacementX>0</DisplacementX>' +
        '               <DisplacementY>25</DisplacementY>' +
        '             </Displacement>' +
        '             <Rotation>-45</Rotation>' +
        '           </PointPlacement>' +
        '         </LabelPlacement>'+
        '            <sld:Fill>' +
        '              <sld:CssParameter name="fill">#E60000</sld:CssParameter>' +
        '            </sld:Fill>' +
        '            <sld:LabelPlacement>' +
        '              <sld:LinePlacement>' +
        '                <sld:PerpendicularOffset>0</sld:PerpendicularOffset>' +
        '              </sld:LinePlacement>' +
        '            </sld:LabelPlacement>' +
        '            <sld:VendorOption name="followLine">true</sld:VendorOption>' +
        '            <sld:VendorOption name="repeat">100</sld:VendorOption>' +
        '          </sld:TextSymbolizer>' +
        '        </Rule>' +
        '      </FeatureTypeStyle>' +
        '    </UserStyle>' +
        '  </NamedLayer>' +
        '</StyledLayerDescriptor>'


      let style2 = '<?xml version="1.0" encoding="UTF-8"?>' +
        '<sld:StyledLayerDescriptor version="1.0.0" xmlns:sld="http://www.opengis.net/sld" xmlns:ogc="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml" xmlns:xlink="http://www.w3.org/1999/xlink">' +
        '  <sld:NamedLayer>' +
        '    <sld:Name>Broken_Polyline</sld:Name>' +
        '    <sld:UserStyle>' +
        '      <sld:Name>Style1</sld:Name>' +
        '      <sld:FeatureTypeStyle>' +
        '        <sld:FeatureTypeName>Broken_Polyline</sld:FeatureTypeName>' +
        '        <sld:Rule>' +
        '          <sld:Name>rule0</sld:Name>' +
        '          <sld:Title>rule0</sld:Title>' +
        '          <sld:LineSymbolizer>' +
        '            <sld:Stroke>' +
        '               <sld:CssParameter name="stroke">#E60000</sld:CssParameter>' +
        '            </sld:Stroke>' +
        '          </sld:LineSymbolizer>' +

        '          <sld:TextSymbolizer>' +
        '            <sld:Label>' +
        '              <ogc:PropertyName>lx</ogc:PropertyName>' +
        '            </sld:Label>' +
        '            <sld:Font>' +
        '              <sld:CssParameter name="font-family">宋体</sld:CssParameter>' +
        '              <sld:CssParameter name="font-size">12</sld:CssParameter>' +
        '              <sld:CssParameter name="font-style">normal</sld:CssParameter>' +
        '              <sld:CssParameter name="font-weight">bold</sld:CssParameter>' +
        '            </sld:Font>' +
        '            <sld:Fill>' +
        '              <sld:CssParameter name="fill">#E60000</sld:CssParameter>' +
        '            </sld:Fill>' +
        '            <sld:LabelPlacement>' +
        '              <sld:LinePlacement>' +
        '                <sld:PerpendicularOffset>0</sld:PerpendicularOffset>' +
        '              </sld:LinePlacement>' +
        '            </sld:LabelPlacement>' +
        '            <sld:VendorOption name="followLine">true</sld:VendorOption>' +
        '            <sld:VendorOption name="repeat">100</sld:VendorOption>' +
        '          </sld:TextSymbolizer>' +
        '        </sld:Rule>' +
        '      </sld:FeatureTypeStyle>' +
        '    </sld:UserStyle>' +
        '  </sld:NamedLayer>' +
        '</sld:StyledLayerDescriptor>'



   /*   console.log(styleHeatMap)
      let styleJson = TMap.theme.convert({type:'heatmap',sldXml:styleHeatMap})
      var Parser = require("fast-xml-parser").j2xParser;

      var defaultOptions = {
        attributeNamePrefix : "attr_",
        ignoreAttributes : false,
        ignoreNameSpace: false,
      };
      var parser = new Parser(defaultOptions);
      var xml = parser.parse(styleJson);
      console.log(xml)*/
     /* TMap.transfer.toSldObject(styleHeatMap).then(res=>{
        console.log(res)
      })*/
        //this.vectorLayer2.setSldStyle(styleHeatMap)
       // this.vectorLayer2.getSldStyle().then(res=>{
        //  console.log(res)
   // })




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

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

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