初始化加载天地图

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 = 'the_geom ' + lowx + ' ' + lowy + '' + upperx + ' ' + uppery + '';

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 = `

图层信息

`

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);

})

},

好文阅读

评论可见,请评论后查看内容,谢谢!!!
 您阅读本篇文章共花了: