距离测量和面积测量 

<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport"
          content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <title>Measurement in 2D - 4.14</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="http://localhost/arcgis_js_v413_api/4.13/esri/css/main.css"/>

    <script type="text/javascript" src="http://localhost/arcgis_js_v413_api/4.13/init.js"></script>

    <script>
        require([
          "esri/layers/MapImageLayer",
          "esri/Map",
          "esri/views/MapView",
          "esri/WebMap",
          "esri/widgets/DistanceMeasurement2D",
          "esri/widgets/AreaMeasurement2D"
        ], function (MapImageLayer, Map, MapView, WebMap, DistanceMeasurement2D, AreaMeasurement2D) {
            var activeWidget = null;
            var lyr = new MapImageLayer("http://localhost:6080/arcgis/rest/services/ceshi/MapServer");  //该服务要共享everyone
            var mymap = new Map({
                //basemap: "osm",
                layers: [lyr]

            });
            // create the map view
            const view = new MapView({
                container: "viewDiv",
                map: mymap
            });

            // add the toolbar for the measurement widgets
            view.ui.add("topbar", "top-right");

            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 DistanceMeasurement2D({
                            view: view
                        });

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

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

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

                        view.ui.add(activeWidget, "top-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");
                }
            }
        });
    </script>
</head>

<body>
    <div id="viewDiv"></div>
    <div id="topbar">
        <button class="action-button esri-icon-measure-line"
                id="distanceButton"
                type="button"
                title="Measure distance between two or more points"></button>
        <button class="action-button esri-icon-measure-area"
                id="areaButton"
                type="button"
                title="Measure area"></button>
    </div>
</body>
</html>
posted @ 2020-01-13 16:42  恋上微笑的天使  阅读(496)  评论(0)    收藏  举报