arcgis api for javascript学习-geometry中的Circle

最新推荐文章于 2022-01-24 16:22:26 发布

blog12138

最新推荐文章于 2022-01-24 16:22:26 发布

阅读量1.3k

点赞数

分类专栏： arcgis for js 3.x学习笔记文章标签： arcgisJS

本文链接：https://blog.youkuaiyun.com/Zzzpiu/article/details/109451203

版权

arcgis for js 3.x学习笔记专栏收录该内容

30 篇文章

订阅专栏

博客围绕arcgis中geometry的Circle API展开，介绍了使用该API绘制圆的完整代码及代码解释。思路包括定义圆符号样式、GraphicLayer或使用map.graphics、Circle、graphic并添加到地图，还提到投影为地理坐标时geodesic属性的设置注意事项。

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

前言

geometry中有直接生成圆的一个api：Circle；这个和其它的点、线、面差不多。

一、完整代码

<!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>Create circles</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.34/esri/css/esri.css">
    <style>
        html, body, #map {
            height: 100%; width: 100%; margin: 0; padding: 0;
        }
        #controls {
            background: #fff;
            box-shadow: 0 6px 6px -6px #999;
            color: #444;
            font-family: sans-serif;
            height: auto;
            left: 1em;
            padding: 1em;
            position: absolute;
            top: 1em;
            width: auto;
            z-index: 40;
        }
        #controls div {
            padding: 0 0 1em 0;
        }
    </style>

    <script src="https://js.arcgis.com/3.34/"></script>
    <script>
        var map;

        require([
            "esri/map", "esri/geometry/Circle", "esri/symbols/SimpleFillSymbol",
            "esri/graphic", "esri/layers/GraphicsLayer","esri/geometry/webMercatorUtils",
            "dojo/dom", "dojo/dom-attr", "dojo/domReady!"
        ], function(
            Map, Circle, SimpleFillSymbol,
            Graphic, GraphicsLayer,webMercatorUtils,
            dom, domAttr
        ) {
            map = new Map("map", {
                basemap: "topo-vector",//投影坐标
                center: [-120.741, 56.39],
                slider: false,
                zoom: 5
            });
            console.log(map);
            map.on("load",function () {
                console.log(map.spatialReference);
            });
            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) {
                var point = webMercatorUtils.webMercatorToGeographic(e.mapPoint);
                var radius = map.extent.getWidth() / 10;//半径单位默认是米
                var circle = new Circle({
                    center: point,//圆心
                    geodesic: domAttr.get(geodesic, "checked"),//当复选框被选中的时候，true,这个属性在不是投影坐标的时候会画成一个椭圆。
                    radius: radius
                });
                console.log("radius-->",radius);
                var graphic = new Graphic(circle, symbol);
                gl.add(graphic);
            });
        });
    </script>
</head>
<body>
<div id="map"></div>
<div id="controls">
    <div>Click the map.</div>
    <input type="checkbox" id="geodesic">
    <label for="geodesic">Geodesic?</label>
</div>
</body>
</html>

二、代码解释

1.思路

定义圆符号样式

var symbol = new SimpleFillSymbol().setColor(null).outline.setColor("blue");

定义GraphicLayer或者使用map.graphics

var gl = new GraphicsLayer({ id: "circles" });
map.addLayer(gl);

定义Circle

var circle = new Circle({
                    center: point,//圆心
                    geodesic: domAttr.get(geodesic, "checked"),//当复选框被选中的时候，true,这个属性在不是投影坐标的时候会画成一个椭圆。
                    radius: radius
                });

定义graphic

var graphic = new Graphic(circle, symbol);

添加到地图

gl.add(graphic);

结果图

在这里插入图片描述

总结

注意事项：geodesic这个属性是当投影为地理坐标时设置为true会生成圆，默认是false，当点击的点时地理坐标会生成一个椭圆