初始化加载天地图
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 = '
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);
})
},
好文阅读
您阅读本篇文章共花了： 大家都在找：
天地图：天地图卫星地图手机版下载
前端：前端是做什么的
vue：vue菜鸟教程
发表评论