{"id":1708,"date":"2016-12-13T19:42:42","date_gmt":"2016-12-13T19:42:42","guid":{"rendered":"http:\/\/www.phpmind.com\/blog\/?p=1708"},"modified":"2016-12-13T19:45:41","modified_gmt":"2016-12-13T19:45:41","slug":"cesium-how-to-show-multiple-polylines-using-czml","status":"publish","type":"post","link":"https:\/\/www.phpmind.com\/blog\/2016\/12\/cesium-how-to-show-multiple-polylines-using-czml\/","title":{"rendered":"Cesium &#8211; How to show multiple polylines using czml ?"},"content":{"rendered":"<p><img loading=\"lazy\" decoding=\"async\" src=\"http:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2016\/12\/phpmind-Cesium-muli-polyline.png\" alt=\"\" width=\"672\" height=\"498\" class=\"aligncenter size-full wp-image-1709\" srcset=\"https:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2016\/12\/phpmind-Cesium-muli-polyline.png 672w, https:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2016\/12\/phpmind-Cesium-muli-polyline-300x222.png 300w, https:\/\/www.phpmind.com\/blog\/wp-content\/uploads\/2016\/12\/phpmind-Cesium-muli-polyline-624x462.png 624w\" sizes=\"auto, (max-width: 672px) 100vw, 672px\" \/><\/p>\n<pre>\r\nvar czml = [\r\n  {\r\n    \"id\" : \"document\",\r\n    \"name\" : \"CZML Geometries: Polyline\",\r\n    \"version\" : \"1.0\"\r\n  },\r\n  {\r\n    \"id\" : \"redLine\",\r\n    \"name\" : \"Red line on the surface\",\r\n    \"polyline\" : {\r\n      \"show\": false,\r\n      \"positions\" : {\r\n        \"cartographicDegrees\" : [\r\n          -75, 35, 0,\r\n          -125, 35, 0\r\n        ]\r\n      },\r\n      \"material\" : {\r\n          \"polylineOutline\": {\r\n              \"color\": {\"rgba\": [255, 0, 0, 255]},\r\n              \"outlineColor\": {\"rgba\": [255, 255, 255, 255]},\r\n              \"outlineWidth\": 2.0\r\n          }\r\n      },\r\n      \"width\" : 5\r\n    }\r\n  },\r\n  {\r\n    \"id\" : \"purpleLine\",\r\n    \"name\" : \"Purple straight line at height\",\r\n    \"polyline\" : {\r\n      \"show\": false,\r\n      \"positions\" : {\r\n        \"cartographicDegrees\" : [\r\n          -125, 35, 0,\r\n          -170, 35, 0\r\n        ]\r\n      },\r\n      \"material\" : {\r\n          \"polylineOutline\": {\r\n              \"color\": {\"rgba\": [148, 0, 211, 255]},\r\n              \"outlineColor\": {\"rgba\": [255, 255, 255, 255]},\r\n              \"outlineWidth\": 2.0\r\n          }\r\n      },\r\n      \"width\" : 5\r\n    }\r\n  }\r\n];\r\n\r\nvar viewer = new Cesium.Viewer('cesiumContainer');\r\nvar dataSource = new Cesium.CzmlDataSource();\r\ndataSource.load(czml);\r\nviewer.dataSources.add(dataSource);\r\nviewer.zoomTo(dataSource);\r\n\r\nvar handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);\r\nhandler.setInputAction(\r\n    function () { \r\n        dataSource.entities.getById('purpleLine').polyline.show = true;\r\n        dataSource.entities.getById('redLine').polyline.show = true;\r\n\r\n    },\r\n    Cesium.ScreenSpaceEventType.LEFT_CLICK\r\n);\r\n\r\n<\/pre>\n<p>By : https:\/\/github.com\/AnalyticalGraphicsInc\/cesium\/issues\/3598 <\/p>\n","protected":false},"excerpt":{"rendered":"<p>var czml = [ { &#8220;id&#8221; : &#8220;document&#8221;, &#8220;name&#8221; : &#8220;CZML Geometries: Polyline&#8221;, &#8220;version&#8221; : &#8220;1.0&#8221; }, { &#8220;id&#8221; : &#8220;redLine&#8221;, &#8220;name&#8221; : &#8220;Red line on the surface&#8221;, &#8220;polyline&#8221; : { &#8220;show&#8221;: false, &#8220;positions&#8221; : { &#8220;cartographicDegrees&#8221; : [ -75, 35, 0, -125, 35, 0 ] }, &#8220;material&#8221; : { &#8220;polylineOutline&#8221;: { &#8220;color&#8221;: {&#8220;rgba&#8221;: [255, [&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-1708","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\/1708","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=1708"}],"version-history":[{"count":2,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/posts\/1708\/revisions"}],"predecessor-version":[{"id":1714,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/posts\/1708\/revisions\/1714"}],"wp:attachment":[{"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/media?parent=1708"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/categories?post=1708"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.phpmind.com\/blog\/wp-json\/wp\/v2\/tags?post=1708"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}