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

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代码

测线测面控件