Can a CZML polygon be drawn without any material to cover its sides, only displaying the outline?
I need this functionality in order to allow for clicking on an object that is completely surrounded by the polygon without any overlapping sides. Essentially, I want to create a polygon outline so that the inner polygon can receive click events.
It is possible to make the interior color of a polygon completely transparent, leaving only the outline visible and clickable. However, there are some drawbacks to this method that I will address below. First, here is an example of how you can achieve this:
var czml = [{
"id" : "document",
"name" : "CZML Geometries: Polygon",
"version" : "1.0"
}, {
"id" : "outlinedPolygon",
"name" : "Outlined Polygon",
"polygon" : {
"positions" : {
"cartographicDegrees" : [
-108.0, 25.0, 0,
-100.0, 25.0, 0,
-100.0, 30.0, 0,
-108.0, 30.0, 0
]
},
"material" : {
"solidColor" : {
"color" : {
"rgba" : [0, 0, 0, 0]
}
}
},
"extrudedHeight" : 0,
"perPositionHeight" : true,
"outline" : true,
"outlineColor" : {
"rgba" : [255, 255, 0, 255]
}
}
}];
var viewer = new Cesium.Viewer('cesiumContainer');
var dataSource = Cesium.CzmlDataSource.load(czml);
viewer.dataSources.add(dataSource);
viewer.zoomTo(dataSource);
However, there are issues with this approach. Many Windows-based systems and other WebGL implementations do not support line widths other than exactly 1.0 pixels, resulting in a thin outline on those systems.
Additionally, rendering may still process and discard the transparent fragments from the polygon's interior, leading to potential performance issues.
To overcome these problems, consider using a Polyline instead of a Polygon for outlining. Cesium offers a custom-built system for drawing screen-space polygons as polylines, bypassing the 1-pixel line limitations common in many WebGL implementations. Furthermore, Polylines do not attempt to fill enclosed areas.
To fully enclose an area using polylines, you need to repeat the first point as the last point. Here is an example:
var czml = [{
"id" : "document",
"name" : "CZML Geometries: Polyline",
"version" : "1.0"
}, {
"id" : "outlinedPolygon",
"name" : "Outlined Polygon",
"polyline" : {
"positions" : {
"cartographicDegrees" : [
-108.0, 25.0, 0,
-100.0, 25.0, 0,
-100.0, 30.0, 0,
-108.0, 30.0, 0,
-108.0, 25.0, 0
]
},
"width": 5,
"material" : {
"solidColor" : {
"color" : {
"rgba" : [255, 255, 0, 255]
}
}
}
}
}];
var viewer = new Cesium.Viewer('cesiumContainer');
var dataSource = Cesium.CzmlDataSource.load(czml);
viewer.dataSources.add(dataSource);
viewer.zoomTo(dataSource);
Appreciation to @emackey for the detailed response. Your input will help me in expanding the boundary of the polygon.
However, a more straightforward approach to creating a hollow polygon (polygon with only an outline) can be found here. By simply adjusting the fill property of the CZML polygon to false, I was able to achieve the desired result.
After checking the array with var_dump and confirming that it contains data, I encountered an issue where json_encode was not sending any data. Here is the code snippet in question: for($i=0;$i<count($dados_atividades)-1;$i++) { $arr[$i+1][ ...
I've been attempting to implement animation transitions on a removed class, but unfortunately it's not working as expected. I referenced this link: CSS transition when class removed I have tried setting the transition on the parent element and o ...
My collection of jQuery scripts is not equipped to handle dynamically loaded or created elements. While I could manually convert each script and include the .live() function, I'm curious if there's a way to automatically simulate the live functio ...
I am working on a code snippet that involves creating a gallery with JavaScript. <script type="text/JavaScript> // Code for image gallery functionality $(document).ready(function() { var galleryClass = '.gallery'; $(galleryClass+' li ...
I have successfully integrated a ThreeJs Scene into a React component, following the approach outlined here. However, I am facing difficulties updating the Scene based on state changes in its parent component. In my setup, users can configure certain prope ...
Take a look at this piece of javascript/jquery code: $('#button').click(function() { $.get("php/doit.php?id=<? echo $r['id']; ?>", function(html) { alert(html); // $.get("php/doit.php?id=<? echo $r ...
After creating a toggleable overlay menu and testing it in various browsers, including Internet Explorer, everything seemed to work fine except for one major issue in Firefox (version 46). The problem arises when toggling the overlay using the "MENU" butt ...
I've been experimenting with a card game and I'm interested in adding a card flip animation to it. I searched online for solutions, but most of them involve jquery (which I'd rather not use for just one animation) or CSS3 (I found this exam ...
For my project, I have chosen to utilize the 'escape' method as the sanitization strategy for handling potentially harmful content. This includes implementing the translate directive in certain areas, as well as utilizing the translate filter in ...
For my testing purposes, I am attempting to transfer data from a custom JSON database to MongoDB. The data is currently stored in a json file with the following format: { "_id": "213124123114", "foo":"bar", "otherId": "2324242424", ... } To maintai ...
I have developed a basic calculator application using HTML, JavaScript, JQuery, and CSS. My intention is to allow others to embed this calculator app on their own web pages by utilizing a file named generate.js. Within this file, there are several documen ...
I've encountered an issue while creating a route to handle POST data. Despite testing it on postman, I have not been able to find a solution for the problem that many others seem to be facing as well. It seems like the 'name' field is not be ...
export const composeValidators = (...validators) => value => validators.reduce((error, validator) => error || validator(value), undefined); export const composeAccreditionValidators = (...validators) => value => validators.reduce((error, va ...
Currently, I am honing my MEAN-stack skills by working on a movie website project. One of the tasks at hand is retrieving a movie document from the database. Within this movie document lies a property called reviews, which is an array of ObjectId's re ...
I am trying to develop a clickable country list with icons next to each ListItem. However, I am facing an issue where only one item can be selected at a time in a single click. Upon clicking a new item, the previously selected one gets deselected first. He ...
I'm currently working on a Vue.js project with Vuetify. However, I've encountered an issue where the drop-down icon disappears when using a select tag. <template> <select class="select"> <option v-for="item ...
Consider the scenario where we have two schemas, User and Post. Should we include a reference to User in Post's properties or should we add an array of Post schema inside User schema? Which approach is more efficient in terms of performance and other ...
Motive: My objective is to incorporate a background sound into my project using a local file that can be played and paused. While loading an external URL file works fine and allows for play/pause functionality, I am encountering issues with the local fil ...
const fruits = ["Banana", "Orange", "Apple", "Mango","Apple"]; console.log(fruits.indexOf("Apple") ); I'm looking for a method to determine the indexes of a specific element in an array. For instance, if I have multiple occurrences of "Apple" like a ...
I am facing an issue with a directive that generates a random number. My goal is to reload or refresh this directive when a checkbox is toggled. Below is the code I have been using, but unfortunately, it's not working as expected. var app = angular. ...