{"id":1408,"date":"2015-09-24T22:59:50","date_gmt":"2015-09-24T22:59:50","guid":{"rendered":"http:\/\/www.phpmind.com\/blog\/?p=1408"},"modified":"2015-09-24T23:11:03","modified_gmt":"2015-09-24T23:11:03","slug":"cesiumjs-how-to-flies-to-an-entity-and-create-marker","status":"publish","type":"post","link":"https:\/\/www.phpmind.com\/blog\/2015\/09\/cesiumjs-how-to-flies-to-an-entity-and-create-marker\/","title":{"rendered":"cesiumjs &#8211; How to  flies to an entity and create marker."},"content":{"rendered":"<p><a href=\"http:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2015\/09\/phpmind-cesiumjs-fly-to-entity.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2015\/09\/phpmind-cesiumjs-fly-to-entity.png\" alt=\"phpmind-cesiumjs-fly-to-entity\" width=\"817\" height=\"374\" class=\"aligncenter size-full wp-image-1409\" srcset=\"https:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2015\/09\/phpmind-cesiumjs-fly-to-entity.png 817w, https:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2015\/09\/phpmind-cesiumjs-fly-to-entity-300x137.png 300w, https:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2015\/09\/phpmind-cesiumjs-fly-to-entity-624x286.png 624w\" sizes=\"auto, (max-width: 817px) 100vw, 817px\" \/><\/a><br \/>\nFlies to an entity (marker) then tracks it without the camera jumping <\/p>\n<pre>\r\nvar viewer = new Cesium.Viewer('cesiumContainer', {timeline : false, animation : false});\r\n\r\nvar pinBuilder = new Cesium.PinBuilder();\r\n\r\nvar bluePin = viewer.entities.add({\r\n    name : 'Blank blue pin',\r\n    position : Cesium.Cartesian3.fromDegrees(-75.170726, 39.9208667),\r\n    billboard : {\r\n        image : pinBuilder.fromColor(Cesium.Color.ROYALBLUE, 48).toDataURL(),\r\n        verticalOrigin : Cesium.VerticalOrigin.BOTTOM\r\n    }\r\n});\r\n\r\n\r\nviewer.flyTo(bluePin).then(function(){\r\n    viewer.trackedEntity = bluePin;\r\n});\r\n<\/pre>\n<p><a href=\"http:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2015\/09\/phpmind-cesiumjs-fly-to-entity-1000-above.png\"><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2015\/09\/phpmind-cesiumjs-fly-to-entity-1000-above.png\" alt=\"phpmind-cesiumjs-fly-to-entity-1000-above\" width=\"730\" height=\"411\" class=\"aligncenter size-full wp-image-1413\" srcset=\"https:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2015\/09\/phpmind-cesiumjs-fly-to-entity-1000-above.png 730w, https:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2015\/09\/phpmind-cesiumjs-fly-to-entity-1000-above-300x169.png 300w, https:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2015\/09\/phpmind-cesiumjs-fly-to-entity-1000-above-624x351.png 624w\" sizes=\"auto, (max-width: 730px) 100vw, 730px\" \/><\/a><br \/>\nHow to zoom in about 1000 meters above it ?<br \/>\nI would like to now get the position of the entity (used in the onTick), and then pass this to the camera, lookAt function.<\/p>\n<p>entity.position() provides me info, but I am not sure how I can use this to pass it to the lookAt function.<\/p>\n<pre>\r\nvar viewer = new Cesium.Viewer('cesiumContainer', {timeline : false, animation : false});\r\n\r\nvar pinBuilder = new Cesium.PinBuilder();\r\n\r\nvar bluePin = viewer.entities.add({\r\n\r\n    position : Cesium.Cartesian3.fromDegrees(-75.170726, 39.9208667),\r\n    billboard : {\r\n        image : pinBuilder.fromColor(Cesium.Color.ROYALBLUE, 48).toDataURL(),\r\n        verticalOrigin : Cesium.VerticalOrigin.BOTTOM\r\n    }\r\n});\r\n\r\n\r\nviewer.scene.camera.lookAt(bluePin.position.getValue(viewer.clock.currentTime), new Cesium.Cartesian3(0,0,1000));\r\n<\/pre>\n<p>The first argument is the pin position. The second argument is a Cartesian3 offset in the pin&#8217;s reference frame, so z=1000 puts the camera 1000m above the pin.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Flies to an entity (marker) then tracks it without the camera jumping var viewer = new Cesium.Viewer(&#8216;cesiumContainer&#8217;, {timeline : false, animation : false}); var pinBuilder = new Cesium.PinBuilder(); var bluePin = viewer.entities.add({ name : &#8216;Blank blue pin&#8217;, position : Cesium.Cartesian3.fromDegrees(-75.170726, 39.9208667), billboard : { image : pinBuilder.fromColor(Cesium.Color.ROYALBLUE, 48).toDataURL(), verticalOrigin : Cesium.VerticalOrigin.BOTTOM } }); viewer.flyTo(bluePin).then(function(){ viewer.trackedEntity [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[53,27],"tags":[],"class_list":["post-1408","post","type-post","status-publish","format-standard","hentry","category-cesiumjs","category-javascript"],"_links":{"self":[{"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/posts\/1408","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/comments?post=1408"}],"version-history":[{"count":4,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/posts\/1408\/revisions"}],"predecessor-version":[{"id":1414,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/posts\/1408\/revisions\/1414"}],"wp:attachment":[{"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/media?parent=1408"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/categories?post=1408"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/tags?post=1408"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}