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; } } }

I'm trying to populate 3d line using ArcGIS API for JavaScript with my ArcGIS online PipeLine url, but somehow I'am not able to populate. I have attached the code

<script>       require([         "esri/Map",         "esri/views/SceneView",         "esri/layers/FeatureLayer",         "esri/widgets/Legend"       ], function(Map, SceneView, FeatureLayer, Legend) {    var map = new Map({          basemap: "topo-vector",            ground: "world-elevation"         });          var view = new SceneView({           container: "viewDiv",           map: map,           zoom: 15,           center: [103.805699, 1.276566],            heading: 300,            tilt: 75        });          const options = {           profile: "quad",           cap: "round",           join: "miter",           width: 5,           height: 30,           color: [200, 200, 200],           profileRotation: "all"         };          var renderer = {            defaultSymbol: {             type: "polygon-3d",         symbolLayers: [                     {                       type: "path",                       profile: options.profile,                       width: options.width,                       height: options.height,                       join: options.join,                       cap: options.cap,                       anchor: "bottom",                       profileRotation: options.profileRotation                     }                   ]           }         };          const PipelineLayer = new FeatureLayer({           url:             "https://services6.arcgis.com/itEfD6Bf5W0iWJuO/arcgis/rest/services/PipeLine1/FeatureServer/0",           elevationInfo: {             mode: "relative-to-ground",             offset: 3           },          renderer:renderer         });         map.add(PipelineLayer);        });     </script>

タグ付きの投稿をもっと見る

Accepted answers

All comments

Hey,

You've got a bunch of errors in the code: you should specify the renderer type (I assume it's a SimpleRenderer), then the `defaultSymbol` becomes `symbol`. Your line symbols should have a `line-3d` type, not a `polygon-3d` type. Also it's important that you specify the color, otherwise you won't see anything.

Here's how the code would look like with the changes mentioned above:

<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/views/SceneView"</SPAN><SPAN class="punctuation token">,</SPAN>
  <SPAN class="string token">"esri/layers/FeatureLayer"</SPAN><SPAN class="punctuation token">,</SPAN>
  <SPAN class="string token">"esri/widgets/Legend"</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> SceneView<SPAN class="punctuation token">,</SPAN> FeatureLayer<SPAN class="punctuation token">,</SPAN> Legend<SPAN class="punctuation token">)</SPAN> <SPAN class="punctuation token">{</SPAN>
  <SPAN class="keyword token">var</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="punctuation token">{</SPAN> basemap<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"topo-vector"</SPAN><SPAN class="punctuation token">,</SPAN> ground<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"world-elevation"</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
  <SPAN class="keyword token">var</SPAN> view <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">SceneView</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
    container<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"viewDiv"</SPAN><SPAN class="punctuation token">,</SPAN>
    map<SPAN class="punctuation token">:</SPAN> map<SPAN class="punctuation token">,</SPAN>
    zoom<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">15</SPAN><SPAN class="punctuation token">,</SPAN>
    center<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">103.805699</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">1.276566</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
    heading<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">300</SPAN><SPAN class="punctuation token">,</SPAN>
    tilt<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">75</SPAN>
  <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
  <SPAN class="keyword token">const</SPAN> options <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
    profile<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"quad"</SPAN><SPAN class="punctuation token">,</SPAN>
    cap<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"round"</SPAN><SPAN class="punctuation token">,</SPAN>
    join<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"miter"</SPAN><SPAN class="punctuation token">,</SPAN>
    width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">5</SPAN><SPAN class="punctuation token">,</SPAN>
    height<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">30</SPAN><SPAN class="punctuation token">,</SPAN>
    color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">200</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">200</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">200</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
    profileRotation<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"all"</SPAN>
  <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
  <SPAN class="keyword token">var</SPAN> renderer <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
    type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple"</SPAN><SPAN class="punctuation token">,</SPAN>
    symbol<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
      type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"line-3d"</SPAN><SPAN class="punctuation token">,</SPAN>
      symbolLayers<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN>
        <SPAN class="punctuation token">{</SPAN>
          type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"path"</SPAN><SPAN class="punctuation token">,</SPAN>
          profile<SPAN class="punctuation token">:</SPAN> options<SPAN class="punctuation token">.</SPAN>profile<SPAN class="punctuation token">,</SPAN>
          width<SPAN class="punctuation token">:</SPAN> options<SPAN class="punctuation token">.</SPAN>width<SPAN class="punctuation token">,</SPAN>
          height<SPAN class="punctuation token">:</SPAN> options<SPAN class="punctuation token">.</SPAN>height<SPAN class="punctuation token">,</SPAN>
          material<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN>
            color<SPAN class="punctuation token">:</SPAN> options<SPAN class="punctuation token">.</SPAN>color
          <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
          join<SPAN class="punctuation token">:</SPAN> options<SPAN class="punctuation token">.</SPAN>join<SPAN class="punctuation token">,</SPAN>
          cap<SPAN class="punctuation token">:</SPAN> options<SPAN class="punctuation token">.</SPAN>cap<SPAN class="punctuation token">,</SPAN>
          anchor<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"bottom"</SPAN><SPAN class="punctuation token">,</SPAN>
          profileRotation<SPAN class="punctuation token">:</SPAN> options<SPAN class="punctuation token">.</SPAN>profileRotation
        <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">const</SPAN> PipelineLayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">FeatureLayer</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">{</SPAN>
    url<SPAN class="punctuation token">:</SPAN>
      <SPAN class="string token">"https://services6.arcgis.com/itEfD6Bf5W0iWJuO/arcgis/rest/services/PipeLine1/FeatureServer/0"</SPAN><SPAN class="punctuation token">,</SPAN>
    elevationInfo<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> mode<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"relative-to-ground"</SPAN><SPAN class="punctuation token">,</SPAN> offset<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">3</SPAN> <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">,</SPAN>
    renderer<SPAN class="punctuation token">:</SPAN> renderer
  <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">add</SPAN><SPAN class="punctuation token">(</SPAN>PipelineLayer<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="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>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN><SPAN>‍</SPAN></SPAN>

Thankyou raluca Nicola, i tried with the code modified by you ,now i getting Line..but not aligned exact position, can you please suggest what to do for proper Alignment, if you do it would be great help for me

Hi Navya,

I can't access your service. Do your features come with z values? If you make it public, I can have a look.

Generally though, we only align lines with the ground at the point where they have vertices. So to get a better alignment you might also need to densify the vertices. (no need to modify your original data, you can also do it with geometryEngine.densify()).

And for more info on different elevation modes you can read about it here: FeatureLayer | ArcGIS API for JavaScript 4.13

Thankyou Raluca Nicola,yes my features come with Z values, i will go through with the link sent by you...thank you, for sharing knowledge.

会話に参加する

サインインしたメンバーは投稿、更新のフォローなどができます。初めてですか？無料アカウントを登録してください。

クイックリンク

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