<template>
  <div>
    <input v-model="zrzh">
    <button @click="query">查询</button>
    <div id="map">
    </div>
  </div>
</template>

<script>
import * as i2d from "i2d";
import 'leaflet/dist/leaflet.css'
import 'i2d/dist/i2d.css'
import axios from "axios";
import proj4 from 'proj4'

export default {
  name: 'DkMap',
  data() {
    return {
      mapOptions: {
        copyright: false,
        basemaps: [
          {
            type: 'group',
            name: '天地图电子',
            layers: [
              {
                type: 'tdt',
                layer: 'vec_d',
                key: i2d.Token.tiandituArr,
                crs: i2d.CRS.EPSG4490,
              },
              {
                type: 'tdt',
                layer: 'vec_z',
                key: i2d.Token.tiandituArr,
                crs: i2d.CRS.EPSG4490,
              }
            ],
            show: true
          }
        ],
        operationallayers: [{
          name: "宗地",
          type: "wms",
          url: "http://www.hzbdcdj.com/geoserver/hzData/wms",
          layers: "hzData:ZRZ",
          // 是否启用地图交互(点击查询弹框)
          interactive: true,
          popup: "all",
          show: true,
          transparent: true,
          format: "image/png",
          zIndex: 3
        }],
        zoom: 15,
        minZoom: 1,
        maxZoom: 18,
        // 纬度在前
        center: [33.073665, 107.026747],
        crs: i2d.CRS.EPSG4490
      },
      map: null,
      graphicLayer: null,
      zrzh: '610702001204GB00001F0001'
    }
  },
  methods: {
    query() {
      this.graphicLayer.clearLayers()
      const _self = this
      const data = `<wfs:GetFeature service="WFS" version="1.0.0"
                        outputFormat="application/json"
                        xmlns:wfs="http://www.opengis.net/wfs"
                        xmlns:ogc="http://www.opengis.net/ogc"
                        xmlns:gml="http://www.opengis.net/gml">
                          <wfs:Query typeName="hzData:ZRZ">
                            <ogc:Filter>
                              <ogc:PropertyIsEqualTo>
                                <ogc:PropertyName>自然幢号</ogc:PropertyName>
                                <ogc:Literal>${this.zrzh}</ogc:Literal>
                              </ogc:PropertyIsEqualTo>
                            </ogc:Filter>
                          </wfs:Query>
                        </wfs:GetFeature>`

      const config = {
        method: "post",
        url: "https://www.hzbdcdj.com/geoserver/hzData/ows",
        headers: {
          "Content-Type": "application/xml"
        },
        data: data
      }

      axios(config)
          .then(function (response) {
            if (response.data.features.length > 0) {
              _self.graphicLayer.loadGeoJSON(response.data, {
                flyTo: true,
                crs: "EPSG:4524"
              })
            } else {
              alert("未查询到数据")
            }
          })
          .catch(function (error) {
            console.log(error)
            alert("查询失败:" + error)
          })
    },
  },
  mounted() {

    /**
     * 定义4524坐标系
     */
    proj4.defs("EPSG:4524", "+proj=tmerc +lat_0=0 +lon_0=108 +k=1 +x_0=36500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs")
    console.log("proj4", proj4.defs["EPSG:4524"])

    // 从数据库读取的地块信息
    this.map = new i2d.Map('map', this.mapOptions)

    // 创建矢量数据图层
    this.graphicLayer = new i2d.Layer.GraphicLayer()

    this.map.addLayer(this.graphicLayer)
  }
}
</script>

<style scoped>
#map {
  position: absolute;
  margin: 0;
  height: 60%;
  width: 60%;
}
</style>