esri.geometry绘制几何图形

1，绘制圆形（Circle）

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>esri geometry</title>
    <link rel="stylesheet" href="../../static/thirdparty/agsapi/3.14/esri/css/esri.css">
    <script src="../../static/thirdparty/agsapi/3.14/init.js"></script>
    <style>
        html,body,
        #map{
            margin: 0px;
            padding: 0px;
            width: 100%;
            height: 100%;
        }
    </style>

</head>
<body>
<div id="map"></div>

<script>
    var map;
    require([
        "esri/map",
        "esri/geometry/Circle",
        "esri/symbols/SimpleFillSymbol",
        "esri/graphic",
        "esri/layers/GraphicsLayer"
    ],function (Map, Circle, SimpleFillSymbol,Graphic,GraphicsLayer) {
        map = new Map("map",{
            zoom:12,
            center: [120.01876831051501, 32.52459158998377],
            basemap:"osm"
        });

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

        var circleGeometry = new Circle([120.01876831051501, 32.52459158998377],{
            radius: 2000,
            geodesic: true
        });
        var gl = new GraphicsLayer({ id: "circles" });
        var graphic = new Graphic(circleGeometry, symbol);
        gl.add(graphic);
        map.addLayer(gl);

    })
</script>

</body>
</html>

参考Arcgis API：https://developers.arcgis.com/javascript/3/jssamples/graphics_create_circles.html

2，绘制区域（Extent）

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>esri geometry</title>
    <link rel="stylesheet" href="../../static/thirdparty/agsapi/3.14/esri/css/esri.css">
    <script src="../../static/thirdparty/agsapi/3.14/init.js"></script>
    <style>
        html,body,
        #map{
            margin: 0px;
            padding: 0px;
            width: 100%;
            height: 100%;
        }
    </style>

</head>
<body>
<div id="map"></div>

<script>
    var map;
    require([
        "esri/map",
        "esri/geometry/Extent",
        "esri/symbols/SimpleFillSymbol",
        "esri/graphic",
        "esri/layers/GraphicsLayer",
        "esri/SpatialReference"
    ],function (Map, Extent, SimpleFillSymbol,Graphic,GraphicsLayer,SpatialReference) {
        map = new Map("map",{
            zoom:10,
            center: [120.01876831051501, 32.52459158998377],
            basemap:"osm"
        });

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

        var extent = new Extent(119.531141,32.846435,119.735762,32.761017, 
            new SpatialReference({ wkid:4326 }));

        var gl = new GraphicsLayer({ id: "extent" });
        var graphic = new Graphic(extent, symbol);
        gl.add(graphic);
        map.addLayer(gl);

    })
</script>

</body>
</html>

esri.geometry绘制几何图形

猜你喜欢