Some tips about OpenLayer

work

Using openlayer in work currently and need to write down some notes about it.

EPSG 4326 VS EPSG 3857

地理Coordiante系统由EPSG编号标识。最常用于网络地图应用的两个坐标系统是EPSG：4326和EPSG：3857。

  • EPSG：4326（又名WGS84，未投影）是一个地理的非项目坐标系。它是lat，longs GPS显示器，单位是十进制度。EPSG：4326无法在平面地图上以有意义的方式显示。
  • EPSG：3857（又名Pseudo-Mercator，球形墨卡托或Web墨卡托）是投影坐标系。这是Google Maps和几乎所有其他Web制图应用程序使用的坐标系。

通常，数据存储在EPSG：4326中并显示在EPSG：3857中，自行转换。

ref link

Function to draw a sector accurately

Cuz the untransformed sector displayed with great error in angle = 45° (start angle) so I have to turn to this Function as following, which convert longitude and latitude into Mercator projection first before the calculation.

1
2
3
4
5
6
7
8
9
10
11
12
13
function GetMarcoXyArcArray(origin,radius,sides,r,angel) {
            var x = [];
            x[0] = [origin[0],origin[1]];
            for (var j = 1; j < sides; j++) {
                var tx = origin[0] + radius * Math.cos(Math.PI / 180 * (90 - angel + (sides/2 - j) * r / (sides-2)));

                var ty = origin[1] + radius * Math.sin(Math.PI / 180 * (90 - angel + (sides/2 - j) * r / (sides-2)));

                x[j]=[tx,ty];
            }
            //alert(x);
            return new ol.geom.Polygon([x]);
    }

Thanks to tianshibufan521’s post

After modification:


190813 update

this method will lead to wrong presentation size at about 4/5 of expected radius due to the Mercator projection. I couldn’t figure out why for the second time I tried the origin calculation method as following, it turned out to appear normally with start angle of 45°.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
for (var i = 0; i < sides; ++i) {
  rotatedAngle = (i * radian / 360 * 2 * Math.PI / sides) + (90 - angle - radian / 2 )* Math.PI / 180 ; // start from y = 0 (sector1 based on symmetry y axis, clockwise rotation)
  coordinate = this.getJWD(origin.Longitude, origin.Latitude, radius, rotatedAngle);  // method getJWD() can be found ↓ link
  points.push(coordinate);
}

// if not circle, add center point.
// this allows drawing circle via polygon api
if (radian !== "360") {
  points.push([origin.Longitude, origin.Latitude]);
}

var ring = new ol.geom.LinearRing(points);
var pointsCoords = ring.getCoordinates();
feature = new ol.Feature(new ol.geom.Polygon([pointsCoords]));

calculate longitude & latitude via coordinate

former dev using func getJWD to calculate the coordinates, but this func cause the display error with start degree of 45°, so I discarded it.
For more info about this func : link

Draw a circle

Simply used ol.geom.Circle instead of ol..geom.Polygon, which will cause a start/end radius as follows:

Before
After
 
1
2
3
4
5
var circle = new ol.geom.Circle(
    ol.proj.transform([longitude, latitude], 'EPSG:4326', 'EPSG:3857'),
    radius
);
var circleFeature = new ol.Feature(circle);

OpenLayer Samples link || Circle

update:

The pattern turned out to be simple circle pattern，which does not include geometry params，but our project need geometry params in GeoJSON format to decide which area is covered.
So I finally turn to ol/geom/Polygon.fromCircle which transform plain circle into Polygon format. It returns Polygon geometry so that can be used in further calculation of coverage.

1
2
3
var circle = new OpenLayers.geom.Circle(circleParams.center, circleParams.radius);
feature = new OpenLayers.Feature(new OpenLayers.geom.Polygon.fromCircle(circle, 500));