<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" /> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> <title></title> <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/dojo/dijit/themes/tundra/tundra.css"> <link rel="stylesheet" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css"> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } #map{ margin: 0; padding: 0; } </style> <script>var dojoConfig = { parseOnLoad: true };</script> <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/"></script> <script> dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("esri.map"); var map; function init() { var bounds = new esri.geometry.Extent({"xmin":-16108713,"ymin":2819886,"xmax":-9494769,"ymax":5549605,"spatialReference":{"wkid":102100}}); map = new esri.Map("map",{ extent: bounds }); var basemap = new esri.layers.ArcGISTiledMapServiceLayer("https://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer"); map.addLayer(basemap); dojo.connect(map, "onLoad", function() { dojo.connect(dijit.byId("map"), "resize", map, map.resize); showLines(); }); } function showLines() { var geometries = [ [[-120,30],[-110,40]], [[-120,40],[-110,30]] ]; dojo.forEach(geometries, function(path) { var line = new esri.geometry.Polyline(new esri.SpatialReference({ "wkid": 4326 })); line.addPath(path); var merc = esri.geometry.geographicToWebMercator(line); addGraphic(merc); }); clientSideIntersection(); } function clientSideIntersection() { var g1 = map.graphics.graphics[0].geometry; var g2 = map.graphics.graphics[1].geometry; var s1 = new esri.geometry.Point(g1.paths[0][0], map.spatialReference); var e1 = new esri.geometry.Point(g1.paths[0][1], map.spatialReference); var s2 = new esri.geometry.Point(g2.paths[0][0], map.spatialReference); var e2 = new esri.geometry.Point(g2.paths[0][1], map.spatialReference); var intersection = esri.geometry.getLineIntersection(s1, e1, s2, e2); console.log("intersection: ", intersection); map.graphics.add(new esri.Graphic(intersection, new esri.symbol.SimpleMarkerSymbol())); } function addGraphic(geom) { var sym = new esri.symbol.SimpleLineSymbol(); map.graphics.add(new esri.Graphic(geom, sym)); } dojo.ready(init); </script> </head> <body class="tundra"> <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width: 100%; height: 100%; margin: 0;"> <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"> </div> </div> </body> </html>
Signed in members can post, follow updates, and more. New here? Register a free account.
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.