{"id":1540,"date":"2016-01-22T21:40:14","date_gmt":"2016-01-22T21:40:14","guid":{"rendered":"http:\/\/www.phpmind.com\/blog\/?p=1540"},"modified":"2016-01-22T21:40:14","modified_gmt":"2016-01-22T21:40:14","slug":"cesiumjs-draw-line-with-shift-and-left-click","status":"publish","type":"post","link":"https:\/\/www.phpmind.com\/blog\/2016\/01\/cesiumjs-draw-line-with-shift-and-left-click\/","title":{"rendered":"Cesiumjs &#8211; Draw line with SHIFT and left click ?"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2016\/01\/cesium_shift_left_key_line.png\" alt=\"cesium_shift_left_key_line\" width=\"578\" height=\"328\" class=\"aligncenter size-full wp-image-1541\" srcset=\"https:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2016\/01\/cesium_shift_left_key_line.png 578w, https:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2016\/01\/cesium_shift_left_key_line-300x170.png 300w\" sizes=\"auto, (max-width: 578px) 100vw, 578px\" \/><\/p>\n<pre>\r\nvar viewer = new Cesium.Viewer('cesiumContainer'); \r\n\r\nvar scene = viewer.scene; \r\nvar ellipsoid = scene.globe.ellipsoid; \r\nvar handler; \r\n\r\n\/\/ variables that support distance line \r\nvar distPosCarte = []; \r\nvar distPosCarto = []; \r\nvar surfaceDist = 0; \r\nvar distLine = viewer.entities.add({ \r\n    id : 'distLine', \r\n    name : 'Distance Line', \r\n    polyline : { \r\n        width : 3, \r\n        positions : [], \r\n        material : new Cesium.PolylineOutlineMaterialProperty({ \r\n            color : Cesium.Color.ORANGE, \r\n            outlineWidth : 2, \r\n            outlineColor : Cesium.Color.BLACK \r\n        }) \r\n    } \r\n}); \r\n\r\nhandler = new Cesium.ScreenSpaceEventHandler(scene.canvas); \r\n\r\n\r\nhandler.setInputAction(function(movement) { \r\n    \/\/ clear distPos arrays on single click without SHIFT \r\n    distPosCarto.length = 0; \r\n    distPosCarte.length = 0; \r\n    surfaceDist = 0; \r\n}, Cesium.ScreenSpaceEventType.LEFT_CLICK); \r\n\r\nhandler.setInputAction(function(movement) { \r\n    var cartesian = viewer.camera.pickEllipsoid(movement.position, ellipsoid); \r\n    if (cartesian) { \r\n        distPosCarte.push(cartesian); \r\n        var cartographic = ellipsoid.cartesianToCartographic(cartesian); \r\n        distPosCarto.push(cartographic); \r\n        if(distPosCarte.length >= 2) { \r\n            var posArray = []; \r\n            \/\/ Build array with all points \r\n            for (var i = 0; i < distPosCarte.length; i++){ \r\n                posArray.push(distPosCarte[i]); \r\n            } \r\n            \/\/ Calculate surface distance between each point \r\n            for (var j = 1; j < distPosCarto.length; j++){ \r\n                var geodesic = new Cesium.EllipsoidGeodesic(distPosCarto[j-1], distPosCarto[j]); \r\n                surfaceDist += geodesic.surfaceDistance; \r\n            } \r\n\r\n            distLine.polyline.positions = posArray; \r\n            distLine.description = ((surfaceDist)\/1000).toFixed(2) + ' km'; \r\n\r\n            viewer.selectedEntity = distLine; \r\n        } \r\n    } \r\n}, Cesium.ScreenSpaceEventType.LEFT_CLICK, Cesium.KeyboardEventModifier.SHIFT); \r\n\r\n<\/pre>\n","protected":false},"excerpt":{"rendered":"<p>var viewer = new Cesium.Viewer(&#8216;cesiumContainer&#8217;); var scene = viewer.scene; var ellipsoid = scene.globe.ellipsoid; var handler; \/\/ variables that support distance line var distPosCarte = []; var distPosCarto = []; var surfaceDist = 0; var distLine = viewer.entities.add({ id : &#8216;distLine&#8217;, name : &#8216;Distance Line&#8217;, polyline : { width : 3, positions : [], material : [&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],"tags":[],"class_list":["post-1540","post","type-post","status-publish","format-standard","hentry","category-cesiumjs"],"_links":{"self":[{"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/posts\/1540","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=1540"}],"version-history":[{"count":1,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/posts\/1540\/revisions"}],"predecessor-version":[{"id":1542,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/posts\/1540\/revisions\/1542"}],"wp:attachment":[{"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/media?parent=1540"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/categories?post=1540"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/tags?post=1540"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}