在gisMap上畫一個圓圈

我不知道如何在gismap上畫一個圓。在gisMap上畫一個圓圈

點擊按鈕後，得到一個圓的半徑（val）。如果半徑是== 1，那麼我想在地圖上的半徑1上繪製圓，並將此線用作圓的中心（21.1,52.14）。

這是怎麼用d3.js的？

代碼：

function map() 
{ 
     var map; 

     require(["esri/map", "dojo/domReady!"], function(Map) { 
     map = new Map("map", { 
      basemap: "topo", //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd 
      center: [14.70, 52.53], // longitude, latitude 
      zoom: 6 
     }); 
     }); 

} 

    function DrawCircle() 
    { 
     var val = document.getElementById("InputMin1").value; 

    if(val == 1) 
    { 
     var svg = d3.select('svg'); 
     var originX = 21.1; 
     var originY = 52.14; 
     var outerCircleRadius = 100; 

     var outerCircle = svg.append("circle").attr({ 
      cx: originX, 
      cy: originY, 
      r: outerCircleRadius, 
      fill: "none", 
      stroke: "black" 
     }); 
    }

}

來源

2016-04-26 Tomasz Jeznach

好，因爲我瞭解你只是想添加一定距離的圓ESRI地圖上。

正在運行的樣品在中心上畫一個圓圈（21.1,52.14）。

var map; 
 

 
     require(["esri/map", "esri/geometry/Circle", "esri/layers/GraphicsLayer","esri/graphic", "esri/units", "esri/geometry/Point", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol", "esri/Color"], function(Map, Circle,GraphicsLayer, Graphic, Units, Point,SimpleFillSymbol, SimpleLineSymbol, Color) { 
 
     map = new Map("map", { 
 
      basemap: "topo", 
 
      center: [14.70, 52.53], // longitude, latitude 
 
      zoom: 5 
 
     }); 
 
     
 
     var centerPoint = new Point([21.1, 52.14]); 
 
    var circleGeometry = new Circle({ 
 
    center: centerPoint, 
 
    radius: 100,    // add distance 
 
    radiusUnit: Units.MILES, // add distance unit 
 
    geodesic: true 
 
    }); 
 
     var gl = new GraphicsLayer({ id: "circles" }); 
 
     map.addLayer(gl); 
 
     var sfs = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, 
 
    new SimpleLineSymbol(SimpleLineSymbol.STYLE_DASHDOT, 
 
    new Color([255,0,0]), 2),new Color([255,255,0,0.25]) 
 
); 
 
     var graphic = new Graphic(circleGeometry,sfs); 
 
     gl.add(graphic); 
 
     });

html, body, #map { 
 
     height: 100%; 
 
     margin: 0; 
 
     padding: 0; 
 
     }

<link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css"> 
 
<script src="https://js.arcgis.com/3.16/"></script> 
 

 
     
 

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

希望這將幫助你:)

來源

2016-05-06 13:13:58