Cesium 加载geoserver发布的WFS点要素服务

   if (!window.my_labels) {
        window.my_labels = new Cesium.CustomDataSource('my_labels');
        viewer.dataSources.add(window.my_labels);
      }

      let props = {
        wfs_url: "http://IP:PORT/geoserver/sanwei/wfs",//geoserver wfs服务地址
        wfs_layer: "sanwei:layerName"//图层
      }

      let cameraExtent = viewer.camera.computeViewRectangle();//视窗范围
      let picks = [];
      if (cameraExtent) {
        let west = parseFloat(Cesium.Math.toDegrees(cameraExtent.west).toFixed(8));
        let south = parseFloat(Cesium.Math.toDegrees(cameraExtent.south).toFixed(8));
        let east = parseFloat(Cesium.Math.toDegrees(cameraExtent.east).toFixed(8));
        let north = parseFloat(Cesium.Math.toDegrees(cameraExtent.north).toFixed(8));
        picks = [
          [west, south],
          [east, north]
        ];
      }
      let wfsurl = props.wfs_url + "?service=WFS&version=1.1.0&request=GetFeature&typename=" +
        props.wfs_layer + "&maxFeatures=200&outputFormat=application/json&srsname=EPSG:4326";
      if (picks.length > 0) {
        wfsurl += `&BBOX=${picks[0][0]},${picks[0][1]},${picks[1][0]},${picks[1][1]},EPSG:4326`
      } else {
        //如果没有获取到视窗范围就不继续执行
        return
      }
      fetch(wfsurl).then(result => {
        if (!result.ok) {
          throw new Error(
            `couldn't load "${result.url}". Request failed with status ${result.status} : ${result.statusText}`
          );
        }
        result.json().then((json) => {
          let { features } = json;
          if (window.my_labels && features && features.length > 0) {
            window.my_labels.entities.removeAll()
            for (let i = 0; i < features.length; i++) {
              let { geometry, properties } = features[i];
              let { coordinates } = geometry;
              window.my_labels.entities.add({
                position: Cesium.Cartesian3.fromDegrees(coordinates[0], coordinates[1]),
                label: {
                  text: properties.areaname || "未知地名",
                  showBackground: true,
                  heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
                }
              });
            }
          }
        });
      }).catch(error => {
        return Promise.reject(error);
      }).finally(() => {
      });

1698716806492.jpg