天地图加载WMS图层服务,点击获取图层信息

初始化加载天地图

      onLoadMap() {
        this.map = new T.Map("map");
        this.map.centerAndZoom(new T.LngLat(116.40769, 39.89945), 7);
        this.map.enableScrollWheelZoom();
        this.map.setMapType(TMAP_HYBRID_MAP);
        // 地图绑定点击事件
        var cp = new T.CoordinatePickup(this.map, {
          callback: this.MapClick
        });
        cp.addEvent();        
      },

加载wms图层服务

      addWmsLayer(layers, url) {
        var config = {
          version: "1.1.0",	//请求服务的版本
          layers: layers,//图层名字
          transparent: true,	//输出图像背景是否透明
          styles: '',			//每个请求图层的用","分隔的描述样式
          format: "image/png",	//输出图像的类型
        };
        // url为wms服务地址,config为图层配置信息
        this.getWMS(url, config);
      },
      getWMS(url, config) {
      //在data里边声明wmsLayer为null,此处判断图层是否存在,存在就移除图层,防止重复添加
        if (this.wmsLayer) {
          this.map.removeLayer(this.wmsLayer);
        }
        this.wmsLayer = new T.TileLayer.WMS(url, config);
        this.map.addLayer(this.wmsLayer);
      },

地图点击获取WMS图层信息

   MapClick(e) {
      //在data设置polygonArry为空数组
      //点击首先清除掉图层的高亮显示
	   this.polygonArry.forEach((item, index) => {
          this.map.removeOverLay(item)
        })

		//设置查询参数
        let lowx = e.lng;
        let lowy = e.lat;
        let upperx = e.lng + 0.000001;
        let uppery = e.lat + 0.000001;
        // var bbox = lowx + "," + lowy + " " + upperx + "," + uppery;
        var FILTER = '<Filter xmlns:ogc="https://www.opengis.net/ogc" xmlns:gml="https://www.opengis.net/gml"><Intersects><PropertyName>the_geom</PropertyName><gml:Envelope srsName="EPSG:4326">  <gml:lowerCorner>' + lowx + ' ' + lowy + '</gml:lowerCorner><gml:upperCorner>' + upperx + ' ' + uppery + '</gml:upperCorner></gml:Envelope></Intersects></Filter>';
        let data = {
          service: 'WFS',
          version: '1.1.0',
          request: 'GetFeature',
          typeName: '',//WMS图层名称
          outputFormat: 'application/json',
          srsName: 'epsg:4326',
          Filter: FILTER,
        }
        this.$https({
          method: "POST",
          params: data,
          url: "",//wms服务地址
        }).then((res) => {
          console.log(res)
          //获取到图层信息后以进行展示	
           var infoWin1 = new T.InfoWindow();
          var pLngLat = new T.LngLat(e.lng, e.lat);
          var sContent = ` <h3>图层信息</h3> `
          infoWin1.setContent(sContent);
          this.map.openInfoWindow(infoWin1, pLngLat);

		//设置图层点击后高亮显示
          var points = [];
          let mapData = res.data.features[0].geometry.coordinates[0][0]
          let dataList = res.data.features[0].properties
          mapData.forEach((item, index) => {
            points.push(new T.LngLat(item[0], item[1]));
          })
          var polygon = new T.Polygon(points, {
            color: "#0b2558", //填充颜色
            opacity: 0.5,//填充透明度
            fillColor: "#6ceed3",//边界线填充颜色
            fillOpacity: 0.5,边界线充透明度
          });
          //把边界线添加到polygonArry进行保存,便于删除
          this.polygonArry.push(polygon)
          this.map.addOverLay(polygon);
        })
      },
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值