arcgis_js_api3.27 创建圆.html

最新推荐文章于 2024-03-27 12:00:23 发布

学无止境慢慢来

最新推荐文章于 2024-03-27 12:00:23 发布

阅读量282

点赞数

CC 4.0 BY-SA版权

分类专栏： arcgis_js_api_demo3.27

本文链接：https://blog.youkuaiyun.com/weixin_42193179/article/details/88384998

arcgis_js_api_demo3.27 专栏收录该内容

20 篇文章

订阅专栏

本文介绍如何使用ArcGIS JS API 3.27版本创建动态圆形图形，并通过单击地图事件调整其属性，包括测地线圆的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!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>arcgis_js_api3.27 创建圆</title>
    <!--以下是官网api-->
    <!--<link rel="stylesheet" href="https://js.arcgis.com/3.27/esri/css/esri.css">-->
    <!--<script src="https://js.arcgis.com/3.27/"></script>-->
    <!--以下是自己发布的服务api。-->
    <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, #map {
            height: 100%; width: 100%; margin: 0; padding: 0;
        }
        /*子元素字体大小的em是相对于父元素字体大小*/
        /*元素的width/height/padding/margin用em的话是相对于该元素的font-size*/
        #controls {
            background: #ffffff;
            /*box-shadow: h-shadow v-shadow blur spread color;*/
            box-shadow: 0 6px 6px -1px #999;
            color: #444;
            font-family: sans-serif;
            padding: 1em;  /*font-size字体大小的内边距。*/
            position: absolute;
            top: 1em;  /*font-size字高度的距离。*/
            left: 1em;  /*font-size字宽度的距离。*/
            /*width: auto;*/
            /*height: auto;*/
            z-index: 40;  /*堆叠顺序。数字越大越靠上。*/
        }
        #controls div {
            padding: 0 0 1em 0;
        }
    </style>
    <script>
        var map;

        require([
            "esri/map", "esri/geometry/Circle", "esri/symbols/SimpleFillSymbol",
            "esri/graphic", "esri/layers/GraphicsLayer",
            "dojo/dom", "dojo/dom-attr", "dojo/domReady!"
        ], function(
            Map, Circle, SimpleFillSymbol,
            Graphic, GraphicsLayer,
            dom, domAttr
        ) {
            map = new Map("map", {
                basemap: "streets",
                center: [-120.741, 56.39],
                slider: false,  // 缩放滑块。
                zoom: 6
            });
            // 面符号，不填充颜色，轮廓线蓝色。
            var symbol = new SimpleFillSymbol().setColor(null).outline.setColor("blue");
            // 创建图形层。
            var gl = new GraphicsLayer({ id: "circles" });
            // 测量元素。
            var geodesic = dom.byId("geodesic");
            // 地图添加图形层。
            map.addLayer(gl);
            // 给地图添加单击事件。
            map.on("click", function(e) {
                // map.extent，地图单元中当前地图的范围。
                // getWidth --> xmin和xmax之间的距离。
                var radius = map.extent.getWidth() / 10;
                // 圆的半径始终是一样的数值radius: 308683.2950267736，
                // 只是测地线圆显得要大一些。(不知道原因。)
                var circle = new Circle({
                    center: e.mapPoint, // 圆的中心点。
                    // 适用于中心点的空间参考被设置为web Mercator或geographic/geodesic(为true时，将会应用)。
                    // 其他坐标系不会产生测地线圆。默认情况下，值为false。
                    geodesic: domAttr.get(geodesic, "checked"),
                    // 半径。如果没有指定，默认为1000。
                    radius: radius
                });
                // console.log("e.mapPoint:", e.mapPoint);
                // console.log("radius:", radius);

                var graphic = new Graphic(circle, symbol);
                gl.add(graphic);
            });
        });
    </script>
</head>
<body>
    <div id="map"></div>
    <div id="controls">
        <div>单击地图</div>
        <input type="checkbox" id="geodesic">
        <label for="geodesic">Geodesic?</label>
    </div>
</body>
</html>