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

Update graphic location

KennethLindhardt1

Hi, I need to update a graphic point, so that it always stays in front of the camera:

This is what I’m trying, but although the cameraX and cameraY are perfectly updating with the prober coordinates I can’t figure out how to clone the graphic with the new coordinates, so basically it needs to refresh the points XY with the new values, when I move the camera and then redraw the point. I’ve been searching for a long time for an answer, so I hope I can get some help

var cameraX;

watchUtils.whenTrue(view, "stationary", function() {

cameraX = view.camera.position.longitude ;

});

var cameraY;

watchUtils.whenTrue(view, "stationary", function() {

cameraY = view.camera.position.latitude + 0.05;

});

var point = {

type: "point", // autocasts as new Point()

x: cameraX,

y: cameraY,

Trouver plus de publications taguées avec

Accepted answers

RobertScheitlin__GISP

Kenneth,

OK, you are close but you need to add the point to the GL inside the stationary function as well.

<SPAN class="keyword token">var</SPAN> cameraX<SPAN class="punctuation token">,</SPAN> cameraY<SPAN class="punctuation token">,</SPAN> point<SPAN class="punctuation token">,</SPAN> markerSymbol<SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> graphicsLayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">GraphicsLayer</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">add</SPAN><SPAN class="punctuation token">(</SPAN>graphicsLayer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

markerSymbol <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
  type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-marker"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// autocasts as new SimpleMarkerSymbol()</SPAN>
  color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">226</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">119</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">40</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
  size <SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="punctuation token">,</SPAN>
  outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// autocasts as new SimpleLineSymbol()</SPAN>
    color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
    width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.2</SPAN>
  <SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>

watchUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">whenTrue</SPAN><SPAN class="punctuation token">(</SPAN>view<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"stationary"</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>
  graphicsLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">removeAll</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
  cameraX <SPAN class="operator token">=</SPAN> view<SPAN class="punctuation token">.</SPAN>camera<SPAN class="punctuation token">.</SPAN>position<SPAN class="punctuation token">.</SPAN>longitude<SPAN class="punctuation token">;</SPAN>
  cameraY <SPAN class="operator token">=</SPAN> view<SPAN class="punctuation token">.</SPAN>camera<SPAN class="punctuation token">.</SPAN>position<SPAN class="punctuation token">.</SPAN>latitude <SPAN class="operator token">+</SPAN> <SPAN class="number token">0.20</SPAN><SPAN class="punctuation token">;</SPAN>
  point <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
    type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"point"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// autocasts as new Point()</SPAN>
    x<SPAN class="punctuation token">:</SPAN> cameraX<SPAN class="punctuation token">,</SPAN>
    y<SPAN class="punctuation token">:</SPAN> cameraY
  <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
  graphicsLayer<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><SPAN class="punctuation token">{</SPAN>
    geometry<SPAN class="punctuation token">:</SPAN> point<SPAN class="punctuation token">,</SPAN>
    symbol<SPAN class="punctuation token">:</SPAN> markerSymbol<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="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>

All comments

KennethLindhardt1

Well, I’m not getting that far in my script as I expected. Maybe I should start a new thread, but since we are on our way here, I’ll continue and pass the result to https://community.esri.com/thread/226394-show-camera-position-relative-to-ground

The idea was to take everything in small stages, learn something on the way, but I face issues, every time I try to move forward

So I’m trying to combine the Query Elevation (points) https://developers.arcgis.com/javascript/latest/sample-code/elevation-query-points/index.html with the graphic created on camera movement, so I’m trying to use queryElevation() and been trying in many different ways. Now I’m just getting dizzy.

So what I would need at the end, is to extract the z value from the graphic, the use view.camera.position.z – the Graphic Z value, then I should have the camera elevation from ground, which will answer my show camera position relative to ground post.

In what I’m testing I’m using the ElevationLayer from the elevation query points. I can’t figure out if my issues are related to the graphic using WGS84 (wkid: 4326) and the layer are using wkid: 3857, or if the graphic will reproject to the elevation layer.

Thanks.

KennethLindhardt1

We wrote on almost the same time, I was even closer 🙂

Now I got it, awesome thank you Robert.

Really happy now 🙂

KennethLindhardt1

This helped, now I just need to remove the graphic, so I only got one:

var cameraX, cameraY, point, markerSymbol, pointGraphic, graphicsLayer;

watchUtils.whenTrue(view, "stationary", function() {

cameraX = view.camera.position.longitude;

cameraY = view.camera.position.latitude + 0.20;

point = {

type: "point", // autocasts as new Point()

x: cameraX,

y: cameraY

};

markerSymbol= {

type: "simple-marker", // autocasts as new SimpleMarkerSymbol()

color: [226, 119, 40],

size : 100,

outline: { // autocasts as new SimpleLineSymbol()

color: [255, 255, 255],

//width:

}

};

pointGraphic = new Graphic({

geometry: point,

symbol: markerSymbol,

});

graphicsLayer = new GraphicsLayer();

map.add(graphicsLayer);

graphicsLayer.add(pointGraphic);

});

RobertScheitlin__GISP

Kenneth,

OK, you are close but you need to add the point to the GL inside the stationary function as well.

<SPAN class="keyword token">var</SPAN> cameraX<SPAN class="punctuation token">,</SPAN> cameraY<SPAN class="punctuation token">,</SPAN> point<SPAN class="punctuation token">,</SPAN> markerSymbol<SPAN class="punctuation token">;</SPAN>
<SPAN class="keyword token">var</SPAN> graphicsLayer <SPAN class="operator token">=</SPAN> <SPAN class="keyword token">new</SPAN> <SPAN class="token class-name">GraphicsLayer</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">add</SPAN><SPAN class="punctuation token">(</SPAN>graphicsLayer<SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>

markerSymbol <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
  type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"simple-marker"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// autocasts as new SimpleMarkerSymbol()</SPAN>
  color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">226</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">119</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">40</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
  size <SPAN class="punctuation token">:</SPAN> <SPAN class="number token">100</SPAN><SPAN class="punctuation token">,</SPAN>
  outline<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">{</SPAN> <SPAN class="comment token">// autocasts as new SimpleLineSymbol()</SPAN>
    color<SPAN class="punctuation token">:</SPAN> <SPAN class="punctuation token">[</SPAN><SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="number token">255</SPAN><SPAN class="punctuation token">]</SPAN><SPAN class="punctuation token">,</SPAN>
    width<SPAN class="punctuation token">:</SPAN> <SPAN class="number token">0.2</SPAN>
  <SPAN class="punctuation token">}</SPAN>
<SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>

watchUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">whenTrue</SPAN><SPAN class="punctuation token">(</SPAN>view<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"stationary"</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>
  graphicsLayer<SPAN class="punctuation token">.</SPAN><SPAN class="token function">removeAll</SPAN><SPAN class="punctuation token">(</SPAN><SPAN class="punctuation token">)</SPAN><SPAN class="punctuation token">;</SPAN>
  cameraX <SPAN class="operator token">=</SPAN> view<SPAN class="punctuation token">.</SPAN>camera<SPAN class="punctuation token">.</SPAN>position<SPAN class="punctuation token">.</SPAN>longitude<SPAN class="punctuation token">;</SPAN>
  cameraY <SPAN class="operator token">=</SPAN> view<SPAN class="punctuation token">.</SPAN>camera<SPAN class="punctuation token">.</SPAN>position<SPAN class="punctuation token">.</SPAN>latitude <SPAN class="operator token">+</SPAN> <SPAN class="number token">0.20</SPAN><SPAN class="punctuation token">;</SPAN>
  point <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
    type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"point"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// autocasts as new Point()</SPAN>
    x<SPAN class="punctuation token">:</SPAN> cameraX<SPAN class="punctuation token">,</SPAN>
    y<SPAN class="punctuation token">:</SPAN> cameraY
  <SPAN class="punctuation token">}</SPAN><SPAN class="punctuation token">;</SPAN>
  graphicsLayer<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><SPAN class="punctuation token">{</SPAN>
    geometry<SPAN class="punctuation token">:</SPAN> point<SPAN class="punctuation token">,</SPAN>
    symbol<SPAN class="punctuation token">:</SPAN> markerSymbol<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="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>

KennethLindhardt1

Hi Robert thank you, sorry for the late reply on this. I can't seem to get this to work at all.

I would expect, that I also would need to update the graphic layer when I move the camera, so tride different variations of the watchUtils. So I guess the graphic don’t re-read the new camera/cameraY

var cameraX, cameraY, point;

watchUtils.whenTrue(view, "stationary", function() {

cameraX = view.camera.position.longitude;

cameraY = view.camera.position.latitude + 0.20;

point = {

type: "point", // autocasts as new Point()

x: cameraX,

y: cameraY

};

});

markerSymbol = {

type: "simple-marker", // autocasts as new SimpleMarkerSymbol()

color: [226, 119, 40],

size : 100,

outline: { // autocasts as new SimpleLineSymbol()

color: [255, 255, 255],

//width:

}

};

var pointGraphic = new Graphic({

geometry: point,

symbol: markerSymbol,

});

var graphicsLayer = new GraphicsLayer();

map.add(graphicsLayer);

graphicsLayer.add(pointGraphic);

RobertScheitlin__GISP

Kenneth,

You are using watchUtils stationary to get the camera x and y (not sure why you have those separate...) but you create your point outside of those functions so the point will never get updated with the correct xy.

<SPAN class="keyword token">var</SPAN> cameraX<SPAN class="punctuation token">,</SPAN> cameraY<SPAN class="punctuation token">,</SPAN> point<SPAN class="punctuation token">;</SPAN>
watchUtils<SPAN class="punctuation token">.</SPAN><SPAN class="token function">whenTrue</SPAN><SPAN class="punctuation token">(</SPAN>view<SPAN class="punctuation token">,</SPAN> <SPAN class="string token">"stationary"</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>
  cameraX <SPAN class="operator token">=</SPAN> view<SPAN class="punctuation token">.</SPAN>camera<SPAN class="punctuation token">.</SPAN>position<SPAN class="punctuation token">.</SPAN>longitude<SPAN class="punctuation token">;</SPAN>
  cameraY <SPAN class="operator token">=</SPAN> view<SPAN class="punctuation token">.</SPAN>camera<SPAN class="punctuation token">.</SPAN>position<SPAN class="punctuation token">.</SPAN>latitude <SPAN class="operator token">+</SPAN> <SPAN class="number token">0.05</SPAN><SPAN class="punctuation token">;</SPAN>
  point <SPAN class="operator token">=</SPAN> <SPAN class="punctuation token">{</SPAN>
    type<SPAN class="punctuation token">:</SPAN> <SPAN class="string token">"point"</SPAN><SPAN class="punctuation token">,</SPAN> <SPAN class="comment token">// autocasts as new Point()</SPAN>
    x<SPAN class="punctuation token">:</SPAN> cameraX<SPAN class="punctuation token">,</SPAN>
    y<SPAN class="punctuation token">:</SPAN> cameraY
  <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>

Rejoindre la conversation

Les membres connectés peuvent publier, suivre les mises à jour, et plus encore. Nouveau ici ? Inscrivez-vous gratuitement.

Se connecter
S'inscrire

Liens rapides

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