GIS mark3d 获取空间数据生成图层

最新推荐文章于 2024-07-18 15:48:23 发布

callBack_____

最新推荐文章于 2024-07-18 15:48:23 发布

阅读量136

点赞数 3

文章标签：前端 javascript

本文链接：https://blog.csdn.net/callBack_____/article/details/140083330

版权

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="../../lib/Cesium/Cesium.js"></script>
  <script type="text/javascript" src="../../../../../Build/SuperMap3D/SuperMap3D.js"></script>
  <link rel="stylesheet" href="../../lib/Cesium/Widgets/widgets.css">
  <script src="../../lib/mars3d/mars3d.js"></script>
  <script src="../../lib/jquery/jquery-3.6.0.min.js"></script>
  <link rel="stylesheet" href="../../lib/mars3d/mars3d.css">

  <style>
    html,
    body,
    .mars3d-container {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
      border: none;
      overflow: hidden;
    }
  </style>
</head>

<body>

  <body>
    <div id="mars3dContainer" class="mars3d-container"></div>
    <div class="btn" id="btn">删除所有图层</div>
    <script type="text/javascript">

      $(function () {

        var config = {
          URL: 'http://localhost:8090/iserver/services/data-DynamicData/rest/data',
          SQL_WHERE: '1=1',
          LayerData: 'DynamicData',//数据源
          LayerName: 'Point'//查询的图层名
        }
        var R = new RequestIserverData(config)
        R.querySpatialData()
      })
      class RequestIserverData {
        constructor(config) {
          this.URL = config.URL,
            this.SQL_WHERE = config.SQL_WHERE,
            this.LayerData = config.LayerData,
            this.LayerName = config.LayerName
          this.graphicLayer = null
          this.init()
        }
        init() {
          var mapOptions = {
            basemaps: [{ name: "天地图", type: "tdt", layer: "img_d", show: true }],
          };
          window.map = new mars3d.Map("mars3dContainer", mapOptions); //支持的参数请看API文档：http://mars3d.cn/api/Map.html
          this.graphicLayer = new mars3d.layer.GraphicLayer()
          window.graphicLayer = this.graphicLayer
          map.addLayer(this.graphicLayer)
          this.graphicLayer.on(mars3d.EventType.click, function (event) {
            console.log("监听layer，单击了矢量对象", event)
          })

          this.bindClick()
        }
        queryData() {
          $.ajax({
            url: 'http://localhost:8090/iserver/services/data-DynamicData/rest/data/datasources/DynamicData/datasets/Point.rjson',
            type: "get",
            dataType: "json",
            async: false,
            success(data) {

            },

          })
        }
        querySpatialData() {
          var that = this
          $.ajax({
            url: that.URL + "/featureResults.json?returnContent=true&resultFormat=GEOJSON",
            dataType: "json",
            type: "POST",
            contentType: "application/x-www-form-urlencoded;charset=UTF-8",
            data: JSON.stringify({
              "maxFeatures": "-1",
              "getFeatureMode": "SQL",
              "datasetNames": [that.LayerData + ':' + that.LayerName],
              "queryParameter": {
                "attributeFilter": that.SQL_WHERE,
                "returnCountOnly": "true"
              },
              "resultFormat": "GEOJSON"
            }),
            async: false,
            success(serviceResult) {
              var serviceResult = new SuperMap3D.GeoJSON().toGeoJSON(serviceResult.features);
              var data = serviceResult.features
              that.createLocation(data)
            },

          })
        }
        createLocation(data) {
          var that = this
          data.forEach(item => {
            that.addDemoGraphic3(item.geometry.coordinates)
          });

        }
        // 生成图层
        addDemoGraphic3(position) {
          var graphic = new mars3d.graphic.BillboardEntity({
            name: "贴地图标",
            position: [position[0], position[1], 1000],
            style: {
              image: "../../../images/location4.png",
              scale: 0.5,
              horizontalOrigin: Cesium.HorizontalOrigin.CENTER,
              verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
              clampToGround: true
            },
            attr: { remark: "示例3" }
          })
          this.graphicLayer.addGraphic(graphic)
        }
        removeGraphicALL() {
          var that = this
          var graphic = null
          map.getLayers().forEach(item => {
            if (item.type == 'graphic') {
              graphic = item
            }
          });
          graphic._graphicList._array.forEach(item => {
            if (item.name == '贴地图标') {
              setTimeout(() => {
                that.graphicLayer.removeGraphic(item)
              }, 100);
            }
          })

        }
        bindClick(){
          var that = this
          $('#btn').on('click',function(){
            that.removeGraphicALL()
          })
        }
      }




    </script>
  </body>
</body>

</html>