第二话 3D地图基本控件——ArcGIS for JS 3D开发

最新推荐文章于 2024-07-07 10:08:32 发布

ShineMan-

最新推荐文章于 2024-07-07 10:08:32 发布

阅读量1.6k

点赞数

分类专栏： arcgis for js 文章标签： arcgis js 3D

本文链接：https://blog.csdn.net/Enbir/article/details/86680923

版权

arcgis for js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

3D基本控件加载

1、测线测面控件（js代码）

require([
    "esri/Map",
    "esri/views/SceneView",
    "esri/layers/SceneLayer",
    "esri/widgets/DirectLineMeasurement3D",
    "esri/widgets/AreaMeasurement3D"
], function(Map, SceneView, SceneLayer,DirectLineMeasurement3D,AreaMeasurement3D) {
    var activeWidget = null;
//    debugger;
    // Create Map
    var map = new Map({
        basemap: "streets",
        ground: "world-elevation"
    });

    // Create the SceneView
    var view = new SceneView({
        container: "viewDiv",
        map: map,
        camera: {
            position: [0.05099212,0.0436084,112.366],
            tilt: 81,
            heading: 50
        }
    });
    // add the toolbar for the measurement widgets
    view.ui.add("topbar", "bottom-right");

    // Create SceneLayer and add to the map
    var sceneLayer = new SceneLayer({
        url: "http://xxxxxxxxxx.esrichina.com/server/rest/services/Hosted/xxxxxxxxxxxxx/SceneServer",
        popupEnabled: true
    });
    map.add(sceneLayer);

    // Create MeshSymbol3D for symbolizing SceneLayer
/*    var symbol = {
//        type: "mesh-3d", // autocasts as new MeshSymbol3D()
        type: "web-style",
        symbolLayers: [{
            type: "fill", // autocasts as new FillSymbol3DLayer()
            // If the value of material is not assigned, the default color will be grey
            material: {
                color: [244, 247, 134]
            }
        }]
    };*/
    // Add the renderer to sceneLayer
    sceneLayer.renderer = {
        type: "simple", // autocasts as new SimpleRenderer()
    };

    document.getElementById("distanceButton").addEventListener("click",
        function () {
            setActiveWidget(null);
            if (!this.classList.contains('active')) {
                setActiveWidget('distance');
            } else {
                setActiveButton(null);
            }
        });

    document.getElementById("areaButton").addEventListener("click",
        function () {
            setActiveWidget(null);
            if (!this.classList.contains('active')) {
                setActiveWidget('area');
            } else {
                setActiveButton(null);
            }
        });

    function setActiveWidget(type) {
        switch (type) {
            case "distance":
                activeWidget = new DirectLineMeasurement3D({
                    view: view
                });

                // skip the initial 'new measurement' button
                activeWidget.viewModel.newMeasurement();

                view.ui.add(activeWidget, "bottom-right");
                setActiveButton(document.getElementById('distanceButton'));
                break;
            case "area":
                activeWidget = new AreaMeasurement3D({
                    view: view
                });

                // skip the initial 'new measurement' button
                activeWidget.viewModel.newMeasurement();

                view.ui.add(activeWidget, "bottom-right");
                setActiveButton(document.getElementById('areaButton'));
                break;
            case null:
                if (activeWidget) {
                    view.ui.remove(activeWidget);
                    activeWidget.destroy();
                    activeWidget = null;
                }
                break;
        }
    }

    function setActiveButton(selectedButton) {
        // focus the view to activate keyboard shortcuts for sketching
        view.focus();
        var elements = document.getElementsByClassName("active");
        for (var i = 0; i < elements.length; i++) {
            elements[i].classList.remove("active");
        }
        if (selectedButton) {
            selectedButton.classList.add("active");
        }
    }
});

html代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta http-equiv="Access-Control-Allow-Origin" content="*" />
    <title>layer test</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }
        #topbar {
            background: #fff;
            padding: 10px;
        }
        .action-button {
            font-size: 16px;
            background-color: transparent;
            border: 1px solid #D3D3D3;
            color: #6e6e6e;
            height: 32px;
            width: 32px;
            text-align: center;
            box-shadow: 0 0 1px rgba(0, 0, 0, 0.3);
        }

        .action-button:hover,
        .action-button:focus {
            background: #0079c1;
            color: #e4e4e4;
        }

        .active {
            background: #0079c1;
            color: #e4e4e4;
        }

    </style>

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

    <script src="../js/map.js">
    </script>
</head>

<body>
<div id="viewDiv"></div>
<div id="topbar">
    <button class="action-button esri-icon-minus" id="distanceButton" type="button"
            title="Measure distance between two points"></button>
    <button class="action-button esri-icon-polygon" id="areaButton" type="button"
            title="Measure area"></button>
</div>
</body>
</html>