arcgis api for javascript学习-geometry中的Circle

文章目录

  • 前言
  • 一、完整代码
  • 二、代码解释
    • 1.思路
  • 结果图
  • 总结


前言

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


一、完整代码


<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 circlestitle>
    <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.思路

  1. 定义圆符号样式
var symbol = new SimpleFillSymbol().setColor(null).outline.setColor("blue");
  1. 定义GraphicLayer或者使用map.graphics
var gl = new GraphicsLayer({ id: "circles" });
map.addLayer(gl);
  1. 定义Circle
var circle = new Circle({
                    center: point,//圆心
                    geodesic: domAttr.get(geodesic, "checked"),//当复选框被选中的时候,true,这个属性在不是投影坐标的时候会画成一个椭圆。
                    radius: radius
                });
  1. 定义graphic
var graphic = new Graphic(circle, symbol);
  1. 添加到地图
gl.add(graphic);

结果图


总结

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

你可能感兴趣的:(arcgis,for,js,3.x学习笔记,arcgisJS)