I am trying to create a special material for a Cesium Polygon, which has to incorporate a hatched area with an outline.
Now, from the base materials I can use "Stripe", so i can create my graphic like this:
var viewer = new Cesium.Viewer('cesiumContainer');
var degrees_array = [
92.1470732697006,
21.954465553476467,
99.08781126987297,
32.557089696031916,
68.66765785924682,
24.272023818381587
];
var polygon = viewer.entities.add({
name : 'polygon',
polygon : {
hierarchy : Cesium.Cartesian3.fromDegreesArray(degrees_array),
extrudedHeight: 0,
material : new Cesium.StripeMaterialProperty(
{
evenColor:Cesium.Color.GRAY,
oddColor:Cesium.Color.WHITE,
orientation: Cesium.StripeOrientation.HORIZONTAL,
repeat:100,
offset:0
}
),
//outline is ignored by WebGL
//outline: true,
//outlineColor:Cesium.Color.BLACK,
//outlineWidth:1
}
});
//since designing an outline is not possible with polygon we create a custom polylineGraphics:
var outline_array = degrees_array;
// since loop is not available for polylineGraphics we add the first point positions
outline_array.push(outline_array[0],outline_array[1]);
var outline = viewer.entities.add({
polyline : {
positions : Cesium.Cartesian3.fromDegreesArray(outline_array),
width : 5,
material : Cesium.Color.GRAY,
clampToGround:true,
zIndex:0
}
});
viewer.zoomTo(polygon)
see sandcastle link
My questions:
- is there a way to rotate the stripes, so that they appear as diagonally hatched
- can zoom be omitted for the Stripe material, so that it is always displayed with the same line width?
Thanks a lot!
If you are still wondering. You can rotate the stripes by using stRotation
polygon: {
hierarchy: <posititons>
stRotation: Cesium.Math.toRadians(45),
material: stripeMaterial,
}
Related
I am using open layers 6 lib for map rendering and events.
my application needed same like this example http://viglino.github.io/ol-ext/examples/layer/map.geoimage.html i.e. Example have ol.source.GeoImage..
I have tried
I am displaying raster images on map using this sample code is
const url = imagurl;
const extent = [0, 0, imageData.width, imageData.height];
const projection = new Projection({
code: 'xkcd-image',
units: 'pixels',
extent,
});
const imageLayer = new ImageLayer({
source: new Static({
url,
projection,
imageExtent: extent,
}),
});
and i am using affine transformation lib and returns scaling, rotation and transformation..
its giving the values
scaling : 327.805670381418,327.805670381418
rotation : -0.1310210334156003
transformation : 7179251.8557908312,6022627.228704552
i need to add this code into ol-6 static image source
source: new ol.source.GeoImage(
{ image,
imageCenter: transformation,
imageScale: scaling,
imageRotate: rotation,
//projection: pixelProjectio
})
suggest or help on this.. thanks in advance.. and save my days..
I've generated a generated a GLB file using khronos's SharpGLTF libraries and have got the model loading in cesium, the model appears correctly. The problem is the material for the model does not show. I have tested the generated GLB in other viewers and the material does show.
I'm using the following code in cesium:
var entity = viewer.entities.add({
name : 'url_here',
position : center,
orientation : orientation,
model : {
uri : 'url_here',
minimumPixelSize : 128,
maximumScale : 20000,
}
});
also tried
var model = scene.primitives.add(Cesium.Model.fromGltf({
id: 'here',
url: 'url here'
modelMatrix : modelMatrix,
scale : 1.0,
}));
I've tried using the color modifiers for cesium and the only option that responds is "color" which doesn't help as it doesn't apply any lighting to the color.
Below is a picture of what cesium is outputting. However there should be more effects to the material than just red. It seems to respect only KnownChannel.BaseColor and that's it.
Any ideas?
I think I mean "translucent"...
I'm trying to put a rectangle with an image material and control the translucency of the image so I can see the background behind it (like we do with ordinary layers).
This is my code:
var redRectangle = viewer.entities.add({
name : 'Red translucent rectangle',
rectangle : {
coordinates : Cesium.Rectangle.fromDegrees(-110.0, 20.0, -80.0, 25.0),
material : new Cesium.ImageMaterialProperty({
image : '../images/Cesium_Logo_Color.jpg',
transparent: true,
translucent : true,
alpha: 0.2
}),
}
});
I can't get it to work. I already tried every option inside material but with no results.
try it in Sandcastle. My goal is to see a translucid logo.
Solved.
Need to give a color to the image ( what?? ) and apply an alpha to it.
var redRectangle = viewer.entities.add({
name : 'Red translucent rectangle',
rectangle : {
coordinates : Cesium.Rectangle.fromDegrees(-110.0, 20.0, -80.0, 25.0),
material : new Cesium.ImageMaterialProperty({
image : '../images/Cesium_Logo_Color.jpg',
color: Cesium.Color.WHITE.withAlpha(0.1) <<<< ----- THIS MAKE IT TRANSLUCENT
}),
}
});
I have this code, which adds polyline primitive to scene.
function createPolyline(startPosition, endPosition) {
Cesium.SimplePolylineGeometry({
positions : [startPosition, endPosition]
});
var geometry = Cesium.SimplePolylineGeometry.createGeometry(polyline);
return scene.primitives.add(new Cesium.Primitive({
geometryInstances : new Cesium.GeometryInstance({
geometry : geometry,
attributes : {
color : Cesium.ColorGeometryInstanceAttribute.fromColor(Cesium.Color.SPRINGGREEN)
}
}),
appearance : new Cesium.PerInstanceColorAppearance()
}));
}
How do I set width of this polyline?
The recommended way to add a polyline is with the Entity API, like this
var greenLine = viewer.entities.add({
polyline : {
positions : [startPosition, endPosition],
width : 5,
material : Cesium.Color.SPRINGGREEN
}
});
But, if you want to skip the Entity layer and use the Primitive Graphics layer directly, you can do that too. Your sample code above has some issues. First, you're calling the Cesium.SimplePolylineGeometry constructor without the new keyword, and without saving the result, and this is not the correct use pattern for this kind of code. Second, the SimplePolylineGeometry class itself does not support line widths greater than what the WebGL implementation supports, which on Windows machines running ANGLE, is only 1 pixel wide. To get around this limitation, use the normal (non-simple) polylines, like this:
var polylines = scene.primitives.add(new Cesium.PolylineCollection());
var polyline = polylines.add({
positions : Cesium.PolylinePipeline.generateCartesianArc({
positions : [startPosition, endPosition]
}),
material : Cesium.Material.fromType('Color', {
color : Cesium.Color.SPRINGGREEN
}),
width: 5
});
SimplePolylineGeometry does not support line width. You need to use PolylineGeometry instead and pass the "width" options to the constructor. Also, you should be using PolylineColorAppearance as your appearance, not PerInstanceColorAppearance.
I have been struggling with this for about a month. I have done a lot of research and tried several different things but keep striking out. I have a map that contains polygons that are created with fusion tables and with data from an XML file for where the polygon needs to be plotted. It creates two different polygons. One based on polygon cords from the XML file and polygon based on a county name from the XML file using fusion tables to get the cords. I have created a drop down box with two check boxes. One Storm and One County. I am trying to set these check boxes so I can toggle the two different polygons but I am have a real hard time. I need to toggle them because sometimes the polygons will overlay each other if there are two polygons at the same location. So I need to be able to toggle between the two.
The map is located here... GOOGLE MAP
The code to the js for the map is here... GOOGLE MAP CODE
This is the code from the above link just for the buttons I have created....
//start process to set up custom drop down
//create the check box items
var checkOptions = {
gmap: map,
title: "This allows for toggling on/off Storm based polygons",
id: "stormCheck",
label: "Storm",
action: function(){
if (map.overlayMapTypes.length==0) {
map.overlayMapTypes.push(null); // create empty overlay entry
map.overlayMapTypes.setAt("1",Polygon);
}
else {
map.overlayMapTypes.clear();
}
}
}
var check1 = new checkBox(checkOptions);
var checkOptions2 = {
gmap: map,
title: "This allows for toggling on/off County based polygons",
id: "countyCheck",
label: "County",
action: function(){
if (map.overlayMapTypes.length==0) {
map.overlayMapTypes.push(null); // create empty overlay entry
map.overlayMapTypes.setAt("1",CountyPolys);
}
else {
map.overlayMapTypes.clear();
}
}
}
var check2 = new checkBox(checkOptions2);
//create the input box items
//possibly add a separator between controls
var sep = new separator();
//put them all together to create the drop down
var ddDivOptions = {
items: [sep, check1, check2],
id: "myddOptsDiv"
}
//alert(ddDivOptions.items[1]);
var dropDownDiv = new dropDownOptionsDiv(ddDivOptions);
var dropDownOptions = {
gmap: map,
name: 'Alert Options',
id: 'ddControl',
title: 'Toggle storm or county based alerts',
position: google.maps.ControlPosition.TOP_RIGHT,
dropDown: dropDownDiv
}
var dropDown1 = new dropDownControl(dropDownOptions);
What I am having a problem with is getting these toggle boxes to toggle on and off the two different polygons layers. I am not sure what I am doing wrong. I created these boxes from another example I found on here but, I am having a hard time applying these polygons to these check boxes.
Can anyone offer some suggestions or tips for what I am doing wrong or missing?
-Thanks