Hi,
how to draw a polyline between two points
Thanks Robert,
I got to work with following code
function init() {
dojo.connect(map, "onLoad", function () {
debugger; dojo.connect(dijit.byId("map"), "resize", map, map.resize); var p1 = new esri.geometry.Point(217370.447, 1172344.449, map.spatialReference); // var p2 = esri.geometry.geographicToWebMercator(new esri.geometry.Point(-90, 40, map.spatialReference)); line = new esri.geometry.Polyline(); line.addPath([p1]); // lineGraphic = map.graphics.add(new esri.Graphic(line, new esri.symbol.SimpleLineSymbol())); // map.graphics.add(new esri.Graphic(p1, new esri.symbol.SimpleMarkerSymbol())); // map.graphics.add(new esri.Graphic(p2, new esri.symbol.SimpleMarkerSymbol()));
dojo.connect(map, "onClick", addPt); });
}
function addPt(e) { debugger; // create a new path using the current line endpoint and the click point //var p2 = esri.geometry.geographicToWebMercator(new esri.geometry.Point(e.mapPoint.x, e.mapPoint.y, map.spatialReference)); //line.addPath([p2]); var pathCount = line.paths.length; line.addPath([line.paths[pathCount - 1][line.paths[pathCount - 1].length - 1],[e.mapPoint.x, e.mapPoint.y]]); lineGraphic = map.graphics.add(new esri.Graphic(line, new esri.symbol.SimpleLineSymbol())); lineGraphic.setGeometry(line); map.graphics.add(new esri.Graphic(e.mapPoint, new esri.symbol.SimpleMarkerSymbol())); }
dojo.ready(init);
Robert,
Thanks for the suggestion
Bharath,
You Really need to get away from using Legacy coding style like that. When you More to JS API 4.0 you will Not be able to use Legacy anymore. And Dojo Connect is depreciated you should be using AMD coding style and Dojo on instead of connect.
<SPAN class="operator token"><</SPAN>script<SPAN class="operator token">></SPAN> <SPAN class="keyword token">var</SPAN> map<SPAN class="punctuation token">,</SPAN> line<SPAN class="punctuation token">;</SPAN> <SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN> <SPAN class="string token">"esri/map"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/geometry/Point"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/geometry/Polyline"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/Graphic"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/symbol/SimpleMarkerSymbol"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/symbol/SimpleLineSymbol"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"dojo/domReady!"</SPAN> <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN> Map<SPAN class="punctuation token">,</SPAN> Point<SPAN class="punctuation token">,</SPAN> Polyline<SPAN class="punctuation token">,</SPAN> Graphic<SPAN class="punctuation token">,</SPAN> SimpleMarkerSymbol<SPAN class="punctuation token">,</SPAN> SimpleLineSymbol <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> map <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Map</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"mapDiv"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">{</SPAN> basemap<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"topo"</SPAN><SPAN class="punctuation token">,</SPAN> center<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="operator token">-</SPAN><SPAN class="number token">92.315097</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">34.733316</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">16</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"onLoad"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">//map.on("resize", map.resize);</SPAN> <SPAN class="keyword token">var</SPAN> p1 <SPAN class="operator token">=</SPAN> <SPAN class="token function">Point</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">217370.447</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">1172344.449</SPAN><SPAN class="punctuation token">,</SPAN> map<SPAN class="punctuation token">.</SPAN>spatialReference<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> line <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Polyline</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> line<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addPath</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>p1<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> map<SPAN class="punctuation token">.</SPAN><SPAN class="token function">on</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="string token">"onClick"</SPAN><SPAN class="punctuation token">,</SPAN> addPt<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="keyword token">function</SPAN> <SPAN class="token function">addPt</SPAN><SPAN class="punctuation token">(</SPAN>e<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">var</SPAN> pathCount <SPAN class="operator token">=</SPAN> line<SPAN class="punctuation token">.</SPAN>paths<SPAN class="punctuation token">.</SPAN>length<SPAN class="punctuation token">;</SPAN> line<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addPath</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN>line<SPAN class="punctuation token">.</SPAN>paths<SPAN class="punctuation token">[</SPAN>pathCount <SPAN class="operator token">-</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">[</SPAN>line<SPAN class="punctuation token">.</SPAN>paths<SPAN class="punctuation token">[</SPAN>pathCount <SPAN class="operator token">-</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">.</SPAN>length <SPAN class="operator token">-</SPAN> <SPAN class="number token">1</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="punctuation token">[</SPAN>e<SPAN class="punctuation token">.</SPAN>mapPoint<SPAN class="punctuation token">.</SPAN>x<SPAN class="punctuation token">,</SPAN> e<SPAN class="punctuation token">.</SPAN>mapPoint<SPAN class="punctuation token">.</SPAN>y<SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> lineGraphic <SPAN class="operator token">=</SPAN> map<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Graphic</SPAN><SPAN class="punctuation token">(</SPAN>line<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SimpleLineSymbol</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> lineGraphic<SPAN class="punctuation token">.</SPAN><SPAN class="token function">setGeometry</SPAN><SPAN class="punctuation token">(</SPAN>line<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> map<SPAN class="punctuation token">.</SPAN>graphics<SPAN class="punctuation token">.</SPAN><SPAN class="token function">add</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Graphic</SPAN><SPAN class="punctuation token">(</SPAN>e<SPAN class="punctuation token">.</SPAN>mapPoint<SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SimpleMarkerSymbol</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="punctuation token">}</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> <SPAN class="operator token"><</SPAN><SPAN class="operator token">/</SPAN>script<SPAN class="operator token">></SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
Just use some code like this:
<SPAN class="token function">require</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN> <SPAN class="string token">"esri/geometry/Polyline"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/SpatialReference"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"esri/geometry/Point"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN> <SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">function</SPAN><SPAN class="punctuation token">(</SPAN>Polyline<SPAN class="punctuation token">,</SPAN> SpatialReference<SPAN class="punctuation token">,</SPAN> Point<SPAN class="punctuation token">,</SPAN> <SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN><SPAN class="punctuation token">.</SPAN> <SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="keyword token">var</SPAN> polyline <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Polyline</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SpatialReference</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>wkid<SPAN class="punctuation token">:</SPAN><SPAN class="number token">4326</SPAN><SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN> polyline<SPAN class="punctuation token">.</SPAN><SPAN class="token function">addPath</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">[</SPAN><SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Point</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">10</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">10</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">Point</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="number token">20</SPAN><SPAN class="punctuation token">,</SPAN><SPAN class="number token">20</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN><SPAN class="line-numbers-rows"><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN><SPAN></SPAN></SPAN>
Los miembros registrados pueden publicar, seguir actualizaciones y más. ¿Nuevo aquí? Regístrate gratis.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.