基于SuperMap10i 开发的全过程咨询管理平台的研究

        基于SuperMap10i 开发的全过程咨询管理平台,包含《可视化模型展示应用系统》《投资控制管理系统》《档案信息中心管理系统》,基于二三维一体化地理信息接口和BIM模型接口开发的模型展示应用引擎,完美的融合BIM数据和GIS数据,系统以BIM/GIS技术为基础,从根本上解决了单体建筑管理的深度和宏观规划策划的广度。利用PC、浏览器实现了项目全过程、数据多源融合,系统提供的平台服务自“决策”始,直至“模型+”的拓展接口,实现建设工程全生命周期,全专业范围的充分融合。

  (1)多源模型融合

  系统支持对多种数据格式的融合加载,避免客户同时学习多种专业软件的困难。

  (2)BIM模型轻量化处理,脱离庞大的BIM环境,就能实现模型的各种剖切,方便模型浏览。

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>SceneLayerView - query statistics by geometry | Sample | ArcGIS API for JavaScript 4.19</title>
    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
         100%;
      }

      .esri-ui-top-right {
        max-height: 100%;
      }

      #queryDiv, #resultDiv {
        min- 250px;
        font-size: 14px;
        padding: 10px;
        display: none;
        overflow-y: auto;
        overflow-x: hidden;
      }

      .geometry-options {
        display: flex;
        flex-direction: row;
      }
      .geometry-button {
        flex: 1;
        border-style: solid;
        border- 1px;
        border-image: none;
      }
      .geometry-button-selected {
        background: #4c4c4c;
        color: #fff;
      }

      #bufferNum {
         90%;
        margin: 2.5em auto 0;
      }

      .count {
        white-space: nowrap;
        font-size: 14px;
        font-weight: bold;
        display: inline-block;
      }
    </style>
    <!-- Load the Chart.js library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.8.0/Chart.min.js"></script>

    <link rel="stylesheet" href="https://js.arcgis.com/4.19/esri/themes/light/main.css" />
    <script src="https://js.arcgis.com/4.19/"></script>

    <script>
      require([
        "esri/WebScene",
        "esri/views/SceneView",
        "esri/layers/GraphicsLayer",
        "esri/widgets/Sketch/SketchViewModel",
        "esri/widgets/Slider",
        "esri/geometry/geometryEngine",
        "esri/Graphic",
        "esri/core/promiseUtils"
      ], function(
        WebScene,
        SceneView,
        GraphicsLayer,
        SketchViewModel,
        Slider,
        geometryEngine,
        Graphic,
        promiseUtils
      ) {

        // Load webscene and display it in a SceneView
        const webscene = new WebScene({
          portalItem: {
            id: "fb5948b2bb76439792786000b942e5b7"
          }
        });
        // create the SceneView
        const view = new SceneView({
          container: "viewDiv",
          map: webscene,
        });
        window.view = view;
        // add a GraphicsLayer for the sketches and the buffer
        const sketchLayer = new GraphicsLayer();
        const bufferLayer = new GraphicsLayer();
        view.map.addMany([bufferLayer, sketchLayer]);

        let sceneLayer = null;
        let sceneLayerView = null;
        let bufferSize = 0;

        // Assign scene layer once webscene is loaded and initialize UI
        webscene.load().then(function() {

          sceneLayer = webscene.layers.find(function(layer) {
            return layer.title === "Helsinki textured buildings";
          });
          sceneLayer.outFields = ["buildingMaterial", "yearCompleted"];

          view.whenLayerView(sceneLayer).then(function (layerView) {
            sceneLayerView = layerView;
            queryDiv.style.display = "block";
          });
        });

        view.ui.add([queryDiv], "bottom-left");
        view.ui.add([resultDiv], "top-right");

        // use SketchViewModel to draw polygons that are used as a query
        let sketchGeometry = null;
        const sketchViewModel = new SketchViewModel({
          layer: sketchLayer,
          defaultUpdateOptions: {
            tool: "reshape",
            toggleToolOnClick: false
          },
          view: view,
          defaultCreateOptions: { hasZ: false }
        });

        sketchViewModel.on("create", function(event) {
          if (event.state === "complete") {
            sketchGeometry = event.graphic.geometry;
            runQuery();
          }
        });

        sketchViewModel.on("update", function(event) {
          if (event.state === "complete") {
            sketchGeometry = event.graphics[0].geometry;
            runQuery();
          }
        });
        // draw geometry buttons - use the selected geometry to sktech
        document
          .getElementById("point-geometry-button")
          .addEventListener("click", geometryButtonsClickHandler);
        document
          .getElementById("line-geometry-button")
          .addEventListener("click", geometryButtonsClickHandler);
        document
          .getElementById("polygon-geometry-button")
          .addEventListener("click", geometryButtonsClickHandler);
        function geometryButtonsClickHandler(event) {
          const geometryType = event.target.value;
          clearGeometry();
          sketchViewModel.create(geometryType);
        }

        const bufferNumSlider = new Slider({
          container: "bufferNum",
          min: 0,
          max: 500,
          steps: 1,
          visibleElements: {
            labels: true,
          },
          precision: 0,
          labelFormatFunction: function(value, type) {
            return value.toString() + "m";
          },
          values: [0]
        });
        // get user entered values for buffer
        bufferNumSlider.on(["thumb-change", "thumb-drag"], bufferVariablesChanged);
        function bufferVariablesChanged(event) {
          bufferSize = event.value;
          runQuery();
        }
        // Clear the geometry and set the default renderer
        document
          .getElementById("clearGeometry")
          .addEventListener("click", clearGeometry);

        // Clear the geometry and set the default renderer
        function clearGeometry() {
          sketchGeometry = null;
          sketchViewModel.cancel();
          sketchLayer.removeAll();
          bufferLayer.removeAll();
          clearHighlighting();
          clearCharts();
          resultDiv.style.display = "none";
        }

        // set the geometry query on the visible SceneLayerView
        var debouncedRunQuery = promiseUtils.debounce(function() {
          if (!sketchGeometry) {
            return;
          }

          resultDiv.style.display = "block";
          updateBufferGraphic(bufferSize);
          return promiseUtils.eachAlways([
            queryStatistics(),
            updateSceneLayer()
          ]);
        });

        function runQuery() {
          debouncedRunQuery().catch((error) => {
            if (error.name === "AbortError") {
              return;
            }

            console.error(error);
          })
        }

        // Set the renderer with objectIds
        var highlightHandle = null;
        function clearHighlighting() {
          if (highlightHandle) {
            highlightHandle.remove();
            highlightHandle = null;
          }
        }

        function highlightBuildings(objectIds) {
          // Remove any previous highlighting
          clearHighlighting();
          const objectIdField = sceneLayer.objectIdField;
          document.getElementById("count").innerHTML = objectIds.length;

          highlightHandle = sceneLayerView.highlight(objectIds);
        }

        // update the graphic with buffer
        function updateBufferGraphic(buffer) {

          // add a polygon graphic for the buffer
          if (buffer > 0) {
            var bufferGeometry = geometryEngine.geodesicBuffer(
              sketchGeometry,
              buffer,
              "meters"
            );
            if (bufferLayer.graphics.length === 0) {
              bufferLayer.add(
                new Graphic({
                  geometry: bufferGeometry,
                  symbol: sketchViewModel.polygonSymbol
                })
              );
            } else {
              bufferLayer.graphics.getItemAt(0).geometry = bufferGeometry;
            }
          } else {
            bufferLayer.removeAll();
          }
        }

        function updateSceneLayer() {
          const query = sceneLayerView.createQuery();
          query.geometry = sketchGeometry;
          query.distance = bufferSize;
          return sceneLayerView
            .queryObjectIds(query)
            .then(highlightBuildings);
        }

        var yearChart = null;
        var materialChart = null;

        function queryStatistics() {
          const statDefinitions = [
            {
              onStatisticField:
                "CASE WHEN buildingMaterial = 'concrete or lightweight concrete' THEN 1 ELSE 0 END",
              outStatisticFieldName: "material_concrete",
              statisticType: "sum"
            },
            {
              onStatisticField:
                "CASE WHEN buildingMaterial = 'brick' THEN 1 ELSE 0 END",
              outStatisticFieldName: "material_brick",
              statisticType: "sum"
            },
            {
              onStatisticField:
                "CASE WHEN buildingMaterial = 'wood' THEN 1 ELSE 0 END",
              outStatisticFieldName: "material_wood",
              statisticType: "sum"
            },
            {
              onStatisticField:
                "CASE WHEN buildingMaterial = 'steel' THEN 1 ELSE 0 END",
              outStatisticFieldName: "material_steel",
              statisticType: "sum"
            },
            {
              onStatisticField:
                "CASE WHEN buildingMaterial IN ('concrete or lightweight concrete', 'brick', 'wood', 'steel') THEN 0 ELSE 1 END",
              outStatisticFieldName: "material_other",
              statisticType: "sum"
            },
            {
              onStatisticField:
                "CASE WHEN (yearCompleted >= '1850' AND yearCompleted <= '1899') THEN 1 ELSE 0 END",
              outStatisticFieldName: "year_1850",
              statisticType: "sum"
            },
            {
              onStatisticField:
                "CASE WHEN (yearCompleted >= '1900' AND yearCompleted <= '1924') THEN 1 ELSE 0 END",
              outStatisticFieldName: "year_1900",
              statisticType: "sum"
            },
            {
              onStatisticField:
                "CASE WHEN (yearCompleted >= '1925' AND yearCompleted <= '1949') THEN 1 ELSE 0 END",
              outStatisticFieldName: "year_1925",
              statisticType: "sum"
            },
            {
              onStatisticField:
                "CASE WHEN (yearCompleted >= '1950' AND yearCompleted <= '1974') THEN 1 ELSE 0 END",
              outStatisticFieldName: "year_1950",
              statisticType: "sum"
            },
            {
              onStatisticField:
                "CASE WHEN (yearCompleted >= '1975' AND yearCompleted <= '1999') THEN 1 ELSE 0 END",
              outStatisticFieldName: "year_1975",
              statisticType: "sum"
            },
            {
              onStatisticField:
                "CASE WHEN (yearCompleted >= '2000' AND yearCompleted <= '2015') THEN 1 ELSE 0 END",
              outStatisticFieldName: "year_2000",
              statisticType: "sum"
            }
          ];
          const query = sceneLayerView.createQuery();
          query.geometry = sketchGeometry;
          query.distance = bufferSize;
          query.outStatistics = statDefinitions;

          return sceneLayerView.queryFeatures(query).then(function(result) {
            const allStats = result.features[0].attributes;
            updateChart(materialChart, [
              allStats.material_concrete,
              allStats.material_brick,
              allStats.material_wood,
              allStats.material_steel,
              allStats.material_other
            ]);
            updateChart(yearChart, [
              allStats.year_1850,
              allStats.year_1900,
              allStats.year_1925,
              allStats.year_1950,
              allStats.year_1975,
              allStats.year_2000
            ]);
          }, console.error);
        }

        // Updates the given chart with new data
        function updateChart(chart, dataValues) {
          chart.data.datasets[0].data = dataValues;
          chart.update();
        }

        function createYearChart() {

          const yearCanvas = document.getElementById("year-chart");
          yearChart = new Chart(yearCanvas.getContext("2d"), {
            type: "horizontalBar",
            data: {
              labels: [
                "1850-1899",
                "1900-1924",
                "1925-1949",
                "1950-1974",
                "1975-1999",
                "2000-2015"
              ],
              datasets: [
                {
                  label: "Build year",
                  backgroundColor: "#149dcf",
                  stack: "Stack 0",
                  data: [0, 0, 0, 0, 0, 0]
                }
              ]
            },
            options: {
              responsive: false,
              legend: {
                display: false
              },
              title: {
                display: true,
                text: "Build year"
              },
              scales: {
                xAxes: [
                  {
                    stacked: true,
                    ticks: {
                      beginAtZero: true,
                      precision: 0
                    }
                  }
                ],
                yAxes: [
                  {
                    stacked: true
                  }
                ]
              }
            }
          });
        }
        function createMaterialChart() {
          const materialCanvas = document.getElementById("material-chart");
          materialChart = new Chart(materialCanvas.getContext("2d"), {
            type: "doughnut",
            data: {
              labels: ["Concrete", "Brick", "Wood", "Steel", "Other"],
              datasets: [
                {
                  backgroundColor: [
                    "#FD7F6F",
                    "#7EB0D5",
                    "#B2E061",
                    "#BD7EBE",
                    "#FFB55A"
                  ],
                  borderWidth: 0,
                  data: [0, 0, 0, 0, 0]
                }
              ]
            },
            options: {
              responsive: false,
              cutoutPercentage: 35,
              legend: {
                position: "bottom"
              },
              title: {
                display: true,
                text: "Building Material"
              }
            }
          });
        }

        function clearCharts() {
          updateChart(materialChart, [0, 0, 0, 0, 0]);
          updateChart(yearChart, [0, 0, 0, 0, 0, 0]);
          document.getElementById("count").innerHTML = 0;
        }

        createYearChart();
        createMaterialChart();

      });

    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
    <div id="queryDiv" class="esri-widget">
      <b>Query by geometry</b><br />
      <br />Draw a geometry to query by:
      <div class="geometry-options">
        <button
          class="esri-widget--button esri-icon-map-pin geometry-button"
          id="point-geometry-button"
          value="point"
          title="Query by point"
        ></button>
        <button
          class="esri-widget--button esri-icon-polyline geometry-button"
          id="line-geometry-button"
          value="polyline"
          title="Query by line"
        ></button>
        <button
          class="esri-widget--button esri-icon-polygon geometry-button"
          id="polygon-geometry-button"
          value="polygon"
          title="Query by polygon"
        ></button>
      </div>
      <br />
      <div class="tooltip">
        <label for="bufferNum">Set a geometry buffer size:</label>
        <div id="bufferNum"></div>
      </div>
      <br />
      <button class="esri-button" id="clearGeometry" type="button">
        Clear
      </button>
    </div>

    <div id="resultDiv" class="esri-widget">
      <div class="count">
        Selected Buildings:
        <div class="count" id="count">0</div>
      </div>
      <div class="charts">
        <div>
          <canvas id="year-chart" height="250" width="260" />
        </div>
        <div>
          <canvas id="material-chart" width="250" height="300" />
        </div>
      </div>
    </div>
  </body>
</html>


技术交流 省涯 QQ:2252224326 2252224326@qq.com 版权所有 http://blog.sina.com.cn/u/6029512413
原文地址:https://www.cnblogs.com/shengya/p/14931825.html