Enterprise local web effect

Insert picture description here

One. Background and goals

(1) Background: Recently, I have seen many tutorials that use downloaded GIS data combined with rhino and other design software to generate 3D models. Personally, I feel that these design software are used to quickly generate 3D models, especially the GIS data is more troublesome. . So here is a summary of a tutorial to quickly build a three-dimensional scene directly through ArcGIS software (the data in this tutorial is demonstration data, and accurate data can be obtained through the relevant planning department for real projects).

(2) Goal:

Download building vector base data and environmental vector data
Quickly build a 3D scene in ArcGIS software

two. Download data

1. Download building data

Since open-source vector data download sites generally have relatively few domestic building data, here is the shapefile data of domestic second-tier cities that were searched and downloaded in CSDN. In this tutorial, Chengdu city building data is used.

After the download is complete, you can view the data in ArcGIS Pro:

Insert picture description here
By viewing the layer properties, you can view the extent of the circumscribed rectangle that contains all the polygon features:

2. Download background data through OpenStreetMap official website

Official website: https://www.openstreetmap.org/
However, there is a problem with downloading data from the official website . Filling in the previous extent will cause the area to be too large to download:
Insert picture description here
Therefore, it is recommended to use the BBBike website to download.

3. Download background data through BBBike website

Download URL: https://download.bbbike.org/osm
Insert picture description here

Note: But there is a shortcoming that the extent of the data cannot be accurate, and how to input the coordinates of a specific point during the operation. But we can choose a slightly larger range. If the data range is too large in the subsequent processing, you can use the Clip tool in Pro to cut out the elements outside the range.

Click extract and wait for a few minutes to complete the download. You can view the status of the data download. After completion, download the data online: the
Insert picture description here
downloaded shapefile data contains multiple layer data, and you can choose the appropriate data as the background.

three. Build a scene in Pro

1. Create the scene and background

The default online basemap is not used here, because a lot of domestic basemap data has a certain offset, and it does not fit well with the position of the feature layer. Here, choose to import the previously downloaded background data in Pro as the 3D scene background data.

(1) Create a new global scene view
Insert picture description here
(2) Add background elements The
following elements are selected:

main road
Nature (mainly water)
Land use type (mainly vegetation)

(3) Set the corresponding color in the layer properties
Insert picture description here

2. Add building model

(1) Add two-dimensional building data.
Add building area elements to the 3Dlayers layer group.
Insert picture description here
(2) Add height field. Add a height field to the
attribute list. The height is floor*3. Use the field calculator to calculate:

(3) Build
Select the absolute height in the Appearance panel of the model , and set the height attribute field Height:

(4) Modify model transparency
Insert picture description here

(5) Convert data
Convert the created 3DLayer to Multipatch 3D model format to improve display efficiency.
The tools used are:

3. Quick drawing

(1) Create bookmarks You
can save bookmarks in the perspectives and scenes you want to participate in the drawing.
Insert picture description here
(2) Create a layout and
insert a new Layout:

Then you can freely draw in the drawing view, for example, insert the previously created bookmarks:

four. Extension-create a web application

1. Publish 3D scene service

Publish 3D scene service to online or local Enterprise environment:
Insert picture description here
A web page can be completed by simple front-end code to display the previously published 3D service:

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

    <link
      rel="stylesheet"
      href="https://js.arcgis.com/4.16/esri/themes/light/main.css"
    />
    <script src="https://js.arcgis.com/4.16/"></script>
    <script>
      require([
        "esri/WebScene",
        "esri/views/SceneView",
        "esri/config"
      ], function (WebScene, SceneView, esriConfig) {
     
     
        // load webscene from ArcGIS Online
        const map = new WebScene({
     
     
          portalItem: {
     
     
            id: "xxxxxxxxxxxx"
          }
        });

        const view = new SceneView({
     
     
          container: "viewDiv",
          map: map
        });
      });
    </script>
  </head>

  <body>
    <div id="viewDiv"></div>
  </body>
</html>

Insert picture description here
This is the service for the directly released elements, and the data volume cannot be displayed when the data volume is too small at a small scale. If you want to have the efficiency of starting the article display, you can publish the converted multipatch model data, the display will be very smooth, and the transparency can be set through the front-end code.

Quickly build a 3D scene tutorial in ArcGIS (from data acquisition to software production)