I have a problem with creating an overlay with a polygon that contains
multiple polylines.
I want to create a polygon with holes cut out for certain countries (to show
which areas are off limits). I do this by creating a polygone with multiple
polylines.
The first polyline was created to cover the entire visible area of the map.
i started off with this:
To get around only spanning one region-180/180
var outer:Array = [ new LatLng(90, -180),
new LatLng(90, 180),
new LatLng(-90, 180),
new LatLng(-90, -180),
new LatLng(90, -180)]
donut = new Polygon([],
new PolygonOptions({
strokeStyle: new StrokeStyle({
thickness: 0}),
fillStyle: new FillStyle({
color: 0x000000,
alpha: 0.5})
}));
donut.setPolyline(0, outer)
map.addOverlay(donut);
Obviously this has a problem with only spanning one lot of lat/lng. And when
zoomed out, this doesnt work. To get around this i tried getting the bounds
of the map, toSpan() and getNorth(),getSouth() and so on. These didnt return
a true span of the visible map - as it maxed out at 180/360.
My solution was to use fromViewportToLatLng() of the pixel points of the
map, and set the opt_nowrap to 'true'
var pnw:LatLng = map.fromViewportToLatLng(new Point(0, 0), true)
var pse:LatLng = map.fromViewportToLatLng(new Point(map.width, map.height),
true)
This produced results similar to this
Lat Lng North West (89.77386689378173, -614.3294000000001)
LatLng South East (-89.07253945829217, 370.0455999999999)
From here i can then correctly set the polyline (on map move and zoom
events) to cover the entire map, no matter how many spans of longitude
occur:
outer = [
new LatLng(pnw.lat(), pnw.lng(), true),
new LatLng(pnw.lat(), pse.lng(), true),
new LatLng(pse.lat(), pse.lng(), true),
new LatLng(pse.lat(), pnw.lng(), true),
new LatLng(pnw.lat(), pnw.lng(), true)
]
donut.setPolyline(0, outer)
*So far so good. *
Now, i want to add the donut holes to my polygon, again adding polylines to
the donut polygon.
private var australia:Array = [
new LatLng(-9.7716, 143.0241),
new LatLng(-23.4610, 158.1852),
new LatLng(-45.1338, 147.1549),
new LatLng(-35.2615, 111.5153),
new LatLng(-20.6921, 113.0094),
new LatLng(-10.0746, 130.3239),
new LatLng(-9.7716, 143.0241)
]
private var nz:Array = [
new LatLng(-33.5951, 165.8254),
new LatLng(-33.5951, 179.7341),
new LatLng(-48.3845, 179.7341),
new LatLng(-48.3845, 165.8254),
new LatLng(-33.5951, 165.8254)
]
private var hawaii:Array = [
new LatLng(21.8000, -160.4347),
new LatLng(22.5477, -159.7975),
new LatLng(21.4067, -156.3533),
new LatLng(19.5336, -154.4197),
new LatLng(18.6511, -155.6392),
new LatLng(20.6633, -157.8639),
new LatLng(21.8000, -160.4347)
]
donut.setPolyline(1, hawaii)
donut.setPolyline(2, nz)
donut.setPolyline(3, australia)
The problem lies when the meridian line is visible in the map viewport. This
problem is more evident when zommed in, as the donut hole polylines jump
from the visible viewport to the other side of a lat long span.
Sometimes the outer array doesnt even correctly render, causing the donut
polygon to essentialy invert (polygons over the countries, rather than
cutouts)
I realise this is a tough one to visualise. I have attached the .as + .fla
file in case anyone wants to test it out.
http://www.digital.leskiwis.com/maps/MapTest.zip
So you're trying to make a big polygon with holes cut out for Australia, nz, Hawaii,...? Your code for adding the polylines seems wrong to me. I'd start with the big square:
var outer:Array = [ new LatLng(90, -180),
new LatLng(90, 180),
new LatLng(-90, 180),
new LatLng(-90, -180),
new LatLng(90, -180)]
donut = new Polygon([outer],
new PolygonOptions({
strokeStyle: new StrokeStyle({
thickness: 0}),
fillStyle: new FillStyle({
color: 0x000000,
alpha: 0.5})
}));
Then add your holes
//define au, nz, hi
//...
//the 0th polyline is already the outer edge...
donut.setPolyline(1, hi);
donut.setPolyline(2, nz);
donut.setPolyline(3, au);
Now you dounut is a big rectangle with 3 holes.
Then add it to the map:
map.addOverlay(donut);
I've worked with lots of polygons that crossed hemispheres and meridians in Google Maps before, you don't have to mess with the viewport or zoom region or anything like that. As long as you're defining the polygon the way you think you are, GM will draw it correctly in any bounding rect (even if you are zoomed in so far that no edge of the polygon is visible).
The other thing I see is that the giant polygon you're making to cover the whole world is a little ambiguous: For example 90,-180 and 90,180 are the same point (the north pole) a line connecting those coordinates would have 0 length. Doing stuff at the poles is kinda effed in Mercator. Any possibility of cutting it off a 89° N? I think that would make your outer polygon more happy.
Related
How to draw a gizmo by giving it a position, orientation and eventually a scale in a CesiumJS application?
By gizmo I mean a 3-axes right-handed reference frame using (x,y,z) vectors, ideally depicted as (RGB) values, such as these, for example:
I wish I could depict the orientation of any object (e.g. a glTF) by placing such reference frame, for example, at the position of the object origin (e.g. using its longitude, latitude and elevation) and following its orientation, as defined by its heading, pitch and roll values which must follow the three given angles in their original order (heading first, pitch second and roll third) starting from the LTP-ENU (0,0,0) convention (x=0=east, y=0=north, z=0=upward).
The inspector is not an option.
You can use DebugModelMatrixPrimitive.
Here 's Sandcastle
Sample code
const viewer = new Cesium.Viewer("cesiumContainer");
const position = Cesium.Cartesian3.fromDegrees(-107.0, 40.0, 300000.0);
const redSphere = viewer.entities.add({
name: "Red sphere with black outline",
position: position,
ellipsoid: {
radii: new Cesium.Cartesian3(300000.0, 300000.0, 300000.0),
material: Cesium.Color.RED.withAlpha(0.5),
outline: true,
outlineColor: Cesium.Color.BLACK,
},
});
const heading = Cesium.Math.toRadians(10);
const pitch = Cesium.Math.toRadians(50);
const roll = Cesium.Math.toRadians(0);
const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);
const frame = Cesium.Transforms.headingPitchRollToFixedFrame(position, hpr);
viewer.scene.primitives.add(new Cesium.DebugModelMatrixPrimitive({
modelMatrix: frame,
length: 800000,
width: 3.0
}));
viewer.zoomTo(viewer.entities);
I have a initial Lat/Lng derive from click event in google maps.
Using that Lat/Lng, I want to be able to construct a rectangle polygon that is 2km by 2km. Since I already have a lat/lng, I attempted to find SE corners of a rectangle - using computeOffset.
var initial_pos = new google.maps.LatLng(lat, lng)
var south = spherical.computeOffset(initial_pos, 2000, 135);
var east = spherical.computeOffset(initial_pos, 2000, 90);
var bounds = new google.maps.LatLngBounds(
initial_pos, south, east
);
var rectangle = new google.maps.Rectangle({
map:map,
bounds: bounds
});
You are right. To draw a rectangle you will need the bounds, which can be derived from two diagonally opposite vertices of the rectangle to be drawn. Let's say you have NW (NorthWest) corner and you are trying to draw a square of side s. You may then find out LatLng of the SE corner, using computeOffset, with distance as s*√2 (in meters) and heading as 135 (degrees).
Following are suggestions on the currently posted source code:
You should calculate a new position only once. Since this position is diagonally opposite, distance should be 2000*1.414. Also, note that the bounds is not initialized with LatLng. They are initialized with four variables. north and south are Lat values. east & west are Lng values. Here are my code change suggestions. Please try them. Please treat this as pseudo code and suite appropriate changes as needed.(Following code is now updated during my edit and should work. Ensure that libraries=geometry is added in the script tag, e.g.
<script async defer
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&libraries=geometry&callback=initGMap">
</script>)
var initial_pos = new google.maps.LatLng(18.39,77.12);
// initialize initial_pos variable based on click event or so
var calculated_pos = google.maps.geometry.spherical.computeOffset(initial_pos, 200*1.414, 135);
var rectangle = new google.maps.Rectangle({
map: map,
bounds:{
north: initial_pos.lat(),
south: calculated_pos.lat(),
west: initial_pos.lng(),
east: calculated_pos.lng()
}
});
I'm trying to get Rectangle.intersection to provide me with the rectangle of the intersection area of 2 overlapping shapes but not having much success.
The code below is simply 2 shapes the same size. The top most shape is draggable.
When the drag is stopped I perform a bottomRect.intersection(topRect) call but this always returns the full size of the rect, not the intersection size.
(the code can be copied and pasted into a new ActionScript file on the first frame and run.)
Does anyone have an idea where I'm going wrong?
Thanks
import flash.geom.Rectangle;
import flash.display.Sprite;
var bottomSprite:Sprite = new Sprite();
addChild(bottomSprite);
var bottomRect:Shape = new Shape;
bottomRect.graphics.beginFill(0xFF0000);
bottomRect.graphics.drawRect(0, 0, 320,480);
bottomRect.graphics.endFill();
bottomSprite.addChild(bottomRect);
var topSprite:Sprite = new Sprite();
addChild(topSprite);
var topRect:Shape = new Shape;
topRect.graphics.beginFill(0x000033);
topRect.graphics.drawRect(0, 0, 320,480);
topRect.graphics.endFill();
topSprite.addChild(topRect);
var bottomBoundsRect:Rectangle = stage.getBounds(bottomSprite);
trace("START: bottomBoundsRect ", bottomBoundsRect);
var topBoundsRect:Rectangle = stage.getBounds(topSprite);
trace("START: topBoundsRect ", topBoundsRect);
topSprite.addEventListener(MouseEvent.MOUSE_DOWN, mouseDownHandler);
topSprite.addEventListener(MouseEvent.MOUSE_UP, mouseUpHandler);
function mouseDownHandler(evt:MouseEvent):void{
topSprite.startDrag();
}
function mouseUpHandler(evt:MouseEvent):void{
topSprite.stopDrag();
topBoundsRect = stage.getBounds(topSprite);
trace("INTERSECTION RECT", bottomBoundsRect.intersection(topBoundsRect));
}
The problem is because of wrong toIntersect property that you pass:
topBoundsRect = stage.getBounds(topSprite);
trace("INTERSECTION RECT", bottomBoundsRect.intersection(topBoundsRect));
What you do is that you get the bounds of the topSprite agains the Stage. If you trace it, it will give you something like this:
(x=-62, y=-41, w=382, h=521)
So you have a bounds that start at 0,0 and have bigger width/height, because you move the topSprite - here I've moved it 62 pixels to the right (382 - 320 [width]), and 41 pixels down (521 - 480 [height]).
The actual intersection of this rectangle against the bottom one, is exactly the size of the bottom one.
What you should do is something similar to this:
// somehow get the rectangle of the bottom sprite
var br:Rectangle = new Rectangle(bottomSprite.x, bottomSprite.y, bottomSprite.width, bottomSprite.height);
// somehow get the rectangle of the top sprite
var tr:Rectangle = new Rectangle(topSprite.x, topSprite.y, topSprite.width, topSprite.height);
trace (br.intersection(tr)); // intersect them
There are few ways to get the bounds, but this is also working and shows the idea.
Hope that helps! :)
I am working on an user interface that shows many pins on a map.
During the development I am randomly generating 1500 map pins just to be placed on the map to test look/feel/performance etc. issues.
The code which does that looks like this:
for (var i = 0; i <= 1500; i += 1) {
$scope.mapPins.push({
latitude: (Math.random() * 2) + 51,
longitude: (Math.random() * 4) + 3,
icon: themeImages[Math.floor(Math.random() * themeImages.length)],
title: 'Sample title',
infoContent: 'Sample content'
});
}
Naturally the area of the pins covered is a rectangle for latitudes 51-53 and longitudes 3-7. For those who are wondering where it is, it is the area roughly around Netherlands.
Now, there's a little problem that the Netherlands is not a rectangular area and a lot of these coordinates fall over the sea and I would like my coordinates to be only on the land.
Is there a witty mathematical way how I can pool coordinates from a non-rectangular area?
Of course I could make a google.maps polygon object that covers a nonrectangular shape and then via google api test every random generated pin whether it falls within the bounds of this shape etc, but that would be an overkill for UI design phase. Basically my question is whether there is a neat mathematical trick that would allow me to randomly generate coordinates from a non-rectangular space.
Leave your code as it is, the rectangle is the bounding box over your area of interest.
Then add a line
if (isPointInpolygon(polygon, longitudeOrX, latitudeOrY) {
// use this location
}
now you only need to search for a point in polygon function, which is easy to find.
you can directly use the coordinates in (long, lat) order, longitude is related to x coordinate, lat to y.
The polygon has to be filled with the coordinates of the country not insode the water.
If you have islands, then maybe you need multiple such polygons, then iterate over all.
Not to be a stickler but you're actually generating 1501 map pins :)
It is very unlikely that you'll find a simpler solution than using a simple pointinpolygon check.
Use the Google Maps Drawing library (https://developers.google.com/maps/documentation/javascript/drawing#using_the_library) to draw a polygon around the boundary of the Netherlands and save it however you want (e.g., in database, or just copy the string that defines the boundary's coordinates).
Then in your script above, define the google maps polygon (similar to what is done here in the official docs: https://developers.google.com/maps/documentation/javascript/shapes#polygons), then use the containsLocation method in the Google Maps Geometry library (https://developers.google.com/maps/documentation/javascript/examples/poly-containsLocation) to check if your random map pins lie within the boundaries of the Netherlands before adding them to the map.
For example:
var netherlandsCoords = [
// comma-separated list of coordinates defining the Netherlands boundary
];
var netherlandsBoundary = new google.maps.Polygon({
path: netherlandsCoords
});
for (var i = 0; i <= 1500; i += 1) {
var lat = (Math.random() * 2) + 51;
var lng = (Math.random() * 4) + 3;
var latlng = new google.maps.LatLng(lat, lng);
if (google.maps.geometry.poly.containsLocation(latlng, netherlandsBoundary)) {
$scope.mapPins.push({
latitude: lat,
longitude: lng,
icon: themeImages[Math.floor(Math.random() * themeImages.length)],
title: 'Sample title',
infoContent: 'Sample content'
});
}
}
In building a program that displays a map, I have two sliders:
that changes the map's pitch
that rotates the map's heading
And, two Buttons that change the Zoom_Level of the map
I have close to 200 images that need to be displayed on the map at any given time based on the zoom level. (each one is click-able)
With so many Images, I'm getting an:
"A first chance exception of type 'System.OutOfMemoryException' occurred in System.Windows.ni.dll"
thrown.
Many of these Images are the same - just displayed in different places. I find it very inefficient that I need to initialize each different Image separately and place it inside it's own MapOverlay instead of referencing a globally constructed Image and referencing it when I need it. (there is also a problem with Clearing the Map.Layers when the Images are defined globally).
Is there a better way to add many Images to a map?
After I hit about 50 Images I get the OutOfMemoryException (the Images need to be defined separately so that they are square in dimension for the rotating to work properly).
Does it matter how the Images are added to the Project/App ("Build Action" or the "Copy to Output Directory")? Would it be better to have them in Isolated Storage? Would this make a difference?
Here is the code I'm currently using to add Images:
MapLayer pinLayerZoom12 = new MapLayer();
MapOverlay pinOverlay = new MapOverlay();
// Add the location of the Pushpin using latitude and longitude.
pinOverlay.GeoCoordinate = new GeoCoordinate(49.33783000, -0.45215600);
Image pinOverlayImage = new Image();
pinOverlayImage.Source = new BitmapImage(new Uri("images/Hedgehog.png", UriKind.Relative));
pinOverlay.Content = pinOverlayImage;
pinOverlay.PositionOrigin = new Point(0.0, 0.0);
pinOverlayImage.Opacity = 0.8;
pinOverlayImage.Height = 10;
pinOverlayImage.Width = 10;
pinOverlayImage.Tap += pinOverlayImage_Tap;
pinLayerZoom12.Add(pinOverlay);
MapOverlay pinOverlay2 = new MapOverlay();
// Add the location of the Pushpin using latitude and longitude.,
pinOverlay2.GeoCoordinate = new GeoCoordinate(49.33783000, -0.44547083);
Image pinOverlay2Image = new Image();
pinOverlay2Image.Source = new BitmapImage(new Uri("images/Hedgehog.png", UriKind.Relative));
pinOverlay2.Content = pinOverlay2Image;
pinOverlay2.PositionOrigin = new Point(0.0, 0.0);
pinOverlay2Image.Opacity = 0.8;
pinOverlay2Image.Height = 10;
pinOverlay2Image.Width = 10;
pinOverlayImage.Tap += pinOverlayImage2_Tap;
pinLayerZoom12.Add(pinOverlay2);
// Add the layer to the map
map1.Layers.Add(pinLayerZoom12);
Thank you for any help you can give me!