leaflet 调用geoserver发布的WFS服务,获取属性

methods:{
// 整合访问WFS服务需要的参数
  getGeoserverParams(cityCode,type) {
      let filter = `<Filter xmlns="http://www.opengis.net/ogc" xmlns:gml="http://www.opengis.net/gml">
        <PropertyIsEqualTo>'
            <PropertyName>${serverType[type].codeName}</PropertyName>
            <Literal>${cityCode}</Literal>
        </PropertyIsEqualTo>
      </Filter>`
      return {
        service: 'WFS',
        version: '1.0.0',
        request: 'GetFeature',
        typeName: serverType[type].typeName,
        maxFeatures:50,
        outputFormat: 'application/json',
        subtype:'gml/2.1.2',
        filter: filter,
      };
    },
    toLatLng(coords) {
      return L.CRS.EPSG3857.unproject(L.point(coords))
    },
    onEachFeature(feature, layer) {
      layer.on({
        mouseover: () => {
        },
        mouseout: () => {
        },
        click: () => {
        },
      })
    },
    drawArea(data) {
      const options = {
        onEachFeature: this.onEachFeature,
        style: {
          fillColor: '#ff0000',
          weight: 2,
          opacity: 0.8,
          color: 'white',
          dashArray: '3',
          fillOpacity: 0.8
        },
        coordsToLatLng: this.toLatLng
      }
      this.drawRegion(data)
    },
     changeRegion(cityCode,type) {
      let nodesObj = this.$refs['cascader'].getCheckedNodes()[0].data
      let url = getConfig().geoserver
      let geoJsonUrl = url + L.Util.getParamString(this.getGeoserverParams(nodesObj.regionCode,nodesObj.regionLevel), url);
      this.request.get(geoJsonUrl).then(res => {
        this.drawRegion(res.data)
      }).catch(err => {
        console.log('err')
      })
    },
},
mounted(){
this.changeRegion(440044)
}
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容