cesuim添加图层、查询获取坐标绘制面/线(添加标注、边框)
加载图层方式
var item= {
url:"http://××××××××××/geoserver/××××××/wms",
layers:"ces:ces",
checked:true,
name:"ceshi",
polygon:false,
polyline:true,
lineColor:'#2E99Fc',
plane:'yellow',
borderWidth:2, //线宽
}
加载geoserver发布的矢量数据
let smart = new Cesium.WebMapServiceImageryProvider({
url: item.url,
layers: item.layers,
parameters: {
transparent: true, //是否透明
format: 'image/png',
srs: 'EPSG:4326',
show:item.checked
},
name: item.name
});
window.viewer.imageryLayers.addImageryProvider(smart);
//window.viewer.imageryLayers.get(0).show = item.checked //控制图层显示隐藏
动态绘制面/线
通过fetch查询,获取json数据绘制
var url = 'http://××××××××××/geoserver/××××××/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=ces%3Aces&maxFeatures=2000&outputFormat=application%2Fjson'
var that = this
fetch(url).then(function (data) {
return data.json();
}).then(function (res) {
var features = res.features;
for (var i = 0; i < features.length; i++) {
var posArr = features[i].geometry.coordinates[0][0];
var pointArr = [];
for (var j = 0; j < posArr.length; j++) {
var p = posArr[j];
pointArr.push(p[0]),
pointArr.push(p[1]),
pointArr.push(0);
}
//(推荐)标注位置(面中心点)获取方式一:
//Cesium+Turf.js计算不规则多边形重心
let center = turf.center(features[i]);
let point = center.geometry.coordinates;//重心平面坐标
let position = Cesium.Cartesian3.fromDegrees(point[0], point[1], 500);//转笛卡尔
var newEntities = window.viewer.entities.add({
'Type':'EditablePolygon',
'name':item.itemName,
'polygon': { //面
'hierarchy': new Cesium.PolygonHierarchy(Cesium.Cartesian3.fromDegreesArrayHeights(pointArr)),
'classificationType': Cesium.ClassificationType.TERRAIN,
'material':Cesium.Color.fromCssColorString(item.plane).withAlpha(0.5), //withAlpha 透明度 0~1
'show': item.polygon //是否展示面
},
'polyline': { //线
'positions': Cesium.Cartesian3.fromDegreesArrayHeights(that.getDegreesArrayHeights(features[i], 10)),
'material': Cesium.Color.fromCssColorString(item.lineColor).withAlpha(1),
// 必须给 golyline 设置贴地,否则会造成绘制的面和线在地图放大到一定程度后有误差
'clampToGround': true,
'width': item.borderWidth,
'show': item.polyline //是否展示边线
},
position:position,
label: {
text:'测试标注',
color : Cesium.Color.fromCssColorString('#fff'),
font:'normal 32px MicroSoft YaHei',
showBackground : true, //标注背景
scale : 0.5,
horizontalOrigin : Cesium.HorizontalOrigin.LEFT_CLICK,
verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
disableDepthTestDistance : 10000.0, //离地距离
outlineWidth: 5,
scaleByDistance: new Cesium.NearFarScalar(20000, 1, 40000, 0.0), //按距离缩放
},
'show': item.checked
});
//标注位置(面中心点)获取方式二:
//这种获取标注位置的方式不适用不规则面,在不规则面上使用这种方式会导致中心点偏移到区域外
// var polyPositions = newEntities .polygon.hierarchy.getValue(Cesium.JulianDate.now()).positions;
// var polyCenter = Cesium.BoundingSphere.fromPoints(polyPositions).center;//中心点
// newEntities .position = polyCenter;
}
}).catch(function (error) {
console.log(error);
});
//获取坐标串
getDegreesArrayHeights(feature, height) {
let newHeight = height
let degreesArrayHeights = [];
let coordinates;
if (feature.geometry.type == "MultiPolygon") {
coordinates = feature.geometry.coordinates[0][0];
} else if (feature.geometry.type == "Polygon") {
coordinates = feature.geometry.coordinates[0];
}
//坐标串转为需要的格式[x,y,z,x,y,z....]
for (let i = 0; i < coordinates.length; i++) {
const element = coordinates[i];
degreesArrayHeights.push(element[0]);
degreesArrayHeights.push(element[1]);
degreesArrayHeights.push(newHeight);
}
return degreesArrayHeights;
},