Нарисуйте круг на 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

Я знаю, что это не дает ответа на вопрос о D3.js, но если нет особых причин использовать D3, почему бы не использовать esri/geometry/Circle модуль? Он уже включен в API Esri JS, поэтому вам не нужно втягивать дополнительную библиотеку.

Круг (многоугольник), созданный определенной центральной точкой. Эта точка может быть представлена как объект esri/geometry/Point или массив значений широты/долготы.

Ссылка: https://developers.arcgis.com/javascript/jsapi/circle-amd.html

Пример: https://developers.arcgis.com/javascript/jssamples/graphics_create_circles.html

источник

2016-04-26 12:14:13 iH8

Причиной является основной кодер с использованием d3.js по математике модуля. Так что я должен сделать это через этот lib –

Хорошо, понял. Я оставлю ответ «как есть», может пригодиться другим людям, желающим рисовать круги с помощью Esri без D3 – iH8

Нарисуйте круг на gisMap

ответ

Смежные вопросы