测量工具.html

最新推荐文章于 2020-12-20 03:13:46 发布
学无止境慢慢来
最新推荐文章于 2020-12-20 03:13:46 发布
阅读量1k
点赞数 1
分类专栏： arcgis_js_api_demo3.27
arcgis_js_api_demo3.27 专栏收录该内容
20 篇文章 0 订阅
订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>测量工具</title>

    <link rel="stylesheet" href="http://localhost:8080/arcgis_js_v327_sdk/arcgis_js_api/library/3.27/3.27/esri/themes/calcite/dijit/calcite.css">
    <link rel="stylesheet" href="http://localhost:8080/arcgis_js_v327_sdk/arcgis_js_api/library/3.27/3.27/esri/css/esri.css">
    <script src="http://localhost:8080/arcgis_js_v327_sdk/arcgis_js_api/library/3.27/3.27/init.js"></script>
    <style>
        html,body {
            height:100%;
            width:100%;
            margin:0;
        }
        body {
            background-color:#FFF;
            overflow:hidden;
            font-family:"Trebuchet MS";
        }
        #map {
            border:solid 2px #808775;
            -moz-border-radius:4px;
            -webkit-border-radius:4px;
            border-radius:4px;
            margin:5px;
            padding:0px;
        }
        #titlePane{
            width:280px;
        }
    </style>
    <script>
        var map;
        require([
            "dojo/dom",
            "esri/Color",
            "dojo/keys",
            "dojo/parser",

            "esri/config",
            "esri/sniff",
            "esri/map",
            "esri/SnappingManager",
            "esri/dijit/Measurement",
            "esri/layers/FeatureLayer",
            "esri/renderers/SimpleRenderer",
            "esri/tasks/GeometryService",
            "esri/symbols/SimpleLineSymbol",
            "esri/symbols/SimpleFillSymbol",

            "esri/dijit/Scalebar",
            "dijit/layout/BorderContainer",
            "dijit/layout/ContentPane",
            "dijit/TitlePane",
            "dijit/form/CheckBox",
            "dojo/domReady!"
        ], function(
            dom, Color, keys, parser,
            esriConfig, has, Map, SnappingManager, Measurement, FeatureLayer, SimpleRenderer, GeometryService, SimpleLineSymbol, SimpleFillSymbol
        ) {
            // 从语法上描述或分析（词句等）;
            parser.parse();
            //此示例可能需要一个代理页来处理与ArcGIS服务器服务的通信。
            // 您将需要将下面的url替换为计算机上代理的位置。
            // 有关设置代理页的详细信息，请参阅“使用代理页”帮助主题。
            esriConfig.defaults.io.proxyUrl = "/proxy/";
            esriConfig.defaults.io.alwaysUseProxy = false;

            // 此服务仅用于开发和测试目的。我们建议您创建自己的几何服务，以便在应用程序中使用。
            esriConfig.defaults.geometryService = new GeometryService("https://utility.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

            map = new Map("map", {
                basemap: "satellite",
                center: [-85.743, 38.256],
                zoom: 17
            });

            var sfs = new SimpleFillSymbol(
                // 填充样式可选项：solid,horizontal,vertical,cross,scalar(带圆心圆),backwarddiagonal(/),
                // forwarddiagonal(\),diagonalcross(对角线交叉),windbarb(宽对角线交叉)
                "solid",

                // 轮廓线。
                new SimpleLineSymbol(
                    // 线样式可选项：solid,dash,dot,dashdot,longdashdotdot,none,shortdash,shortdot,shortdashdot,
                    // shortdashdotdot,longdash,longdashdot
                    "solid",
                    // 线颜色
                    new Color([195, 176, 23]),
                    // 线宽，单位像素。
                    2
                ),

                // 填充颜色可选项：new Color([255,255,0,0.25]),null(透明)
                null
            );

            var parcelsLayer = new FeatureLayer("https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Louisville/LOJIC_LandRecords_Louisville/MapServer/0", {
                mode: FeatureLayer.MODE_ONDEMAND,
                outFields: ["*"]
            });
            parcelsLayer.setRenderer(new SimpleRenderer(sfs));
            map.addLayers([parcelsLayer]);

            //dojo.keys.copyKey maps to CTRL on windows and Cmd on Mac., but has wrong code for Chrome on Mac
            var snapManager = map.enableSnapping({
                snapKey: has("mac") ? keys.META : keys.CTRL
            });
            var layerInfos = [{
                layer: parcelsLayer
            }];
            snapManager.setLayerInfos(layerInfos);

            var measurement = new Measurement({
                map: map
            }, dom.byId("measurementDiv"));
            measurement.startup();
        });
    </script>
</head>

<body class="calcite">
    <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false"
         style="width:100%; height:100%;">
        <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'">
            <div style="position:absolute; right:20px; top:10px; z-Index:999;">
                <div id="titlePane" data-dojo-type="dijit/TitlePane" data-dojo-props="title:'测量', closable:false">
                    <div id="measurementDiv"></div>
                    <span style="font-size:medium;padding:5px 5px;">按住<b>ctrl键</b>以启用快照。</span>
                </div>
            </div>
        </div>
    </div>
</body>
</html>