1 | goog.require('ol.Feature');
|
2 | goog.require('ol.Map');
|
3 | goog.require('ol.Sphere');
|
4 | goog.require('ol.View');
|
5 | goog.require('ol.geom.Polygon');
|
6 | goog.require('ol.layer.Tile');
|
7 | goog.require('ol.layer.Vector');
|
8 | goog.require('ol.source.TileWMS');
|
9 | goog.require('ol.source.Vector');
|
10 |
|
11 | var vectorLayer4326 = new ol.layer.Vector({
|
12 | source: new ol.source.Vector()
|
13 | });
|
14 |
|
15 | var vectorLayer3857 = new ol.layer.Vector({
|
16 | source: new ol.source.Vector()
|
17 | });
|
18 |
|
19 | var map4326 = new ol.Map({
|
20 | layers: [
|
21 | new ol.layer.Tile({
|
22 | source: new ol.source.TileWMS({
|
23 | url: 'https://ahocevar.com/geoserver/wms',
|
24 | params: {
|
25 | 'LAYERS': 'ne:NE1_HR_LC_SR_W_DR',
|
26 | 'TILED': true
|
27 | }
|
28 | })
|
29 | }),
|
30 | vectorLayer4326
|
31 | ],
|
32 | target: 'map4326',
|
33 | view: new ol.View({
|
34 | projection: 'EPSG:4326',
|
35 | center: [0, 0],
|
36 | zoom: 2
|
37 | })
|
38 | });
|
39 |
|
40 | var map3857 = new ol.Map({
|
41 | layers: [
|
42 | new ol.layer.Tile({
|
43 | source: new ol.source.TileWMS({
|
44 | url: 'https://ahocevar.com/geoserver/wms',
|
45 | params: {
|
46 | 'LAYERS': 'ne:NE1_HR_LC_SR_W_DR',
|
47 | 'TILED': true
|
48 | }
|
49 | })
|
50 | }),
|
51 | vectorLayer3857
|
52 | ],
|
53 | target: 'map3857',
|
54 | view: new ol.View({
|
55 | center: [0, 0],
|
56 | zoom: 2
|
57 | })
|
58 | });
|
59 |
|
60 | var wgs84Sphere = new ol.Sphere(6378137);
|
61 |
|
62 | var radius = 800000;
|
63 | var x, y;
|
64 | for (x = -180; x < 180; x += 30) {
|
65 | for (y = -90; y < 90; y += 30) {
|
66 | var circle4326 = ol.geom.Polygon.circular(wgs84Sphere, [x, y], radius, 64);
|
67 | var circle3857 = circle4326.clone().transform('EPSG:4326', 'EPSG:3857');
|
68 | vectorLayer4326.getSource().addFeature(new ol.Feature(circle4326));
|
69 | vectorLayer3857.getSource().addFeature(new ol.Feature(circle3857));
|
70 | }
|
71 | }
|