In the last post, we created point geometry using point library. Today in this post, i will describe how to create polyline using "polyline library" with Esri ArcGIS JS API. And we will add this polyline to map graphically.
We will learn how to create polyline using ArcGIS JS API "polyline library".
You can use any operating system and any ide or editor. I will use "Windows PC" and "Visual Studio Code". And i will use ESRI ArcGIS JS Library from web. But you can install library using bower from github repository.
| -- ESRI ArcGIS JS API 3.23
| -- | -- js
| -- | -- | -- main.js
| -- | -- css
| -- | -- | -- main.css
| -- | -- fonts
| -- | -- | -- font-awesome-4.7.0
| -- | -- | -- | -- css
| -- | -- | -- | -- |-- font-awesome.min.css
| -- | -- | -- | -- fonts
| -- | -- | -- | -- less
| -- | -- | -- | -- scss
| -- | -- index.html
*Only used files in project has been shown. There are other files for dependency.
Firstly we will create polyline using ESRI ArcGIS JS API "Polyline" library. We will work in "main.js" file.
We will add polyline library using require method.
require([
"esri/geometry/Polyline"
], function (
Polyline
){...});
Now, we can create polyline instance. We will not use any parameters. We will use addPath method to add points that creating our polyline in next step.
var polyline = new Polyline();
We will add points to polyline using "addPath" method. This method has take one parameter that is an array veriable consist of points. We already learned how to create point. I will create polyline that has "u" shape.
polyline.addPath([
new Point(28.991808, 41.014267),
new Point(28.991808, 41.004267),
new Point(29.001808, 41.004267),
new Point(29.001808, 41.014267),
]);
We will create simple line symbol to show our polyline on map.
We will add simple line symbol library using require method.
require([
"esri/symbols/SimpleLineSymbol"
], function (
SimpleLineSymbol
){...});
We will create new symbol instance. We will not use any parameters for now. But we will learn how to create special symbol in future posts.
var simpleLineSymbol = new SimpleLineSymbol();
We learned how to create graphic previous post. We will create new graphic instance using two parameters. First parameter is geometry for this example it will be our polyline. And second parameter is symbol for this example it will be our simple line symbol.
var polylineGraphic = new Graphic(polyline, simpleLineSymbol);
Now, we can add polyline graphic to graphics layer using add method.
graphicsLayer.add(polylineGraphic);
We can see the result by running the "index.html" file.
We learned how to create polyline geometry and add to map using ArcGIS JS API and Dojo in web.
Thank you for your attention and see you next time!
You can view old post below links.
