uniapp+leaflet+proj4js中实现wms图层点击事件

        在项目中遇到需要实现点击图斑并处理相关事件。但图斑中保存坐标系为EPSG:4527坐标系，需要先转换为EPSG:4326坐标系，也就是wgs84。坐标系处理可以通过proj4js来实现。

        首先引入axios和proj4js：

	import proj4 from "proj4"
	import axios from 'axios'

        坐标系转换：

                    // 定义EPSG:4326和EPSG:4527的投影信息
					proj4.defs("EPSG:4326","+proj=longlat +datum=WGS84 +no_defs +type=crs");
					proj4.defs("EPSG:4527","+proj=tmerc +lat_0=0 +lon_0=117 +k=1 +x_0=39500000 +y_0=0 +ellps=GRS80 +units=m +no_defs +type=crs");
					
					const wgs84Coords = [e.latlng.lng, e.latlng.lat]; // 经度, 纬度
					// 将EPSG:4326坐标转换为EPSG:4527坐标
					var transformedCoordinates = proj4("EPSG:4326","EPSG:4527",[e.latlng.lng, e.latlng.lat]);
					
					
					// 输出转换结果
					console.log('EPSG:4527 坐标：', transformedCoordinates);

        这里在定义proj4坐标系的时候，参数需要填写坐标系信息，这里坐标系信息后需要跟上坐标系定义，具体每个坐标系定义可以从这个网站获取：

        EPSG.io: Coordinate Systems Worldwide

        在使用坐标系定义的时候需要在网页下方选择对应的定义规则：

        我这里使用的是geoserver，所以选择好定义，并且复制。即可进行坐标系转换。

        因为leaflet的wms图层无法直接绑定点击事件。可以从使用map进行全局事件绑定，然后通过proj4进行坐标系转换，发送一个请求指向geoserver，这样就可以拿到对应图斑或位置的返回信息。

this.map.on('click', function (e) {
                    const BBOX = [transformedCoordinates[0],transformedCoordinates[1],1+transformedCoordinates[0],1+transformedCoordinates[1]]
					var url = wmsLayer._url + L.Util.getParamString({
					    info_format: 'application/json',  // 请求返回 GeoJSON 格式
					    request: 'GetFeatureInfo',
					    service: 'WMS',
					    srs: wmsLayerSrs,
					    version: '1.1.1',
					    layers: wmsLayerName,
					    query_layers: wmsLayerName,
					    styles: wmsLayerStyle,
						bbox:BBOX,
					    feature_count: 1,
						width:101,
						height:101,
					    x: 50,
					    y: 50
					});	
					
					console.log(url);
					var homethis = this;
					axios.get(url).then(function (res){
                        //此处在res中可拿到数据，在res中拿到数据之后，对相对应的数据进行处理。绘制拿到的geojson或是跳转等。
						console.log(res.data);
					})
					

        在这里定义的时候，需要注意一下，如果url地址是直接从请求中复制出来的话，这里需要同时修改info_format为application/json。并且这里有个bbox参数，这个参数中传入的是x的范围和y的范围。在我这里使用的是39坐标系，所以对范围使用+1操作，如果实际使用的坐标系为wgs84的话，这里根据需要具体调整。

        这里使用的是uniapp的randerjs，在randerjs中无法使用uni的相关接口。所以这里使用的是axios，axios可以直接在标签内引入。

        如果在res中需要使用到uni的api，可通过randerjs渲染至上方逻辑层，之后再次进行操作。具体内容可参考uniapp官方的randerjs的demo演示查看。