ArcGIS API for Javascript(三)

最新推荐文章于 2024-06-09 09:49:01 发布

会飞的鱼@

最新推荐文章于 2024-06-09 09:49:01 发布

阅读量702

点赞数 1

分类专栏： ArcGIS API for Javascript WebGIS

本文链接：https://blog.csdn.net/wenming111/article/details/105950625

版权

WebGIS 同时被 2 个专栏收录

8 篇文章 2 订阅

订阅专栏

ArcGIS API for Javascript

7 篇文章 2 订阅

订阅专栏

三维数据加载（BIM数据rvt格式数据）

1、安装部署软件（ArcGIS Enterprise10.8 单机部署，授权文件请自行像到arcgis申请）

系统要求：Windows Server2016 Standard

软件要求：server、portal、datastore、iis

参考文章：https://blog.csdn.net/weixin_44616652/article/details/104793299

安装步骤参考上述博客，本人实践成功，没有问题，该教程很详细，对此感谢作者。

tps：按照安装步骤一步步来，基本可以成功的。

2、使用arcgis pro发布三维数据服务(pro 2.5)

pro工具：

1）Create Buiding Scene Layer Package (将.rvt格式数据转成.slpk格式)

2） Share Package （发布三维场景数据）

3）查看三维数据（安装软件机器域名/arcgis/home/ ==》content）

3、展示三维数据

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <title>建筑模型</title>

    <style>
      html,
      body,
      #viewDiv {
        padding: 0;
        margin: 0;
        height: 100%;
        width: 100%;
      }

      #menu {
        padding: 0.8em;
      }
    </style>

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

    <script>
      require([
        "esri/Map",
        "esri/views/SceneView",
        "esri/layers/BuildingSceneLayer",
        "esri/widgets/Slice",
        "esri/widgets/LayerList",
        "esri/core/Collection"
      ], function(
        Map,
        SceneView,
        BuildingSceneLayer,
        Slice,
        LayerList,
        Collection
      ) {
        //加载地图底图
        const map = new Map({
         basemap: "osm"
        });
        //加载三维视图
        const view = new SceneView({
          container: "viewDiv",
          map: map
        });

        // 将三维建筑加载到三维视图中
        const buildingLayer = new BuildingSceneLayer({
          url:
            "你的三维服务地址",
          title: "station Building"
        });
        map.layers.add(buildingLayer);
        // 缩放到建筑物位置
        view.goTo({
          center: [113, 28],
          heading: -1,
          zoom: 20,
          tilt: 45
        });

        const excludedLayers = [];
        let doorsLayer;

        buildingLayer.when(function() {
          buildingLayer.allSublayers.forEach(function(layer) {
            switch (layer.modelName) {
              case "FullModel":
                layer.visible = true;
                break;
              case "Overview":
              case "Roofs":
              case "Walls":
              case "Rooms":
                layer.visible = false;
                break;
              case "Doors":
                doorsLayer = layer;
                excludedLayers.push(layer);
              case "StructuralColumns":
              case "Floors":
              case "Furniture":
              case "CurtainWallPanels":
                excludedLayers.push(layer);
                break;
              default:
                layer.visible = true;
            }
          });
        });

        view.when(function() {
          //加载控件
          const sliceButton = document.getElementById("slice");
          view.ui.add(sliceButton, "top-right");
          let sliceWidget = null;

          sliceButton.addEventListener("click", function() {
            if (sliceWidget) {
              sliceWidget.destroy();
              sliceWidget = null;
              sliceButton.classList.remove("active");
            } else {
              sliceWidget = new Slice({
                view: view
              });
              sliceWidget.viewModel.newSlice();
              sliceWidget.viewModel.excludedLayers.addMany(excludedLayers);
              view.ui.add(sliceWidget, "top-right");
              sliceButton.classList.add("active");
            }
          });
        });

        document
          .getElementById("color")
          .addEventListener("change", function(event) {
            if (event.target.checked) {
              // A renderer can be set on a BuildingComponentSublayer
              doorsLayer.renderer = {
                type: "unique-value",
                field: "AssemblyDesc",
                uniqueValueInfos: [
                  {
                    value: "Interior Doors",
                    symbol: {
                      type: "mesh-3d",
                      symbolLayers: [
                        {
                          type: "fill",
                          material: {
                            color: "red"
                          }
                        }
                      ]
                    }
                  }
                ]
              };
            } else {
              doorsLayer.renderer = null;
            }
          });

        view.ui.empty("top-left");
        view.ui.add("menu", "top-left");

        const layerList = new LayerList({
          view: view
        });

        view.ui.add(layerList, "top-left");
      });
    </script>
  </head>

  <body>
    <div id="viewDiv" class="esri-widget"></div>
    <button class="esri-button" id="slice" type="button" title="Slice layers">
      Slice layers
    </button>
    <div id="menu" class="esri-widget">
      <input type="checkbox" id="color" /><label for="color"
        >Display all interior doors with a red color</label
      >
    </div>
  </body>
</html>

效果图：

4、声明

1）文章来源于项目实践，文中存在错误或任何问题请留言，谢谢你的阅读

2）转载请标注来源，感谢

会飞的鱼@

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
2
评论
ArcGIS API for Javascript(三)

三维数据加载（BIM数据rvt格式数据）1、安装部署软件（ArcGIS Enterprise10.8 单机部署，授权文件请自行像到arcgis申请）系统要求：Windows Server2016 Standard软件要求：server、portal、datastore、iis2、使用arcgis pro发布三维数据服务(pro 2.5)pro工具：1）Create Bu...
复制链接

扫一扫

专栏目录