nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

polyline not visibel

LefterisKoumis

I have this simple code but the polyline is not drawing. The answer, I suspect is simple...but not for a novice in js. Thanks.

<!DOCTYPE html>

<html>

<head>

<style>

html, body, #map {

height: 100%; width: 100%; margin: 0; padding: 0;

}

</style>

var map;

require([

"esri/map",

"esri/geometry/Point",

"esri/symbols/SimpleMarkerSymbol",

"esri/symbols/SimpleLineSymbol",

"esri/graphic",

"esri/geometry/Polyline",

"esri/SpatialReference",

"esri/layers/GraphicsLayer",

"dojo/domReady!"

], function(

Map, Point, SimpleMarkerSymbol, SimpleLineSymbol, Graphic, Polyline, SpatialReference, GraphicsLayer

) {

map = new Map("map", {

basemap: "streets",

center: [-122.16,37.7238],

zoom: 10

});

map.on("load", function() {

var gl = new GraphicsLayer();

var myspatialref = new SpatialReference({wkid:102100});

var p = new Point((-122.159, 37.724),new SpatialReference(102100));

var t = new Point((-122.169, 37.721),new SpatialReference(102100));

var coords=[];

coords.push([p,t]);

var polyline = new Polyline(myspatialref);

var polylineSymbol = new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, 0xFF3333,1,3);

polyline.addPath(coords);

var polylineGraphic = new Graphic(polyline, polylineSymbol);

gl.add(polylineGraphic);

map.addLayer(gl);

});

</script>

</head>

<body>

</body>

</html>

Finde mehr Beiträge mit dem Tag

Accepted answers

ChrisSmith7

Here's a working sample, slightly modified from yours:

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>My Map</title>
  <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
  <style>
    html, body, #map {
      padding:0;
      margin:0;
      height:100%;
    }
  </style>
  <script src="//js.arcgis.com/3.13/"></script>
  <script>
      require([
        "dojo/ready",
        "dojo/parser",
        "esri/map",
        "esri/geometry/Point",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/graphic",
        "esri/geometry/Polyline",
        "esri/SpatialReference"
      ], function(
        ready,
        parser,
        Map,
        Point,
        SimpleMarkerSymbol,
        SimpleLineSymbol,
        Graphic,
        Polyline,
        SpatialReference
      ) {
        ready(function() {
          parser.parse();
          myMap = new Map("map", {
            basemap: "streets",
            center: [-122.16,37.7238],
            zoom: 15,
            SpatialReference: 4326
          });
          myMap.on("load", function() {
            var point1 = new Point(-122.159, 37.724, myMap.SpatialReference);      
            var point2 = new Point(-122.169, 37.721, myMap.SpatialReference);      
            var line = new Polyline(myMap.SpatialReference); 
             
            line.addPath([point1, point2]); 
               
            var lineSymbol = new SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0,0.5]),4);      
            var pointSymbol = new SimpleMarkerSymbol().setColor(new dojo.Color([255,0,0, 0.5])); 
               
            myMap.graphics.add(new Graphic(point1, pointSymbol));      
            myMap.graphics.add(new Graphic(point2, pointSymbol));      
            myMap.graphics.add(new Graphic(line, lineSymbol));
          });
        });
      });
  </script>
</head>
<body>
  <div id="map" class="map">
  </div>
</body>
</html>

All comments

LefterisKoumis

Thanks. I modified it so I can use the GraphicsLayer.

ChrisSmith7

Here's a working sample, slightly modified from yours:

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>My Map</title>
  <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
  <style>
    html, body, #map {
      padding:0;
      margin:0;
      height:100%;
    }
  </style>
  <script src="//js.arcgis.com/3.13/"></script>
  <script>
      require([
        "dojo/ready",
        "dojo/parser",
        "esri/map",
        "esri/geometry/Point",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/graphic",
        "esri/geometry/Polyline",
        "esri/SpatialReference"
      ], function(
        ready,
        parser,
        Map,
        Point,
        SimpleMarkerSymbol,
        SimpleLineSymbol,
        Graphic,
        Polyline,
        SpatialReference
      ) {
        ready(function() {
          parser.parse();
          myMap = new Map("map", {
            basemap: "streets",
            center: [-122.16,37.7238],
            zoom: 15,
            SpatialReference: 4326
          });
          myMap.on("load", function() {
            var point1 = new Point(-122.159, 37.724, myMap.SpatialReference);      
            var point2 = new Point(-122.169, 37.721, myMap.SpatialReference);      
            var line = new Polyline(myMap.SpatialReference); 
             
            line.addPath([point1, point2]); 
               
            var lineSymbol = new SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255,0,0,0.5]),4);      
            var pointSymbol = new SimpleMarkerSymbol().setColor(new dojo.Color([255,0,0, 0.5])); 
               
            myMap.graphics.add(new Graphic(point1, pointSymbol));      
            myMap.graphics.add(new Graphic(point2, pointSymbol));      
            myMap.graphics.add(new Graphic(line, lineSymbol));
          });
        });
      });
  </script>
</head>
<body>
  <div id="map" class="map">
  </div>
</body>
</html>

JoelBennett

Set the wkid of your spatial reference to 4326 instead of 102100. Your coordinates are in WGS 84, not Web Mercator.

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.