wfs 范围查询

suerprisePlus

2024-06-21 fde8e3bedaf5f883f38c3a0ec33d3c6a8748d1c9

 src/assets/js/map/mapView.js

@@ -1,6 +1,12 @@
import axios from "axios";

import mapConfig from "./mapConfig";

import mapServer from "./mapServer";

import modelLayer from "./modelLayer";

import wfsConfig from "./wfsConfig";

import mapInfo from "./mapInfo";



const mapViewer = {

  configTooles: null,

  initMap() {

    window.earthCtrl = new SmartEarth.EarthCtrl("sdkContainer", {

      // 隐藏默认底图

@@ -14,18 +20,165 @@
    Viewer.scene.globe.baseColor = Cesium.Color.fromCssColorString("#A9A9A9"); //设置地球颜色

    // 清空默认底图

    Viewer.imageryLayers.removeAll();

   


    mapServer.addServer({

      sourceType: "arcgis",

      url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer"

    });

   
    
    // mapServer.addServer({

    //   sourceType: "geoserver",

    //   url: "https://cim.smartearth.cn/geoserver/PolygonFeature/ows",

    //   layer: "PolygonFeature:GeoEntity"

    // earthCtrl.factory.createTerrainLayer({

    //   sourceType: "ctb",

    //   url: "https://tiles1.geovisearth.com/base/v1/terrain?token=486dac3bec56d7d7c2a581c150be2bd937462f1e8f3bc9c78b5658b396122405"

    // });



    mapServer.addServer({

      sourceType: "tms",

      url: "http://192.168.11.41:9001/gisserver/tmsserver/SubicBayArea"

    });

    mapInfo.setEntityQueryInput();



    const url =

      "http://103.135.160.14:9038/gisserver/wfsserver/SubicBayAreaVector_wfs?version=1.1.0&request=GetFeature&format=json&typename=GeoEntity";

    const areaBox =

      "120.28915940000012 14.809144082000034 120.28915940000012 14.837205054000039 120.31165600000003 14.837205054000039 120.31165600000003 14.809144082000034 120.28915940000012 14.809144082000034";



    Cesium.GeoJsonDataSource.load(url, {

      stroke: Cesium.Color.fromCssColorString("#FFF0F5"), //多边形或线的颜色

      fill: Cesium.Color.fromCssColorString("#FFF0F5"), //多边形或线的颜色

      strokeWidth: 1, //多边形或线 宽度

      clampToGround: true //多边形或线 固定在地面上true/false

    }).then((dataSource) => {

      const entities = dataSource.entities.values;

      entities.map((item) => {

        item.polygon.heightReference =

          Cesium.HeightReference.RELATIVE_TO_GROUND; // 贴地

        item.polygon.height = 0; // 距地高度0米

        item.polygon.extrudedHeightReference =

          Cesium.HeightReference.RELATIVE_TO_GROUND; //拉伸

        item.polygon.extrudedHeight = item.properties["ELEVATION"]; // 拉伸高度



        var polyPositions = item.polygon.hierarchy.getValue().positions;

        var polyCenter = Cesium.BoundingSphere.fromPoints(polyPositions).center; //中心点

        polyCenter = Cesium.Ellipsoid.WGS84.scaleToGeodeticSurface(polyCenter);

        item.position = polyCenter;



        item.label = {

          //文字标签

          text: "",

          font: "500 20px Helvetica", // 15pt monospace

          scale: 1,

          style: Cesium.LabelStyle.FILL,

          fillColor: Cesium.Color.WHITE,



          eyeOffset: new Cesium.Cartesian3(

            0.0,

            item.polygon.extrudedHeight + 1,

            -(item.polygon.extrudedHeight + 1)

          ),



          verticalOrigin: Cesium.VerticalOrigin.BOTTOM,

          showBackground: true,

          distanceDisplayCondition: new Cesium.DistanceDisplayCondition(50.0, 500.0),

          // heightReference: Cesium.HeightReference.CLAMP_TO_GROUND,

          // disableDepthTestDistance: Number.POSITIVE_INFINITY,

         backgroundColor: new Cesium.Color(26 / 255, 196 / 255, 228 / 255, 1.0)   //背景顔色

        };

      });

      Viewer.dataSources.add(dataSource);

      this.setQueryProperty(dataSource, "军事目标");

      this.getQuery(url, areaBox, dataSource);

    });

  },

  setQueryProperty(layer, property) {

    const entity = layer.entities.values;

    entity.filter((rs) => {

      if (rs.properties["TargetType"]._value == property) {

        rs.polygon.material = Cesium.Color.RED;

        // 显示文字标签

        rs.label.text = rs.properties["TYPE"];

      }

    });

  },

  getQuery(url, area, layer) {

    axios

      .get(url, {

        params: {

          version: "1.3.0",

          request: "GetFeature",

          typename: "GeoEntity",

          propertyname: "*",

          format: "json",

          filter: `<ogc:Filter xmlns:ogc="http://www.opengis.net/ogc"><ogc:Intersects><ogc:PropertyName /><gml:Polygon xmlns:gml="http://www.opengis.net/gml" srsName="EPSG:4326"><gml:exterior><gml:LinearRing><gml:posList>${area}</gml:posList></gml:LinearRing></gml:exterior></gml:Polygon></ogc:Intersects></ogc:Filter>`

        }

      })

      .then((res) => {

        const obj = res.data.features;



        // const dataSource = Viewer.dataSources._dataSources.filter((item) => {

        //   if (item.name == layer) {

        //     return item;

        //   }

        // });

        const entity = layer.entities.values;

        // const entity = dataSource[0].entities.values;

        obj.filter((item) => {

          entity.filter((rs) => {

            if (item.id == rs.id) {

              rs.polygon.material = Cesium.Color.CORNFLOWERBLUE;

            }

          });

        });

      });

  },

  getLayerModelCount(res) {

    axios

      .post(

        res.url,

        {

          dbid: res.dbid,

          geometry: res.geometry,

          layerid: res.layerid,

          returnCountOnly: res.containCount,

          token: res.token

        },

        {

          headers: {

            Authorization: res.token,

            "Content-Type": res.contentType

          }

        }

      )

      .then((response) => {

        if (response.status === 200) {

          this.getLayerModelList(res, response.data.data);

        } else {

          this.getLayerModelList(res, 200);

        }

      });

  },

  getLayerModelList(res, count) {

    axios

      .post(

        res.url,

        {

          dbid: res.dbid,

          geometry: res.geometry,

          layerid: res.layerid,

          containCount: res.containCount,

          token: res.token,

          count: count,

          start: 1,

          outfields: res.outfields

        },

        {

          headers: {

            Authorization: res.token,

            "Content-Type": res.contentType

          }

        }

      )

      .then((response) => {

        console.log("List", response);

      });

  }

};

export default mapViewer;