cesuim添加图层、查询获取坐标绘制面/线

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;
  },