Compare commits
548 Commits
v3.19.0-be
...
v3.20.0
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
a9b62af3fc | ||
|
|
53473ddeb1 | ||
|
|
49b3359aa8 | ||
|
|
b21944fb50 | ||
|
|
4db2177c1d | ||
|
|
bb62360213 | ||
|
|
adacfb6453 | ||
|
|
bedda42c3e | ||
|
|
862152f9db | ||
|
|
da419ffc6c | ||
|
|
676b3efbd7 | ||
|
|
f0dc965974 | ||
|
|
1f742da046 | ||
|
|
a2fc950b44 | ||
|
|
2bb61dab60 | ||
|
|
8d5042c1b1 | ||
|
|
4ff87a0eef | ||
|
|
403bc4bbe1 | ||
|
|
61ac0c47ed | ||
|
|
f5a27d2788 | ||
|
|
321b1f72ad | ||
|
|
fbbc42f8f9 | ||
|
|
26f31e3771 | ||
|
|
f28e0ebc1f | ||
|
|
f10ae6c474 | ||
|
|
55ec0af072 | ||
|
|
8edc2be103 | ||
|
|
a469803941 | ||
|
|
00a4f3b410 | ||
|
|
f6ee11bb68 | ||
|
|
eede027417 | ||
|
|
3a08cfd7c6 | ||
|
|
e9d2b913ea | ||
|
|
4640c44f2a | ||
|
|
c93b0ba859 | ||
|
|
5608e7284b | ||
|
|
f0439685ad | ||
|
|
da020d77e9 | ||
|
|
e0edefb4d7 | ||
|
|
2ea41afe6e | ||
|
|
63f57768a3 | ||
|
|
80e392ea52 | ||
|
|
2493eb2c20 | ||
|
|
5ce0d8aa2a | ||
|
|
80188b2044 | ||
|
|
a6c768ae07 | ||
|
|
85893646c4 | ||
|
|
e95778e47f | ||
|
|
000453a0e1 | ||
|
|
0061b15a91 | ||
|
|
d854222c4b | ||
|
|
f795019215 | ||
|
|
5e0ce08804 | ||
|
|
10e36a0529 | ||
|
|
109e6a8324 | ||
|
|
f492d69691 | ||
|
|
59e802737e | ||
|
|
63e952a91a | ||
|
|
041766d53c | ||
|
|
57e3e7273e | ||
|
|
66dc2582ef | ||
|
|
7858b68fc0 | ||
|
|
c00906cde9 | ||
|
|
daba1fbcb6 | ||
|
|
3d2f677f2a | ||
|
|
c0fe3f1e4f | ||
|
|
780bb1b30d | ||
|
|
82c0dcdc00 | ||
|
|
fc8915d8b7 | ||
|
|
db5032af49 | ||
|
|
132be598e7 | ||
|
|
89ebf0a182 | ||
|
|
621589b318 | ||
|
|
93d86e63fc | ||
|
|
ee7b894350 | ||
|
|
0d65d1d813 | ||
|
|
2aa4f0c01c | ||
|
|
ccdb955cd9 | ||
|
|
f898a3b182 | ||
|
|
c8064d15b7 | ||
|
|
3b64133f21 | ||
|
|
7ee04ec200 | ||
|
|
a0e310700c | ||
|
|
99eddbb31f | ||
|
|
dfbc7bb743 | ||
|
|
12add87603 | ||
|
|
6259caf634 | ||
|
|
6d22119425 | ||
|
|
08569d4eb3 | ||
|
|
a33caa598c | ||
|
|
b54342dfb8 | ||
|
|
679fe298aa | ||
|
|
fd6116ab6b | ||
|
|
f6a3ec513e | ||
|
|
ab640a20d0 | ||
|
|
fda2d8e40e | ||
|
|
37c445275f | ||
|
|
e87407c28f | ||
|
|
a3f3c24c51 | ||
|
|
c04a011077 | ||
|
|
dfb4c800b9 | ||
|
|
fdec14c425 | ||
|
|
ce8cf27ad3 | ||
|
|
9eda6df821 | ||
|
|
85881082b0 | ||
|
|
fdff4c5c7c | ||
|
|
aa08f88105 | ||
|
|
cde48521d0 | ||
|
|
bdeaafcdf7 | ||
|
|
510076290d | ||
|
|
9dc300d520 | ||
|
|
5c0a6de288 | ||
|
|
b77b5e5a55 | ||
|
|
794628782c | ||
|
|
fe758c2606 | ||
|
|
c03f19bf5c | ||
|
|
d9453890eb | ||
|
|
4dc828c691 | ||
|
|
88cfdb435c | ||
|
|
656af72615 | ||
|
|
6c644186ba | ||
|
|
51f7bfb415 | ||
|
|
8f7aee4847 | ||
|
|
8c6437fba5 | ||
|
|
65c89199f1 | ||
|
|
9ef0434be2 | ||
|
|
59b8d969d6 | ||
|
|
5b04771d3f | ||
|
|
1b6c239114 | ||
|
|
c4af981b01 | ||
|
|
c898cda2e6 | ||
|
|
d47e5aed10 | ||
|
|
7ad519fbf3 | ||
|
|
8fe783d975 | ||
|
|
15769101af | ||
|
|
0e95905c6f | ||
|
|
9ffa103a79 | ||
|
|
7f0d914161 | ||
|
|
66a55d126b | ||
|
|
d5c7692a96 | ||
|
|
3e31ff113b | ||
|
|
1f04a0aad9 | ||
|
|
d2e3017088 | ||
|
|
02d41caa8a | ||
|
|
dba0934112 | ||
|
|
d27591dea7 | ||
|
|
0f204641e3 | ||
|
|
02461b3416 | ||
|
|
3e56dba1b4 | ||
|
|
3b2ff5a2ee | ||
|
|
efbc4ead8d | ||
|
|
dd905ffb5b | ||
|
|
a7ddda7d81 | ||
|
|
ca1414b2d0 | ||
|
|
310fabe94a | ||
|
|
0c45b52a7a | ||
|
|
8a6b206220 | ||
|
|
0cb0ea2a8a | ||
|
|
c675a33235 | ||
|
|
62fb8d8fd8 | ||
|
|
36df9a9c09 | ||
|
|
dc360c2d7f | ||
|
|
763bbca549 | ||
|
|
697cbf16f0 | ||
|
|
dd7e49c217 | ||
|
|
58afee6706 | ||
|
|
ac6408be3b | ||
|
|
86c914f3df | ||
|
|
5fb0a84579 | ||
|
|
a002474761 | ||
|
|
e124b34b24 | ||
|
|
3af5c2805e | ||
|
|
004c0f7e27 | ||
|
|
0c3d5eca5c | ||
|
|
71d790ccfd | ||
|
|
8e8098b362 | ||
|
|
5cf2e9c072 | ||
|
|
360e77481d | ||
|
|
dc27f768d0 | ||
|
|
a0089b5126 | ||
|
|
657f2c7b6c | ||
|
|
5d65028d26 | ||
|
|
88f7e7a38d | ||
|
|
610084d456 | ||
|
|
18bc820f8b | ||
|
|
4b2fb38954 | ||
|
|
226bf5a9ea | ||
|
|
16a50ee0c7 | ||
|
|
ce3b286cd3 | ||
|
|
112fae228a | ||
|
|
18cf6c30bd | ||
|
|
269c3eb943 | ||
|
|
e893603966 | ||
|
|
638b7752fa | ||
|
|
f96a4a7301 | ||
|
|
1c7203a203 | ||
|
|
48d3bfe297 | ||
|
|
16dfc5dfba | ||
|
|
c966e21e40 | ||
|
|
2415050500 | ||
|
|
b7396b0b94 | ||
|
|
3897312af6 | ||
|
|
9d6a860cd1 | ||
|
|
4d8777220a | ||
|
|
b0d11391b2 | ||
|
|
249084dcd4 | ||
|
|
c9c970303f | ||
|
|
3f828248b9 | ||
|
|
e64549c50c | ||
|
|
4be8de62ae | ||
|
|
f15a9652d8 | ||
|
|
eba006b796 | ||
|
|
8c561a45b9 | ||
|
|
99e4009b19 | ||
|
|
e2ec6d0b82 | ||
|
|
0f8e1a7e40 | ||
|
|
c13d09ba23 | ||
|
|
fb71860a03 | ||
|
|
350d1add81 | ||
|
|
0972988bdb | ||
|
|
c7edd21cc3 | ||
|
|
caeb8e4820 | ||
|
|
6e958514ee | ||
|
|
628db9146d | ||
|
|
f5978c659c | ||
|
|
a6ddee0c5f | ||
|
|
a052b645df | ||
|
|
e40b545e40 | ||
|
|
8e9b589ca9 | ||
|
|
581ea8c775 | ||
|
|
2519cf36fc | ||
|
|
8bdbe7aae0 | ||
|
|
c8d35e4fb0 | ||
|
|
13884dac4d | ||
|
|
9a900becd3 | ||
|
|
d8c428a8a2 | ||
|
|
f56b2c8a75 | ||
|
|
d759ad603a | ||
|
|
caef2b51b4 | ||
|
|
2842938514 | ||
|
|
6ce1731a03 | ||
|
|
76e1f4e041 | ||
|
|
800c6f53a9 | ||
|
|
fd3c9f58bf | ||
|
|
c990cab0c3 | ||
|
|
d0a957d484 | ||
|
|
886ddb160c | ||
|
|
26a80af517 | ||
|
|
5fa1bd4bf0 | ||
|
|
e7e425c288 | ||
|
|
d0ada3442d | ||
|
|
4b1dfd7897 | ||
|
|
f436f2d5e2 | ||
|
|
5b59ddd473 | ||
|
|
8c49f6db46 | ||
|
|
9fd55e50f7 | ||
|
|
c60e1d0fb3 | ||
|
|
a133beb168 | ||
|
|
b87564335e | ||
|
|
ca1c6c343e | ||
|
|
940b5e18b5 | ||
|
|
8401d22f28 | ||
|
|
1ae6921e53 | ||
|
|
15c4dadbaf | ||
|
|
82e6508dea | ||
|
|
8c7d5e9cbc | ||
|
|
8dbd16ee40 | ||
|
|
9af73a1588 | ||
|
|
0ac620c817 | ||
|
|
5b85f8ecc9 | ||
|
|
8f6e07bfb8 | ||
|
|
70d7a865d7 | ||
|
|
51cab63032 | ||
|
|
455b28d2fa | ||
|
|
3c8d339617 | ||
|
|
d4295e7ed7 | ||
|
|
7c5e428578 | ||
|
|
489d37d384 | ||
|
|
e6f8288d36 | ||
|
|
e2be8611ef | ||
|
|
7dd7eb1b6f | ||
|
|
94e6dc4e4e | ||
|
|
822b0a49b4 | ||
|
|
5baf107078 | ||
|
|
c39f05623e | ||
|
|
9b828afad3 | ||
|
|
16f2cf4809 | ||
|
|
7f01de9261 | ||
|
|
9272db1d25 | ||
|
|
a20bd72aa9 | ||
|
|
b829471c85 | ||
|
|
64057d7e6b | ||
|
|
447c6800ca | ||
|
|
291766c48d | ||
|
|
97d942c8e2 | ||
|
|
0c54d141cb | ||
|
|
2d711a59b5 | ||
|
|
25770e7ef4 | ||
|
|
61df657cfb | ||
|
|
5d214567ab | ||
|
|
902003ee12 | ||
|
|
af82f972da | ||
|
|
60e352fa09 | ||
|
|
741494098e | ||
|
|
100990cc12 | ||
|
|
5b00095bd0 | ||
|
|
6090051661 | ||
|
|
c52d6f2c6b | ||
|
|
183266beef | ||
|
|
d52b3715d9 | ||
|
|
77ec54e245 | ||
|
|
2b82f7281f | ||
|
|
474e6ea643 | ||
|
|
ea9fea000a | ||
|
|
7fde4a48f4 | ||
|
|
8d15a00b81 | ||
|
|
2eedffa100 | ||
|
|
fee761b159 | ||
|
|
6f08498684 | ||
|
|
337c6bb73e | ||
|
|
3455686734 | ||
|
|
f4579dacd8 | ||
|
|
4b19f12c29 | ||
|
|
6b00e2ace4 | ||
|
|
da8eb97f54 | ||
|
|
f6ad883db6 | ||
|
|
a484cf0910 | ||
|
|
e447df39f7 | ||
|
|
e13d3f6d2b | ||
|
|
f16d1b06eb | ||
|
|
1147d51f2f | ||
|
|
01da26b1c4 | ||
|
|
5fb9a2ebf8 | ||
|
|
b37f978c29 | ||
|
|
3acfe79c78 | ||
|
|
c95aa39dde | ||
|
|
8529a74063 | ||
|
|
f6e9c12161 | ||
|
|
dd079e915a | ||
|
|
0c8c5a003b | ||
|
|
61ef7bf95d | ||
|
|
c452164b8a | ||
|
|
3d26d3bdc6 | ||
|
|
83b7a1e2fc | ||
|
|
e979baa3dc | ||
|
|
16954f8df0 | ||
|
|
02c0a6a533 | ||
|
|
5d61218134 | ||
|
|
bccc841ebd | ||
|
|
c0f960cf71 | ||
|
|
d58103087f | ||
|
|
bf13dfeb50 | ||
|
|
0f58fa32eb | ||
|
|
73f970f350 | ||
|
|
3656529252 | ||
|
|
2420ad56c1 | ||
|
|
fb1a8335ac | ||
|
|
a28576d2b9 | ||
|
|
760a231306 | ||
|
|
c2aa18dcbf | ||
|
|
b934eb6e59 | ||
|
|
bd4808d161 | ||
|
|
337c9a7e93 | ||
|
|
71ebed07bf | ||
|
|
5f5bc2ecdb | ||
|
|
888032dcc9 | ||
|
|
df83f6633f | ||
|
|
7492a91c10 | ||
|
|
f369ea2e29 | ||
|
|
b4e59a99e8 | ||
|
|
48c1d09a95 | ||
|
|
6092e6ecbb | ||
|
|
849b04b882 | ||
|
|
cc0452a2d9 | ||
|
|
cfe78f2766 | ||
|
|
b9fe59c269 | ||
|
|
a3b474623e | ||
|
|
04f070b159 | ||
|
|
14f575f207 | ||
|
|
8a69f1f6ea | ||
|
|
aa7e54833d | ||
|
|
39abb2b143 | ||
|
|
d90bfbde58 | ||
|
|
e0a9910d4e | ||
|
|
7834a95210 | ||
|
|
f4d12ad448 | ||
|
|
5d5d49ad12 | ||
|
|
a2a2a53e08 | ||
|
|
9d5453a927 | ||
|
|
1bd11c1958 | ||
|
|
767bec4dc7 | ||
|
|
70338b928e | ||
|
|
dd6b05b285 | ||
|
|
e59b90377f | ||
|
|
e0a0804040 | ||
|
|
f973eaa24d | ||
|
|
2fe4d63893 | ||
|
|
908f254bd2 | ||
|
|
2132a02f76 | ||
|
|
78f283c32b | ||
|
|
9659d8598c | ||
|
|
42d1c51cbb | ||
|
|
c34f097ffd | ||
|
|
0a2b145fd5 | ||
|
|
0f8d26d829 | ||
|
|
2a1a9ec337 | ||
|
|
5627a467cd | ||
|
|
5498f5f7db | ||
|
|
84a3d6bee0 | ||
|
|
47c5e8fef7 | ||
|
|
d6f157a792 | ||
|
|
d88f5a8c2c | ||
|
|
574c570242 | ||
|
|
7584c6d540 | ||
|
|
dc7f367eaa | ||
|
|
12fb632999 | ||
|
|
1fbfd4aced | ||
|
|
0345055cfb | ||
|
|
88cebbf6c1 | ||
|
|
e8bc38b6a9 | ||
|
|
61fcc4a326 | ||
|
|
76e0a37d69 | ||
|
|
de5b16c0d3 | ||
|
|
8fb6b6b6e6 | ||
|
|
4e1ccaafcd | ||
|
|
3ce93a51ed | ||
|
|
e542c622a7 | ||
|
|
e853f1ed2a | ||
|
|
1311f65ece | ||
|
|
92bd1d67a8 | ||
|
|
2c200dcf5f | ||
|
|
b89eb77f20 | ||
|
|
e890b4b1d6 | ||
|
|
bca5fde854 | ||
|
|
dc23683c0c | ||
|
|
24d03bc014 | ||
|
|
8456270316 | ||
|
|
6caf8adc4c | ||
|
|
74bf0dfd72 | ||
|
|
68488eced9 | ||
|
|
910c9d7c4e | ||
|
|
f6b2858348 | ||
|
|
971faf230d | ||
|
|
625273c017 | ||
|
|
1181607f39 | ||
|
|
dc9770911f | ||
|
|
884e05b90b | ||
|
|
4904b5035e | ||
|
|
5644fe3e2f | ||
|
|
ac805e804b | ||
|
|
ec1ad89338 | ||
|
|
1e6c4472b2 | ||
|
|
9b12cac5c6 | ||
|
|
92583542eb | ||
|
|
7068081c67 | ||
|
|
8e6f74fecd | ||
|
|
7c983058ad | ||
|
|
2e5ecd1efb | ||
|
|
626968f72e | ||
|
|
0925538525 | ||
|
|
c016a497c3 | ||
|
|
0382c34c78 | ||
|
|
324e67fac1 | ||
|
|
8c8246a33f | ||
|
|
ff754a0a9f | ||
|
|
da402b22af | ||
|
|
100c42e671 | ||
|
|
9875df39bf | ||
|
|
978548b085 | ||
|
|
8f57ebd2c6 | ||
|
|
484b684d20 | ||
|
|
cba270efa1 | ||
|
|
4b0e857b93 | ||
|
|
1c8ed12b68 | ||
|
|
fad6d368a6 | ||
|
|
8d68d68c9d | ||
|
|
a80d073da9 | ||
|
|
333ccb6ae4 | ||
|
|
c58d98248a | ||
|
|
fdae2e8e00 | ||
|
|
068c9ceba4 | ||
|
|
b563e9079f | ||
|
|
78082e2833 | ||
|
|
eacc3a52bb | ||
|
|
988b3f8b9b | ||
|
|
32f112659f | ||
|
|
761c63585d | ||
|
|
6be7dcf9d2 | ||
|
|
07a413efff | ||
|
|
22084aa960 | ||
|
|
f5eaba4255 | ||
|
|
674e2ab37e | ||
|
|
ed677cec4e | ||
|
|
58d459bca0 | ||
|
|
5a3794752a | ||
|
|
189a7f1759 | ||
|
|
80a6512d55 | ||
|
|
99dcaf3830 | ||
|
|
74450f40be | ||
|
|
f655f6740e | ||
|
|
cd4f2cc2d8 | ||
|
|
ba9e332baa | ||
|
|
a0ab27c182 | ||
|
|
8c4abaf47a | ||
|
|
941fbbedc0 | ||
|
|
df4f2ff28d | ||
|
|
cbf5d0bae0 | ||
|
|
0d686fe88b | ||
|
|
043a8ab1db | ||
|
|
0c4705fb9d | ||
|
|
9094894a41 | ||
|
|
857c9e83ac | ||
|
|
251ff89c70 | ||
|
|
de4728b1b7 | ||
|
|
309b2145cf | ||
|
|
c1c7c8bc11 | ||
|
|
5f18246355 | ||
|
|
f23921367b | ||
|
|
e26a4b36bb | ||
|
|
86e879be5d | ||
|
|
004afa6b9a | ||
|
|
fe874938c3 | ||
|
|
7cf1e74ae3 | ||
|
|
04649a74cd | ||
|
|
8ac6c85f0f | ||
|
|
321c65b023 | ||
|
|
5cdbd76b1e | ||
|
|
9f8315762a | ||
|
|
869153e7ac | ||
|
|
1bdf480670 | ||
|
|
eab85a2107 | ||
|
|
3f2424c0d8 | ||
|
|
74466a3561 | ||
|
|
09eee4aa43 | ||
|
|
19c5518c96 | ||
|
|
da32e5e367 | ||
|
|
8669dec33b | ||
|
|
72e0ad13b3 | ||
|
|
40c639b194 | ||
|
|
fb8c4820d0 | ||
|
|
eb4b2d4bcc | ||
|
|
5973644c4b | ||
|
|
0e6919462d | ||
|
|
6f4f2f100e | ||
|
|
cad455f635 | ||
|
|
529da77b49 | ||
|
|
4b6e907f69 | ||
|
|
2ce2e5bf27 |
@@ -77,7 +77,7 @@ Then, just point your browser <http://localhost:3000/build/examples> in your bro
|
|||||||
Run examples against the `ol.js` standalone build:
|
Run examples against the `ol.js` standalone build:
|
||||||
|
|
||||||
The examples can also be run against the `ol.js` standalone build, just like
|
The examples can also be run against the `ol.js` standalone build, just like
|
||||||
the examples [hosted](http://openlayers.org/en/master/examples/) on GitHub.
|
the examples [hosted](https://openlayers.org/en/master/examples/) on GitHub.
|
||||||
Start by executing the `host-examples` build target:
|
Start by executing the `host-examples` build target:
|
||||||
|
|
||||||
$ make host-examples
|
$ make host-examples
|
||||||
|
|||||||
@@ -1,14 +1,14 @@
|
|||||||
# OpenLayers 3
|
# OpenLayers 3
|
||||||
|
|
||||||
[](http://travis-ci.org/#!/openlayers/ol3)
|
[](http://travis-ci.org/#!/openlayers/ol3)
|
||||||
[](https://coveralls.io/r/openlayers/ol3?branch=master)
|
[](https://coveralls.io/github/openlayers/ol3?branch=master)
|
||||||
[](http://osgeo.org/)
|
[](http://osgeo.org/)
|
||||||
|
|
||||||
[OpenLayers 3](http://openlayers.org/) is a high-performance, feature-packed library for creating interactive maps on the web. It can display map tiles, vector data and markers loaded from any source on any web page. OpenLayers has been developed to further the use of geographic information of all kinds. It is completely free, Open Source JavaScript, released under the 2-clause BSD License (also known as the FreeBSD).
|
[OpenLayers 3](https://openlayers.org/) is a high-performance, feature-packed library for creating interactive maps on the web. It can display map tiles, vector data and markers loaded from any source on any web page. OpenLayers has been developed to further the use of geographic information of all kinds. It is completely free, Open Source JavaScript, released under the 2-clause BSD License (also known as the FreeBSD).
|
||||||
|
|
||||||
## Getting Started
|
## Getting Started
|
||||||
|
|
||||||
- Download the [latest release](http://openlayers.org/download/)
|
- Download the [latest release](https://openlayers.org/download/)
|
||||||
- Install with npm: `npm install openlayers`
|
- Install with npm: `npm install openlayers`
|
||||||
- Clone the repo: `git clone git@github.com:openlayers/ol3.git`
|
- Clone the repo: `git clone git@github.com:openlayers/ol3.git`
|
||||||
|
|
||||||
@@ -18,7 +18,7 @@ OpenLayers runs on all modern browsers that support [HTML5](https://html.spec.wh
|
|||||||
|
|
||||||
## Documentation
|
## Documentation
|
||||||
|
|
||||||
Check out the [hosted examples](http://openlayers.org/en/latest/examples/), the [workshop](http://openlayers.org/workshop/) or the [API documentation](http://openlayers.org/en/latest/apidoc/).
|
Check out the [hosted examples](https://openlayers.org/en/latest/examples/), the [workshop](https://openlayers.org/workshop/) or the [API documentation](https://openlayers.org/en/latest/apidoc/).
|
||||||
|
|
||||||
## Bugs
|
## Bugs
|
||||||
|
|
||||||
|
|||||||
@@ -1,5 +1,107 @@
|
|||||||
## Upgrade notes
|
## Upgrade notes
|
||||||
|
|
||||||
|
### v3.20.0
|
||||||
|
|
||||||
|
#### Use `view.animate()` instead of `map.beforeRender()` and `ol.animation` functions
|
||||||
|
|
||||||
|
The `map.beforeRender()` and `ol.animation` functions have been deprecated in favor of a new `view.animate()` function. Use of the deprecated functions will result in a warning during development. These functions are subject to removal in an upcoming release.
|
||||||
|
|
||||||
|
For details on the `view.animate()` method, see the API docs and the view animation example. Upgrading should be relatively straightforward. For example, if you wanted to have an animated pan, zoom, and rotation previously, you might have done this:
|
||||||
|
|
||||||
|
```js
|
||||||
|
var zoom = ol.animation.zoom({
|
||||||
|
resolution: view.getResolution()
|
||||||
|
});
|
||||||
|
var pan = ol.animation.pan({
|
||||||
|
source: view.getCenter()
|
||||||
|
});
|
||||||
|
var rotate = ol.animation.rotate({
|
||||||
|
rotation: view.getRotation()
|
||||||
|
});
|
||||||
|
|
||||||
|
map.beforeRender(zoom, pan, rotate);
|
||||||
|
|
||||||
|
map.setZoom(1);
|
||||||
|
map.setCenter([0, 0]);
|
||||||
|
map.setRotation(Math.PI);
|
||||||
|
```
|
||||||
|
|
||||||
|
Now, the same can be accomplished with this:
|
||||||
|
```js
|
||||||
|
view.animate({
|
||||||
|
zoom: 1,
|
||||||
|
center: [0, 0],
|
||||||
|
rotation: Math.PI
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
#### `ol.Map#forEachFeatureAtPixel` and `ol.Map#hasFeatureAtPixel` parameters have changed
|
||||||
|
|
||||||
|
If you are using the layer filter of one of these methods, please note that you now have to pass in the layer filter via an `ol.AtPixelOptions` object. If you are not using the layer filter the usage has not changed.
|
||||||
|
|
||||||
|
Old syntax:
|
||||||
|
```js
|
||||||
|
map.forEachFeatureAtPixel(pixel, callback, callbackThis, layerFilterFn, layerFilterThis);
|
||||||
|
|
||||||
|
map.hasFeatureAtPixel(pixel, layerFilterFn, layerFilterThis);
|
||||||
|
```
|
||||||
|
|
||||||
|
New syntax:
|
||||||
|
```js
|
||||||
|
map.forEachFeatureAtPixel(pixel, callback.bind(callbackThis), {
|
||||||
|
layerFilter: layerFilterFn.bind(layerFilterThis)
|
||||||
|
});
|
||||||
|
|
||||||
|
map.hasFeatureAtPixel(pixel, {
|
||||||
|
layerFilter: layerFilterFn.bind(layerFilterThis)
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
This change is due to the introduction of the `hitTolerance` parameter which can be passed in via this `ol.AtPixelOptions` object, too.
|
||||||
|
|
||||||
|
#### Use `ol.proj.getPointResolution()` instead of `projection.getPointResolution()`
|
||||||
|
|
||||||
|
The experimental `getPointResolution` method has been removed from `ol.Projection` instances. Since the implementation of this method required an inverse transform (function for transforming projected coordinates to geographic coordinates) and `ol.Projection` instances are not constructed with forward or inverse transforms, it does not make sense that a projection instance can always calculate the point resolution.
|
||||||
|
|
||||||
|
As a substitute for the `projection.getPointResolution()` function, a `ol.proj.getPointResolution()` function has been added. To upgrade, you will need to change things like this:
|
||||||
|
```js
|
||||||
|
projection.getPointResolution(resolution, point);
|
||||||
|
```
|
||||||
|
|
||||||
|
into this:
|
||||||
|
```js
|
||||||
|
ol.proj.getPointResolution(projection, resolution, point);
|
||||||
|
```
|
||||||
|
|
||||||
|
Note that if you were previously creating a projection with a `getPointResolution` function in the constructor (or calling `projection.setGetPointResolution()` after construction), this function will be used by `ol.proj.getPointResolution()`.
|
||||||
|
|
||||||
|
#### `ol.interaction.PinchZoom` no longer zooms to a whole-number zoom level after the gesture ends
|
||||||
|
|
||||||
|
The old behavior of `ol.interaction.PinchZoom` was to zoom to the next integer zoom level after the user ends the gesture.
|
||||||
|
|
||||||
|
Now the pinch zoom keeps the user selected zoom level even if it is a fractional zoom.
|
||||||
|
|
||||||
|
To get the old behavior set the new `constrainResolution` parameter to `true` like this:
|
||||||
|
```js
|
||||||
|
new ol.interaction.PinchZoom({constrainResolution: true})
|
||||||
|
```
|
||||||
|
|
||||||
|
See the new `pinch-zoom` example for a complete implementation.
|
||||||
|
|
||||||
|
### v3.19.1
|
||||||
|
|
||||||
|
#### `ol.style.Fill` with `CanvasGradient` or `CanvasPattern`
|
||||||
|
|
||||||
|
The origin for gradients and patterns has changed from `[0, 0]` to the top-left
|
||||||
|
corner of the extent of the geometry being filled.
|
||||||
|
|
||||||
|
### v3.19.0
|
||||||
|
|
||||||
|
#### `ol.style.Fill` with `CanvasGradient` or `CanvasPattern`
|
||||||
|
|
||||||
|
Previously, gradients and patterns were aligned with the canvas, so they did not
|
||||||
|
move and rotate with the map. This was changed to a more expected behavior by anchoring the fill to the map origin (usually at map coordinate `[0, 0]`).
|
||||||
|
|
||||||
#### `goog.DEBUG` define was renamed to `ol.DEBUG`
|
#### `goog.DEBUG` define was renamed to `ol.DEBUG`
|
||||||
|
|
||||||
As last step in the removal of the dependency on Google Closure Library, the `goog.DEBUG` compiler define was renamed to `ol.DEBUG`. Please change accordingly in your custom build configuration json files.
|
As last step in the removal of the dependency on Google Closure Library, the `goog.DEBUG` compiler define was renamed to `ol.DEBUG`. Please change accordingly in your custom build configuration json files.
|
||||||
@@ -22,6 +124,7 @@ A number of internal types have been renamed. This will not affect those who us
|
|||||||
* rename `ol.OverlayProperty` to `ol.Overlay.Property`
|
* rename `ol.OverlayProperty` to `ol.Overlay.Property`
|
||||||
* rename `ol.control.MousePositionProperty` to `ol.control.MousePosition.Property`
|
* rename `ol.control.MousePositionProperty` to `ol.control.MousePosition.Property`
|
||||||
* rename `ol.format.IGCZ` to `ol.format.IGC.Z`
|
* rename `ol.format.IGCZ` to `ol.format.IGC.Z`
|
||||||
|
* rename `ol.interaction.InteractionProperty` to `ol.interaction.Interaction.Property`
|
||||||
* rename `ol.interaction.DrawMode` to `ol.interaction.Draw.Mode`
|
* rename `ol.interaction.DrawMode` to `ol.interaction.Draw.Mode`
|
||||||
* rename `ol.interaction.DrawEvent` to `ol.interaction.Draw.Event`
|
* rename `ol.interaction.DrawEvent` to `ol.interaction.Draw.Event`
|
||||||
* rename `ol.interaction.DrawEventType` to `ol.interaction.Draw.EventType`
|
* rename `ol.interaction.DrawEventType` to `ol.interaction.Draw.EventType`
|
||||||
@@ -42,6 +145,7 @@ A number of internal types have been renamed. This will not affect those who us
|
|||||||
* rename `ol.MapProperty` to `ol.Map.Property`
|
* rename `ol.MapProperty` to `ol.Map.Property`
|
||||||
* rename `ol.ModifyEventType` to `ol.interaction.Modify.EventType`
|
* rename `ol.ModifyEventType` to `ol.interaction.Modify.EventType`
|
||||||
* rename `ol.RendererType` to `ol.renderer.Type`
|
* rename `ol.RendererType` to `ol.renderer.Type`
|
||||||
|
* rename `ol.render.EventType` to `ol.render.Event.Type`
|
||||||
* rename `ol.source.ImageEvent` to `ol.source.Image.Event`
|
* rename `ol.source.ImageEvent` to `ol.source.Image.Event`
|
||||||
* rename `ol.source.ImageEventType` to `ol.source.Image.EventType`
|
* rename `ol.source.ImageEventType` to `ol.source.Image.EventType`
|
||||||
* rename `ol.source.RasterEvent` to `ol.source.Raster.Event`
|
* rename `ol.source.RasterEvent` to `ol.source.Raster.Event`
|
||||||
@@ -63,7 +167,7 @@ The DOM renderer has been removed. Instead, the Canvas renderer should be used.
|
|||||||
|
|
||||||
#### Changes in the way assertions are handled
|
#### Changes in the way assertions are handled
|
||||||
|
|
||||||
Previously, minified builds of the library did not have any assertions. This caused applications to fail silently or with cryptic stack traces. Starting with this release, developers get notified of many runtime errors through the new `ol.AssertionError`. This error has a `code` property. The meaning of the code can be found on http://openlayers.org/en/latest/doc/errors/. There are additional console assertion checks in debug mode when the `goog.DEBUG` compiler flag is `true`. As this is `true` by default, it is recommended that those creating custom builds set this to `false` so these assertions are stripped.'
|
Previously, minified builds of the library did not have any assertions. This caused applications to fail silently or with cryptic stack traces. Starting with this release, developers get notified of many runtime errors through the new `ol.AssertionError`. This error has a `code` property. The meaning of the code can be found on https://openlayers.org/en/latest/doc/errors/. There are additional console assertion checks in debug mode when the `goog.DEBUG` compiler flag is `true`. As this is `true` by default, it is recommended that those creating custom builds set this to `false` so these assertions are stripped.'
|
||||||
|
|
||||||
#### Removal of `ol.ENABLE_NAMED_COLORS`
|
#### Removal of `ol.ENABLE_NAMED_COLORS`
|
||||||
|
|
||||||
@@ -172,7 +276,7 @@ var v3source = new ol.source.TileUTFGrid({
|
|||||||
|
|
||||||
#### Internet Explorer 9 support
|
#### Internet Explorer 9 support
|
||||||
|
|
||||||
As of this release, OpenLayers requires a `classList` polyfill for IE 9 support. See http://cdn.polyfill.io/v2/docs/features#Element_prototype_classList.
|
As of this release, OpenLayers requires a `classList` polyfill for IE 9 support. See https://cdn.polyfill.io/v2/docs/features#Element_prototype_classList.
|
||||||
|
|
||||||
#### Immediate rendering API
|
#### Immediate rendering API
|
||||||
|
|
||||||
@@ -221,7 +325,7 @@ The default cache size is `2048`.
|
|||||||
|
|
||||||
#### Internet Explorer 9 support
|
#### Internet Explorer 9 support
|
||||||
|
|
||||||
As of this release, OpenLayers requires a `requestAnimationFrame`/`cancelAnimationFrame` polyfill for IE 9 support. See http://cdn.polyfill.io/v2/docs/features/#requestAnimationFrame.
|
As of this release, OpenLayers requires a `requestAnimationFrame`/`cancelAnimationFrame` polyfill for IE 9 support. See https://cdn.polyfill.io/v2/docs/features/#requestAnimationFrame.
|
||||||
|
|
||||||
#### Layer pre-/postcompose event changes
|
#### Layer pre-/postcompose event changes
|
||||||
|
|
||||||
@@ -539,7 +643,7 @@ now specify an `extent` instead of `widths`. These settings are used to restrict
|
|||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
See http://openlayers.org/en/master/examples/vector-layer.html for a real example.
|
See https://openlayers.org/en/master/examples/vector-layer.html for a real example.
|
||||||
|
|
||||||
Note that you no longer need to set a `projection` on the source!
|
Note that you no longer need to set a `projection` on the source!
|
||||||
|
|
||||||
@@ -561,7 +665,7 @@ now specify an `extent` instead of `widths`. These settings are used to restrict
|
|||||||
|
|
||||||
The above code uses jQuery to send an Ajax request, but you can obviously use any Ajax library.
|
The above code uses jQuery to send an Ajax request, but you can obviously use any Ajax library.
|
||||||
|
|
||||||
See http://openlayers.org/en/master/examples/igc.html for a real example.
|
See https://openlayers.org/en/master/examples/igc.html for a real example.
|
||||||
|
|
||||||
* Note about KML
|
* Note about KML
|
||||||
|
|
||||||
@@ -619,9 +723,9 @@ now specify an `extent` instead of `widths`. These settings are used to restrict
|
|||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
See http://openlayers.org/en/master/examples/vector-osm.html for a real example.
|
See https://openlayers.org/en/master/examples/vector-osm.html for a real example.
|
||||||
|
|
||||||
* The experimental `ol.loadingstrategy.createTile` function has been renamed to `ol.loadingstrategy.tile`. The signature of the function hasn't changed. See http://openlayers.org/en/master/examples/vector-osm.html for an example.
|
* The experimental `ol.loadingstrategy.createTile` function has been renamed to `ol.loadingstrategy.tile`. The signature of the function hasn't changed. See https://openlayers.org/en/master/examples/vector-osm.html for an example.
|
||||||
|
|
||||||
#### Change to `ol.style.Icon`
|
#### Change to `ol.style.Icon`
|
||||||
|
|
||||||
|
|||||||
@@ -17,7 +17,7 @@ The v3.14.0 release includes features and fixes from 93 pull requests since the
|
|||||||
|
|
||||||
#### Internet Explorer 9 support
|
#### Internet Explorer 9 support
|
||||||
|
|
||||||
As of this release, OpenLayers requires a `requestAnimationFrame`/`cancelAnimationFrame` polyfill for IE 9 support. See http://cdn.polyfill.io/v2/docs/features/#requestAnimationFrame.
|
As of this release, OpenLayers requires a `requestAnimationFrame`/`cancelAnimationFrame` polyfill for IE 9 support. See https://cdn.polyfill.io/v2/docs/features/#requestAnimationFrame.
|
||||||
|
|
||||||
#### Layer pre-/postcompose event changes
|
#### Layer pre-/postcompose event changes
|
||||||
|
|
||||||
|
|||||||
@@ -18,7 +18,7 @@ The v3.15.0 release includes features and fixes from 136 pull requests since the
|
|||||||
|
|
||||||
#### Internet Explorer 9 support
|
#### Internet Explorer 9 support
|
||||||
|
|
||||||
As of this release, OpenLayers requires a `classList` polyfill for IE 9 support. See http://cdn.polyfill.io/v2/docs/features#Element_prototype_classList.
|
As of this release, OpenLayers requires a `classList` polyfill for IE 9 support. See https://cdn.polyfill.io/v2/docs/features#Element_prototype_classList.
|
||||||
|
|
||||||
#### Immediate rendering API
|
#### Immediate rendering API
|
||||||
|
|
||||||
|
|||||||
@@ -14,7 +14,7 @@ The v3.18.0 release includes features and fixes from almost 120 pull requests si
|
|||||||
|
|
||||||
#### Changes in the way assertions are handled
|
#### Changes in the way assertions are handled
|
||||||
|
|
||||||
Previously, minified builds of the library did not have any assertions. This caused applications to fail silently or with cryptic stack traces. Starting with this release, developers get notified of many runtime errors through the new `ol.AssertionError`. This error has a `code` property. The meaning of the code can be found on http://openlayers.org/en/latest/doc/errors/. There are additional console assertion checks in debug mode when the `goog.DEBUG` compiler flag is `true`. As this is `true` by default, it is recommended that those creating custom builds set this to `false` so these assertions are stripped.'
|
Previously, minified builds of the library did not have any assertions. This caused applications to fail silently or with cryptic stack traces. Starting with this release, developers get notified of many runtime errors through the new `ol.AssertionError`. This error has a `code` property. The meaning of the code can be found on https://openlayers.org/en/latest/doc/errors/. There are additional console assertion checks in debug mode when the `goog.DEBUG` compiler flag is `true`. As this is `true` by default, it is recommended that those creating custom builds set this to `false` so these assertions are stripped.'
|
||||||
|
|
||||||
#### Removal of `ol.ENABLE_NAMED_COLORS`
|
#### Removal of `ol.ENABLE_NAMED_COLORS`
|
||||||
|
|
||||||
|
|||||||
203
changelog/v3.19.0.md
Normal file
203
changelog/v3.19.0.md
Normal file
@@ -0,0 +1,203 @@
|
|||||||
|
# v3.19.0
|
||||||
|
|
||||||
|
## Summary
|
||||||
|
|
||||||
|
The v3.19.0 release includes features and fixes from a little more than 120 pull requests with more than 380 commits. Most of the changes are bug fixes, documentation enhancements or target the continuing removal of the dependency on Closure Library. Some notable new or enhanced features are:
|
||||||
|
|
||||||
|
* Vector fills with `CanvasGradient` or `CanvasPattern` now move and rotate with the map which is far more intuitive ([#5950](https://github.com/openlayers/ol3/pull/5950))
|
||||||
|
* Drawing in `freehand`-mode also became more intuitive ([#5970](https://github.com/openlayers/ol3/pull/5970), [#5973](https://github.com/openlayers/ol3/pull/5973), [#5975](https://github.com/openlayers/ol3/pull/5975))
|
||||||
|
* When tiles of different resolutions are combined for a layer (which is the case before all tiles of the best resolution have been loaded), lower resolution tiles now align with higher resolution tiles resulting in a map without gaps ([#5890](https://github.com/openlayers/ol3/pull/5890))
|
||||||
|
* Styles can now easily be cloned ([#5832](https://github.com/openlayers/ol3/pull/5832))
|
||||||
|
|
||||||
|
Additionally the [openlayers.org](https://openlayers.org) homepage is now available via the `https`-protocol.
|
||||||
|
|
||||||
|
## Upgrade notes
|
||||||
|
|
||||||
|
#### `ol.style.Fill` with `CanvasGradient` or `CanvasPattern`
|
||||||
|
|
||||||
|
Previously, gradients and patterns were aligned with the canvas, so they did not
|
||||||
|
move and rotate with the map. This was changed to a more expected behavior by anchoring the fill to the map origin (usually at map coordinate `[0, 0]`).
|
||||||
|
|
||||||
|
#### `goog.DEBUG` define was renamed to `ol.DEBUG`
|
||||||
|
|
||||||
|
As last step in the removal of the dependency on Google Closure Library, the `goog.DEBUG` compiler define was renamed to `ol.DEBUG`. Please change accordingly in your custom build configuration json files.
|
||||||
|
|
||||||
|
#### `ol.format.ogc.filter` namespace was renamed to `ol.format.filter`
|
||||||
|
|
||||||
|
`ol.format.ogc.filter` was simplified to `ol.format.filter`; to upgrade your code, simply remove the `ogc` string from the name.
|
||||||
|
For example: `ol.format.ogc.filter.and` to `ol.format.filter.and`.
|
||||||
|
|
||||||
|
#### Changes only relevant to those who compile their applications together with the Closure Compiler
|
||||||
|
|
||||||
|
A number of internal types have been renamed. This will not affect those who use the API provided by the library, but if you are compiling your application together with OpenLayers and using type names, you'll need to do the following:
|
||||||
|
|
||||||
|
* rename `ol.CollectionProperty` to `ol.Collection.Property`
|
||||||
|
* rename `ol.DeviceOrientationProperty` to `ol.DeviceOrientation.Property`
|
||||||
|
* rename `ol.DragBoxEvent` to `ol.interaction.DragBox.Event`
|
||||||
|
* rename `ol.DragBoxEventType` to `ol.interaction.DragBox.EventType`
|
||||||
|
* rename `ol.GeolocationProperty` to `ol.Geolocation.Property`
|
||||||
|
* rename `ol.OverlayPositioning` to `ol.Overlay.Positioning`
|
||||||
|
* rename `ol.OverlayProperty` to `ol.Overlay.Property`
|
||||||
|
* rename `ol.control.MousePositionProperty` to `ol.control.MousePosition.Property`
|
||||||
|
* rename `ol.format.IGCZ` to `ol.format.IGC.Z`
|
||||||
|
* rename `ol.interaction.InteractionProperty` to `ol.interaction.Interaction.Property`
|
||||||
|
* rename `ol.interaction.DrawMode` to `ol.interaction.Draw.Mode`
|
||||||
|
* rename `ol.interaction.DrawEvent` to `ol.interaction.Draw.Event`
|
||||||
|
* rename `ol.interaction.DrawEventType` to `ol.interaction.Draw.EventType`
|
||||||
|
* rename `ol.interaction.ExtentEvent` to `ol.interaction.Extent.Event`
|
||||||
|
* rename `ol.interaction.ExtentEventType` to `ol.interaction.Extent.EventType`
|
||||||
|
* rename `ol.interaction.DragAndDropEvent` to `ol.interaction.DragAndDrop.Event`
|
||||||
|
* rename `ol.interaction.DragAndDropEventType` to `ol.interaction.DragAndDrop.EventType`
|
||||||
|
* rename `ol.interaction.ModifyEvent` to `ol.interaction.Modify.Event`
|
||||||
|
* rename `ol.interaction.SelectEvent` to `ol.interaction.Select.Event`
|
||||||
|
* rename `ol.interaction.SelectEventType` to `ol.interaction.Select.EventType`
|
||||||
|
* rename `ol.interaction.TranslateEvent` to `ol.interaction.Translate.Event`
|
||||||
|
* rename `ol.interaction.TranslateEventType` to `ol.interaction.Translate.EventType`
|
||||||
|
* rename `ol.layer.GroupProperty` to `ol.layer.Group.Property`
|
||||||
|
* rename `ol.layer.HeatmapLayerProperty` to `ol.layer.Heatmap.Property`
|
||||||
|
* rename `ol.layer.TileProperty` to `ol.layer.Tile.Property`
|
||||||
|
* rename `ol.layer.VectorTileRenderType` to `ol.layer.VectorTile.RenderType`
|
||||||
|
* rename `ol.MapEventType` to `ol.MapEvent.Type`
|
||||||
|
* rename `ol.MapProperty` to `ol.Map.Property`
|
||||||
|
* rename `ol.ModifyEventType` to `ol.interaction.Modify.EventType`
|
||||||
|
* rename `ol.RendererType` to `ol.renderer.Type`
|
||||||
|
* rename `ol.render.EventType` to `ol.render.Event.Type`
|
||||||
|
* rename `ol.source.ImageEvent` to `ol.source.Image.Event`
|
||||||
|
* rename `ol.source.ImageEventType` to `ol.source.Image.EventType`
|
||||||
|
* rename `ol.source.RasterEvent` to `ol.source.Raster.Event`
|
||||||
|
* rename `ol.source.RasterEventType` to `ol.source.Raster.EventType`
|
||||||
|
* rename `ol.source.TileEvent` to `ol.source.Tile.Event`
|
||||||
|
* rename `ol.source.TileEventType` to `ol.source.Tile.EventType`
|
||||||
|
* rename `ol.source.VectorEvent` to `ol.source.Vector.Event`
|
||||||
|
* rename `ol.source.VectorEventType` to `ol.source.Vector.EventType`
|
||||||
|
* rename `ol.source.wms.ServerType` to `ol.source.WMSServerType`
|
||||||
|
* rename `ol.source.WMTSRequestEncoding` to `ol.source.WMTS.RequestEncoding`
|
||||||
|
* rename `ol.style.IconAnchorUnits` to `ol.style.Icon.AnchorUnits`
|
||||||
|
* rename `ol.style.IconOrigin` to `ol.style.Icon.Origin`
|
||||||
|
|
||||||
|
## Full list of changes
|
||||||
|
|
||||||
|
* [#6007](https://github.com/openlayers/ol3/pull/6007) - Add note to example that canvas.toBlob() is required ([@marcjansen](https://github.com/marcjansen))
|
||||||
|
* [#5979](https://github.com/openlayers/ol3/pull/5979) - Use FileSaver.js in export-map example ([@fredj](https://github.com/fredj))
|
||||||
|
* [#6004](https://github.com/openlayers/ol3/pull/6004) - Bring back the vector-osm example, using a different service ([@ahocevar](https://github.com/ahocevar))
|
||||||
|
* [#6002](https://github.com/openlayers/ol3/pull/6002) - Use tile pixel ratio for gutter calculation ([@ahocevar](https://github.com/ahocevar))
|
||||||
|
* [#5991](https://github.com/openlayers/ol3/pull/5991) - Only test ol.format.MVT if ArrayBuffer.isView is supported ([@openlayers](https://github.com/openlayers))
|
||||||
|
* [#6000](https://github.com/openlayers/ol3/pull/6000) - Fix mockup of tile layer to keep drawImage arguments in range ([@ahocevar](https://github.com/ahocevar))
|
||||||
|
* [#5997](https://github.com/openlayers/ol3/pull/5997) - Always load a gated URL polyfill when testing ([@marcjansen](https://github.com/marcjansen))
|
||||||
|
* [#5963](https://github.com/openlayers/ol3/pull/5963) - Remove the vertex on ol.interaction.Modify deactivation ([@fredj](https://github.com/fredj))
|
||||||
|
* [#5994](https://github.com/openlayers/ol3/pull/5994) - Setup a loaded image with src for TileLayer test ([@marcjansen](https://github.com/marcjansen))
|
||||||
|
* [#5989](https://github.com/openlayers/ol3/pull/5989) - Remove vector-osm example ([@openlayers](https://github.com/openlayers))
|
||||||
|
* [#5985](https://github.com/openlayers/ol3/pull/5985) - Update Mapzen urls to new scheme ([@ahocevar](https://github.com/ahocevar))
|
||||||
|
* [#5984](https://github.com/openlayers/ol3/pull/5984) - Less examples with mixed content ([@ahocevar](https://github.com/ahocevar))
|
||||||
|
* [#5986](https://github.com/openlayers/ol3/pull/5986) - Update eslint to version 3.8.1 🚀 ([@openlayers](https://github.com/openlayers))
|
||||||
|
* [#5982](https://github.com/openlayers/ol3/pull/5982) - Use a https enabled GeoServer ([@ahocevar](https://github.com/ahocevar))
|
||||||
|
* [#5977](https://github.com/openlayers/ol3/pull/5977) - Convenience function for drawing boxes ([@tschaub](https://github.com/tschaub))
|
||||||
|
* [#5978](https://github.com/openlayers/ol3/pull/5978) - Update async to version 2.1.2 🚀 ([@openlayers](https://github.com/openlayers))
|
||||||
|
* [#5975](https://github.com/openlayers/ol3/pull/5975) - Finish drawing on pointerup when in freehand mode ([@tschaub](https://github.com/tschaub))
|
||||||
|
* [#5976](https://github.com/openlayers/ol3/pull/5976) - Use https where available ([@tschaub](https://github.com/tschaub))
|
||||||
|
* [#5973](https://github.com/openlayers/ol3/pull/5973) - Add a freehand option to the draw interaction ([@tschaub](https://github.com/tschaub))
|
||||||
|
* [#5964](https://github.com/openlayers/ol3/pull/5964) - Set one-off transform instead of transforming back and forth ([@ahocevar](https://github.com/ahocevar))
|
||||||
|
* [#5970](https://github.com/openlayers/ol3/pull/5970) - Allow circles, squares, and boxes to be drawn in freehand mode ([@tschaub](https://github.com/tschaub))
|
||||||
|
* [#5972](https://github.com/openlayers/ol3/pull/5972) - Update eslint to version 3.8.0 🚀 ([@openlayers](https://github.com/openlayers))
|
||||||
|
* [#5969](https://github.com/openlayers/ol3/pull/5969) - Test all, not just one ([@ahocevar](https://github.com/ahocevar))
|
||||||
|
* [#5967](https://github.com/openlayers/ol3/pull/5967) - Add missing jsdoc to ol.render.canvas.Replay#fill_ function ([@fredj](https://github.com/fredj))
|
||||||
|
* [#5962](https://github.com/openlayers/ol3/pull/5962) - Use same proj4js version in examples and tests ([@ahocevar](https://github.com/ahocevar))
|
||||||
|
* [#5961](https://github.com/openlayers/ol3/pull/5961) - Remove unused error codes ([@ahocevar](https://github.com/ahocevar))
|
||||||
|
* [#5960](https://github.com/openlayers/ol3/pull/5960) - More renaming to have one provide per file ([@fredj](https://github.com/fredj))
|
||||||
|
* [#5959](https://github.com/openlayers/ol3/pull/5959) - Remove unnecessary and misleading assertion ([@ahocevar](https://github.com/ahocevar))
|
||||||
|
* [#5950](https://github.com/openlayers/ol3/pull/5950) - Move gradient and pattern fills with the view ([@ahocevar](https://github.com/ahocevar))
|
||||||
|
* [#5957](https://github.com/openlayers/ol3/pull/5957) - Update async to version 2.1.1 🚀 ([@openlayers](https://github.com/openlayers))
|
||||||
|
* [#5956](https://github.com/openlayers/ol3/pull/5956) - Update async to version 2.1.0 🚀 ([@openlayers](https://github.com/openlayers))
|
||||||
|
* [#5955](https://github.com/openlayers/ol3/pull/5955) - Add getters to BingMaps source for api key and imagerySet ([@bartvde](https://github.com/bartvde))
|
||||||
|
* [#5944](https://github.com/openlayers/ol3/pull/5944) - Allow readFeature and readFeatures to be called with GeoJSON geometries ([@tschaub](https://github.com/tschaub))
|
||||||
|
* [#5949](https://github.com/openlayers/ol3/pull/5949) - Add prose documentation for ol.AttributionLike ([@marcjansen](https://github.com/marcjansen))
|
||||||
|
* [#5948](https://github.com/openlayers/ol3/pull/5948) - Fix API docs of ol.Feature#getStyle ([@marcjansen](https://github.com/marcjansen))
|
||||||
|
* [#5946](https://github.com/openlayers/ol3/pull/5946) - Update mocha to version 3.1.2 🚀 ([@openlayers](https://github.com/openlayers))
|
||||||
|
* [#5941](https://github.com/openlayers/ol3/pull/5941) - Update mocha to version 3.1.1 🚀 ([@openlayers](https://github.com/openlayers))
|
||||||
|
* [#5890](https://github.com/openlayers/ol3/pull/5890) - No gaps between tiles of different resolutions ([@ahocevar](https://github.com/ahocevar))
|
||||||
|
* [#5935](https://github.com/openlayers/ol3/pull/5935) - Keep transformed coordinates within valid y range ([@tschaub](https://github.com/tschaub))
|
||||||
|
* [#5937](https://github.com/openlayers/ol3/pull/5937) - One provide per file for vector tiles ([@ahocevar](https://github.com/ahocevar))
|
||||||
|
* [#5933](https://github.com/openlayers/ol3/pull/5933) - Update phantomjs-prebuilt to version 2.1.13 🚀 ([@openlayers](https://github.com/openlayers))
|
||||||
|
* [#5932](https://github.com/openlayers/ol3/pull/5932) - Update eslint to version 3.7.1 🚀 ([@openlayers](https://github.com/openlayers))
|
||||||
|
* [#5931](https://github.com/openlayers/ol3/pull/5931) - Update jsdoc to version 3.4.2 🚀 ([@openlayers](https://github.com/openlayers))
|
||||||
|
* [#5923](https://github.com/openlayers/ol3/pull/5923) - Update pbf to version 3.0.2 🚀 ([@openlayers](https://github.com/openlayers))
|
||||||
|
* [#5926](https://github.com/openlayers/ol3/pull/5926) - Ensure correct type of event.element ([@adube](https://github.com/adube))
|
||||||
|
* [#5928](https://github.com/openlayers/ol3/pull/5928) - Update eslint to version 3.7.0 🚀 ([@openlayers](https://github.com/openlayers))
|
||||||
|
* [#5919](https://github.com/openlayers/ol3/pull/5919) - Update resemblejs to version 2.2.2 🚀 ([@openlayers](https://github.com/openlayers))
|
||||||
|
* [#5909](https://github.com/openlayers/ol3/pull/5909) - Update jquery to version 3.1.1 🚀 ([@openlayers](https://github.com/openlayers))
|
||||||
|
* [#5917](https://github.com/openlayers/ol3/pull/5917) - Accept feature projection in GeoJSON constructor ([@tschaub](https://github.com/tschaub))
|
||||||
|
* [#5918](https://github.com/openlayers/ol3/pull/5918) - Update mocha to version 3.1.0 🚀 ([@openlayers](https://github.com/openlayers))
|
||||||
|
* [#5916](https://github.com/openlayers/ol3/pull/5916) - Update eslint to version 3.6.1 🚀 ([@openlayers](https://github.com/openlayers))
|
||||||
|
* [#5914](https://github.com/openlayers/ol3/pull/5914) - Allow clipping by MultiPolygon ([@tschaub](https://github.com/tschaub))
|
||||||
|
* [#5894](https://github.com/openlayers/ol3/pull/5894) - Reuse arrays for rendered tiles and extent ([@ahocevar](https://github.com/ahocevar))
|
||||||
|
* [#5895](https://github.com/openlayers/ol3/pull/5895) - Always use the frameState's extent ([@ahocevar](https://github.com/ahocevar))
|
||||||
|
* [#5911](https://github.com/openlayers/ol3/pull/5911) - Update eslint to version 3.6.0 🚀 ([@openlayers](https://github.com/openlayers))
|
||||||
|
* [#5903](https://github.com/openlayers/ol3/pull/5903) - Rename ol.format.ogc.filter namespace to ol.format.filter ([@fredj](https://github.com/fredj))
|
||||||
|
* [#5913](https://github.com/openlayers/ol3/pull/5913) - Update clean-css to version 3.4.20 🚀 ([@openlayers](https://github.com/openlayers))
|
||||||
|
* [#5776](https://github.com/openlayers/ol3/pull/5776) - Add ol.style.Circle#setRadius ([@jonataswalker](https://github.com/jonataswalker))
|
||||||
|
* [#5905](https://github.com/openlayers/ol3/pull/5905) - Update pbf to version 3.0.1 🚀 ([@openlayers](https://github.com/openlayers))
|
||||||
|
* [#5904](https://github.com/openlayers/ol3/pull/5904) - Fix changelog/upgrade-notes.md formating ([@fredj](https://github.com/fredj))
|
||||||
|
* [#5906](https://github.com/openlayers/ol3/pull/5906) - Update glob to version 7.1.0 🚀 ([@openlayers](https://github.com/openlayers))
|
||||||
|
* [#5898](https://github.com/openlayers/ol3/pull/5898) - Update sinon to version 1.17.6 🚀 ([@openlayers](https://github.com/openlayers))
|
||||||
|
* [#5888](https://github.com/openlayers/ol3/pull/5888) - Remove unused functions ([@fredj](https://github.com/fredj))
|
||||||
|
* [#5900](https://github.com/openlayers/ol3/pull/5900) - Update coveralls to version 2.11.14 🚀 ([@openlayers](https://github.com/openlayers))
|
||||||
|
* [#5897](https://github.com/openlayers/ol3/pull/5897) - Show NEXRAD data in WMS Time example ([@ahocevar](https://github.com/ahocevar))
|
||||||
|
* [#5896](https://github.com/openlayers/ol3/pull/5896) - Remove plain string from Map renderer option ([@probins](https://github.com/probins))
|
||||||
|
* [#5893](https://github.com/openlayers/ol3/pull/5893) - Fix fillStyle or strokeStyle defined assertion ([@ahocevar](https://github.com/ahocevar))
|
||||||
|
* [#5892](https://github.com/openlayers/ol3/pull/5892) - Remove getRendererFromQueryString from examples ([@probins](https://github.com/probins))
|
||||||
|
* [#5889](https://github.com/openlayers/ol3/pull/5889) - Update coveralls to version 2.11.13 🚀 ([@openlayers](https://github.com/openlayers))
|
||||||
|
* [#5886](https://github.com/openlayers/ol3/pull/5886) - Remove unused functions ([@fredj](https://github.com/fredj))
|
||||||
|
* [#5885](https://github.com/openlayers/ol3/pull/5885) - Remove unused pruneTileRange function ([@bartvde](https://github.com/bartvde))
|
||||||
|
* [#5853](https://github.com/openlayers/ol3/pull/5853) - Allow more than one digit range in ol.TileUrlFunction.expandUrl ([@fredj](https://github.com/fredj))
|
||||||
|
* [#5445](https://github.com/openlayers/ol3/pull/5445) - Select interaction default styling function can now handle geometry less features ([@fblackburn](https://github.com/fblackburn))
|
||||||
|
* [#5884](https://github.com/openlayers/ol3/pull/5884) - Fix jsdoc tag indentation ([@fredj](https://github.com/fredj))
|
||||||
|
* [#5863](https://github.com/openlayers/ol3/pull/5863) - Allow CanvasPattern or CanvasGradient as stroke style ([@fredj](https://github.com/fredj))
|
||||||
|
* [#5838](https://github.com/openlayers/ol3/pull/5838) - Require ol where ol.DEBUG is being used ([@marcjansen](https://github.com/marcjansen))
|
||||||
|
* [#5878](https://github.com/openlayers/ol3/pull/5878) - Smarter handling of closed rings and closePath() instructions ([@ahocevar](https://github.com/ahocevar))
|
||||||
|
* [#5880](https://github.com/openlayers/ol3/pull/5880) - More work towards one provide per file ([@marcjansen](https://github.com/marcjansen))
|
||||||
|
* [#5857](https://github.com/openlayers/ol3/pull/5857) - Fixed issue with multi option of ol.interaction.Select ([@KlausBenndorf](https://github.com/KlausBenndorf))
|
||||||
|
* [#5876](https://github.com/openlayers/ol3/pull/5876) - Use clone method in kml format ([@KlausBenndorf](https://github.com/KlausBenndorf))
|
||||||
|
* [#5832](https://github.com/openlayers/ol3/pull/5832) - Add clone methods to styles ([@KlausBenndorf](https://github.com/KlausBenndorf))
|
||||||
|
* [#5869](https://github.com/openlayers/ol3/pull/5869) - Update jsdoc to version 3.4.1 🚀 ([@openlayers](https://github.com/openlayers))
|
||||||
|
* [#5872](https://github.com/openlayers/ol3/pull/5872) - Keep ol.Color as Array<number> ([@tschaub](https://github.com/tschaub))
|
||||||
|
* [#5870](https://github.com/openlayers/ol3/pull/5870) - Update eslint to version 3.5.0 🚀 ([@openlayers](https://github.com/openlayers))
|
||||||
|
* [#5867](https://github.com/openlayers/ol3/pull/5867) - Add dedicated example using CanvasPattern and CanvasGradient for styling vectors ([@marcjansen](https://github.com/marcjansen))
|
||||||
|
* [#5864](https://github.com/openlayers/ol3/pull/5864) - More renaming ([@fredj](https://github.com/fredj))
|
||||||
|
* [#5861](https://github.com/openlayers/ol3/pull/5861) - More renaming to have one provide per file ([@fredj](https://github.com/fredj))
|
||||||
|
* [#5860](https://github.com/openlayers/ol3/pull/5860) - Rename ol.MapProperty and ol.interaction.DragAndDropEvent* ([@fredj](https://github.com/fredj))
|
||||||
|
* [#5855](https://github.com/openlayers/ol3/pull/5855) - Rename ol.DragBoxEvent* to ol.interaction.DragBox.Event* ([@fredj](https://github.com/fredj))
|
||||||
|
* [#5859](https://github.com/openlayers/ol3/pull/5859) - Rename ol.RendererType to ol.renderer.Type ([@fredj](https://github.com/fredj))
|
||||||
|
* [#5846](https://github.com/openlayers/ol3/pull/5846) - Remove unused goog.require('ol') ([@probins](https://github.com/probins))
|
||||||
|
* [#5854](https://github.com/openlayers/ol3/pull/5854) - Use a canvas pattern in the vector-layer example ([@fredj](https://github.com/fredj))
|
||||||
|
* [#5852](https://github.com/openlayers/ol3/pull/5852) - ol.interaction.extent cleanup ([@fredj](https://github.com/fredj))
|
||||||
|
* [#5851](https://github.com/openlayers/ol3/pull/5851) - Remove unused imageByContext_ in ol.ImageTile ([@fredj](https://github.com/fredj))
|
||||||
|
* [#5849](https://github.com/openlayers/ol3/pull/5849) - Remove 'global' from externs/closure-compiler.js ([@fredj](https://github.com/fredj))
|
||||||
|
* [#5837](https://github.com/openlayers/ol3/pull/5837) - Remove ol.global ([@tschaub](https://github.com/tschaub))
|
||||||
|
* [#5842](https://github.com/openlayers/ol3/pull/5842) - Remove extra provide causing a circular dependency ([@ahocevar](https://github.com/ahocevar))
|
||||||
|
* [#5795](https://github.com/openlayers/ol3/pull/5795) - Render older loaded tiles while waiting for new tiles ([@thomasmoelhave](https://github.com/thomasmoelhave))
|
||||||
|
* [#5840](https://github.com/openlayers/ol3/pull/5840) - Rename source.wms.ServerType ➛ source.WMSServerType ([@marcjansen](https://github.com/marcjansen))
|
||||||
|
* [#5839](https://github.com/openlayers/ol3/pull/5839) - Rename source.VectorEvent(*) to source.Vector.Event(*) ([@marcjansen](https://github.com/marcjansen))
|
||||||
|
* [#5835](https://github.com/openlayers/ol3/pull/5835) - document and test ol.getUid sequence behavior ([@thomasmoelhave](https://github.com/thomasmoelhave))
|
||||||
|
* [#5834](https://github.com/openlayers/ol3/pull/5834) - Rename goog.DEBUG to ol.DEBUG ([@thomasmoelhave](https://github.com/thomasmoelhave))
|
||||||
|
* [#5815](https://github.com/openlayers/ol3/pull/5815) - Remove the DOM renderer ([@tschaub](https://github.com/tschaub))
|
||||||
|
* [#5828](https://github.com/openlayers/ol3/pull/5828) - Always close polygon rings ([@ahocevar](https://github.com/ahocevar))
|
||||||
|
* [#5794](https://github.com/openlayers/ol3/pull/5794) - Fix more missing requires ([@openlayers](https://github.com/openlayers))
|
||||||
|
* [#5820](https://github.com/openlayers/ol3/pull/5820) - Change ol.format.Format to ol.format.Feature in format/readme.md ([@fredj](https://github.com/fredj))
|
||||||
|
* [#5819](https://github.com/openlayers/ol3/pull/5819) - Add ArrayBuffer.isView method in externs/closure-compiler.js ([@fredj](https://github.com/fredj))
|
||||||
|
* [#5793](https://github.com/openlayers/ol3/pull/5793) - Closure bye bye ([@ahocevar](https://github.com/ahocevar))
|
||||||
|
* [#5809](https://github.com/openlayers/ol3/pull/5809) - Reuse ol.LayerState object ([@fredj](https://github.com/fredj))
|
||||||
|
* [#5811](https://github.com/openlayers/ol3/pull/5811) - Use ol.global.getComputedStyle instead of window.getComputedStyle ([@fredj](https://github.com/fredj))
|
||||||
|
* [#5810](https://github.com/openlayers/ol3/pull/5810) - ESLint rule typo ([@gberaudo](https://github.com/gberaudo))
|
||||||
|
* [#5807](https://github.com/openlayers/ol3/pull/5807) - Update pbf to version 3.0.0 🚀 ([@openlayers](https://github.com/openlayers))
|
||||||
|
* [#5806](https://github.com/openlayers/ol3/pull/5806) - Fix olx.style.TextOptions.rotateWithView option in externs ([@fredj](https://github.com/fredj))
|
||||||
|
* [#5770](https://github.com/openlayers/ol3/pull/5770) - Update ol.source.Vector comments ([@fredj](https://github.com/fredj))
|
||||||
|
* [#5803](https://github.com/openlayers/ol3/pull/5803) - V3.18.1 ([@openlayers](https://github.com/openlayers))
|
||||||
|
* [#5801](https://github.com/openlayers/ol3/pull/5801) - Remove ol.style.ImageState and use ol.ImageState instead ([@fredj](https://github.com/fredj))
|
||||||
|
* [#5790](https://github.com/openlayers/ol3/pull/5790) - Fix vector tile rotation on HiDPI devices ([@ahocevar](https://github.com/ahocevar))
|
||||||
|
* [#5798](https://github.com/openlayers/ol3/pull/5798) - Move to 90° along the circle, not 0° ([@ahocevar](https://github.com/ahocevar))
|
||||||
|
* [#5800](https://github.com/openlayers/ol3/pull/5800) - Wrap values in <Literal> for InBetween filter ([@tsauerwein](https://github.com/tsauerwein))
|
||||||
|
* [#5769](https://github.com/openlayers/ol3/pull/5769) - Only call addToDrawing if sketchFeature ([@bartvde](https://github.com/bartvde))
|
||||||
|
* [#5745](https://github.com/openlayers/ol3/pull/5745) - removed dependencies on goog.object.clone and fixed placemark rendering ([@tamarmot](https://github.com/tamarmot))
|
||||||
|
* [#5290](https://github.com/openlayers/ol3/pull/5290) - Add extent interaction ([@tbarsballe](https://github.com/tbarsballe))
|
||||||
|
* [#5786](https://github.com/openlayers/ol3/pull/5786) - Update eslint to version 3.4.0 🚀 ([@openlayers](https://github.com/openlayers))
|
||||||
|
* [#5785](https://github.com/openlayers/ol3/pull/5785) - Release v3.18.0 ([@openlayers](https://github.com/openlayers))
|
||||||
22
changelog/v3.19.1.md
Normal file
22
changelog/v3.19.1.md
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
# v3.19.1
|
||||||
|
|
||||||
|
## Summary
|
||||||
|
|
||||||
|
The v3.19.1 release is a patch release that addresses four regressions in the
|
||||||
|
v3.19.0 release. See the
|
||||||
|
[v3.19.0 release notes](https://github.com/openlayers/ol3/releases/tag/v3.19.0)
|
||||||
|
for details on upgrading from v3.18.x.
|
||||||
|
|
||||||
|
## Upgrade notes
|
||||||
|
|
||||||
|
#### `ol.style.Fill` with `CanvasGradient` or `CanvasPattern`
|
||||||
|
|
||||||
|
The origin for gradients and patterns has changed from `[0, 0]` to the top-left
|
||||||
|
corner of the extent of the geometry being filled.
|
||||||
|
|
||||||
|
## Fixes
|
||||||
|
|
||||||
|
* [#6039](https://github.com/openlayers/ol3/pull/6039) - Do not fill when there is no fillStyle ([@ahocevar](https://github.com/ahocevar))
|
||||||
|
* [#6034](https://github.com/openlayers/ol3/pull/6034) - Use geometry extent's top left corner as pattern/gradient origin ([@ahocevar](https://github.com/ahocevar))
|
||||||
|
* [#6027](https://github.com/openlayers/ol3/pull/6027) - Close polygon sketch at all times ([@bjornharrtell](https://github.com/bjornharrtell))
|
||||||
|
* [#6022](https://github.com/openlayers/ol3/pull/6022) - Revert "Merge pull request #5890 from ahocevar/no-white-lines" ([@ahocevar](https://github.com/ahocevar))
|
||||||
@@ -2,7 +2,7 @@
|
|||||||
|
|
||||||
## Summary
|
## Summary
|
||||||
|
|
||||||
The 3.1.0 release includes 70 merged pull requests since 3.1.0. Of note, the KML format [now parses `NetworkingLink` tags](https://github.com/openlayers/ol3/pull/3171). The [measure example](http://openlayers.org/en/v3.2.0/examples/measure.html) was [reworked](https://github.com/openlayers/ol3/pull/3206) to display measurements and help messages while drawing. A WMTS GetCapabilities format was [added](https://github.com/openlayers/ol3/pull/3026). The WebGL renderer [now supports feature hit detection](https://github.com/openlayers/ol3/pull/3065) (on point features). And you can now [detect](https://github.com/openlayers/ol3/pull/3172) features/colored pixels on image and tile layers! See the full list of [changes](#changes) below.
|
The 3.1.0 release includes 70 merged pull requests since 3.1.0. Of note, the KML format [now parses `NetworkingLink` tags](https://github.com/openlayers/ol3/pull/3171). The [measure example](https://openlayers.org/en/v3.2.0/examples/measure.html) was [reworked](https://github.com/openlayers/ol3/pull/3206) to display measurements and help messages while drawing. A WMTS GetCapabilities format was [added](https://github.com/openlayers/ol3/pull/3026). The WebGL renderer [now supports feature hit detection](https://github.com/openlayers/ol3/pull/3065) (on point features). And you can now [detect](https://github.com/openlayers/ol3/pull/3172) features/colored pixels on image and tile layers! See the full list of [changes](#changes) below.
|
||||||
|
|
||||||
## Upgrade notes
|
## Upgrade notes
|
||||||
|
|
||||||
|
|||||||
195
changelog/v3.20.0.md
Normal file
195
changelog/v3.20.0.md
Normal file
@@ -0,0 +1,195 @@
|
|||||||
|
# v3.20.0
|
||||||
|
|
||||||
|
## Summary
|
||||||
|
|
||||||
|
The v3.20.0 release includes enhancements and fixes from 89 pull requests since the previous release.
|
||||||
|
|
||||||
|
Among the changes, take a look at the new `view.animate()` function. This replaces the previous `map.beforeRender()` and `ol.animation` functions with more intuitive view animations that allow for chaining together multiple transitions and support a callback on animation end. In addition, two or more maps that share a view will be animated together. See the upgrade notes and the animation example for more detail.
|
||||||
|
|
||||||
|
On the subject of view transitions, scrolling with a trackpad or magic mouse now transitions the view resolution smoothly. Instead of jumping to the next integer zoom level, trackpad or magic mouse scrolling can leave the view at a fractional zoom level. In line with this trackpad behavior, pinch zooming on touch devices also now leaves the view at a fractional zoom level (see the upgrade notes for an option to restore the old behavior).
|
||||||
|
|
||||||
|
On the rendering front, the Canvas renderer got another overhaul. This release brings back the strategy of rendering to a dedicated Canvas element per layer. If you were experiencing issues with gaps between tiles on rotated views or when zooming, this change should bring rendering improvements.
|
||||||
|
|
||||||
|
Also on the rendering front, @GaborFarkas completed a nearly 5 month effort to bring line and polygon support to the WebGL renderer. If you're interested in experimenting with WebGL for vector rendering, use `renderer: 'webgl'` in your map constructor.
|
||||||
|
|
||||||
|
See the full list of changes below. There are some other gems down there.
|
||||||
|
|
||||||
|
## Upgrade notes
|
||||||
|
|
||||||
|
#### Use `view.animate()` instead of `map.beforeRender()` and `ol.animation` functions
|
||||||
|
|
||||||
|
The `map.beforeRender()` and `ol.animation` functions have been deprecated in favor of a new `view.animate()` function. Use of the deprecated functions will result in a warning during development. These functions are subject to removal in an upcoming release.
|
||||||
|
|
||||||
|
For details on the `view.animate()` method, see the API docs and the view animation example. Upgrading should be relatively straightforward. For example, if you wanted to have an animated pan, zoom, and rotation previously, you might have done this:
|
||||||
|
|
||||||
|
```js
|
||||||
|
var zoom = ol.animation.zoom({
|
||||||
|
resolution: view.getResolution()
|
||||||
|
});
|
||||||
|
var pan = ol.animation.pan({
|
||||||
|
source: view.getCenter()
|
||||||
|
});
|
||||||
|
var rotate = ol.animation.rotate({
|
||||||
|
rotation: view.getRotation()
|
||||||
|
});
|
||||||
|
|
||||||
|
map.beforeRender(zoom, pan, rotate);
|
||||||
|
|
||||||
|
map.setZoom(1);
|
||||||
|
map.setCenter([0, 0]);
|
||||||
|
map.setRotation(Math.PI);
|
||||||
|
```
|
||||||
|
|
||||||
|
Now, the same can be accomplished with this:
|
||||||
|
```js
|
||||||
|
view.animate({
|
||||||
|
zoom: 1,
|
||||||
|
center: [0, 0],
|
||||||
|
rotation: Math.PI
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
#### `ol.Map#forEachFeatureAtPixel` and `ol.Map#hasFeatureAtPixel` parameters have changed
|
||||||
|
|
||||||
|
If you are using the layer filter of one of these methods, please note that you now have to pass in the layer filter via an `ol.AtPixelOptions` object. If you are not using the layer filter the usage has not changed.
|
||||||
|
|
||||||
|
Old syntax:
|
||||||
|
```js
|
||||||
|
map.forEachFeatureAtPixel(pixel, callback, callbackThis, layerFilterFn, layerFilterThis);
|
||||||
|
|
||||||
|
map.hasFeatureAtPixel(pixel, layerFilterFn, layerFilterThis);
|
||||||
|
```
|
||||||
|
|
||||||
|
New syntax:
|
||||||
|
```js
|
||||||
|
map.forEachFeatureAtPixel(pixel, callback.bind(callbackThis), {
|
||||||
|
layerFilter: layerFilterFn.bind(layerFilterThis)
|
||||||
|
});
|
||||||
|
|
||||||
|
map.hasFeatureAtPixel(pixel, {
|
||||||
|
layerFilter: layerFilterFn.bind(layerFilterThis)
|
||||||
|
});
|
||||||
|
```
|
||||||
|
|
||||||
|
This change is due to the introduction of the `hitTolerance` parameter which can be passed in via this `ol.AtPixelOptions` object, too.
|
||||||
|
|
||||||
|
#### Use `ol.proj.getPointResolution()` instead of `projection.getPointResolution()`
|
||||||
|
|
||||||
|
The experimental `getPointResolution` method has been removed from `ol.Projection` instances. Since the implementation of this method required an inverse transform (function for transforming projected coordinates to geographic coordinates) and `ol.Projection` instances are not constructed with forward or inverse transforms, it does not make sense that a projection instance can always calculate the point resolution.
|
||||||
|
|
||||||
|
As a substitute for the `projection.getPointResolution()` function, a `ol.proj.getPointResolution()` function has been added. To upgrade, you will need to change things like this:
|
||||||
|
```js
|
||||||
|
projection.getPointResolution(resolution, point);
|
||||||
|
```
|
||||||
|
|
||||||
|
into this:
|
||||||
|
```js
|
||||||
|
ol.proj.getPointResolution(projection, resolution, point);
|
||||||
|
```
|
||||||
|
|
||||||
|
Note that if you were previously creating a projection with a `getPointResolution` function in the constructor (or calling `projection.setGetPointResolution()` after construction), this function will be used by `ol.proj.getPointResolution()`.
|
||||||
|
|
||||||
|
#### `ol.interaction.PinchZoom` no longer zooms to a whole-number zoom level after the gesture ends
|
||||||
|
|
||||||
|
The old behavior of `ol.interaction.PinchZoom` was to zoom to the next integer zoom level after the user ends the gesture.
|
||||||
|
|
||||||
|
Now the pinch zoom keeps the user selected zoom level even if it is a fractional zoom.
|
||||||
|
|
||||||
|
To get the old behavior set the new `constrainResolution` parameter to `true` like this:
|
||||||
|
```js
|
||||||
|
new ol.interaction.PinchZoom({constrainResolution: true})
|
||||||
|
```
|
||||||
|
|
||||||
|
See the new `pinch-zoom` example for a complete implementation.
|
||||||
|
|
||||||
|
## Detailed changes
|
||||||
|
|
||||||
|
* [#6230](https://github.com/openlayers/ol3/pull/6230) - Ignore duplicated attributions ([@tschaub](https://github.com/tschaub))
|
||||||
|
* [#6192](https://github.com/openlayers/ol3/pull/6192) - Modify interaction: always stop event propagation when removing vertex ([@tchandelle](https://github.com/tchandelle))
|
||||||
|
* [#6228](https://github.com/openlayers/ol3/pull/6228) - Rename the pinch zoom example ([@tschaub](https://github.com/tschaub))
|
||||||
|
* [#6229](https://github.com/openlayers/ol3/pull/6229) - Update phantomjs-prebuilt to version 2.1.14 🚀 ([@openlayers](https://github.com/openlayers))
|
||||||
|
* [#6196](https://github.com/openlayers/ol3/pull/6196) - KML ExtendedData Export ([@raiyni](https://github.com/raiyni))
|
||||||
|
* [#6227](https://github.com/openlayers/ol3/pull/6227) - Update eslint to version 3.12.0 🚀 ([@openlayers](https://github.com/openlayers))
|
||||||
|
* [#6224](https://github.com/openlayers/ol3/pull/6224) - Pinch zoom: allow fractional zoom ([@aAXEe](https://github.com/aAXEe))
|
||||||
|
* [#6226](https://github.com/openlayers/ol3/pull/6226) - Improve the headers styles in the api doc ([@tchandelle](https://github.com/tchandelle))
|
||||||
|
* [#5995](https://github.com/openlayers/ol3/pull/5995) - Add hit tolerance parameter to ol.Map#forEachFeatureAtPixel ([@KlausBenndorf](https://github.com/KlausBenndorf))
|
||||||
|
* [#6220](https://github.com/openlayers/ol3/pull/6220) - Fix ol.Collection#push return value ([@fredj](https://github.com/fredj))
|
||||||
|
* [#6213](https://github.com/openlayers/ol3/pull/6213) - Add preload option to olx.layer.VectorTileOptions ([@drnextgis](https://github.com/drnextgis))
|
||||||
|
* [#6222](https://github.com/openlayers/ol3/pull/6222) - Fix forEachLayerAtPixel and improve class hierarchy ([@ahocevar](https://github.com/ahocevar))
|
||||||
|
* [#6075](https://github.com/openlayers/ol3/pull/6075) - Keep the other dim from the original segment when modifying vertex ([@tchandelle](https://github.com/tchandelle))
|
||||||
|
* [#6218](https://github.com/openlayers/ol3/pull/6218) - Make modify interaction more robust ([@gberaudo](https://github.com/gberaudo))
|
||||||
|
* [#6205](https://github.com/openlayers/ol3/pull/6205) - Rework remaining modules with multiple provides ([@tschaub](https://github.com/tschaub))
|
||||||
|
* [#6207](https://github.com/openlayers/ol3/pull/6207) - Require all when generating exports ([@tschaub](https://github.com/tschaub))
|
||||||
|
* [#6204](https://github.com/openlayers/ol3/pull/6204) - Refactored proj modules ([@tschaub](https://github.com/tschaub))
|
||||||
|
* [#6209](https://github.com/openlayers/ol3/pull/6209) - Test array with to.eql(), not to.be.eql() ([@ahocevar](https://github.com/ahocevar))
|
||||||
|
* [#6091](https://github.com/openlayers/ol3/pull/6091) - Apply pixelRatio to line dash ([@tchandelle](https://github.com/tchandelle))
|
||||||
|
* [#6082](https://github.com/openlayers/ol3/pull/6082) - Unified canvas rendering ([@ahocevar](https://github.com/ahocevar))
|
||||||
|
* [#6173](https://github.com/openlayers/ol3/pull/6173) - Topolis example ([@bjornharrtell](https://github.com/bjornharrtell))
|
||||||
|
* [#6206](https://github.com/openlayers/ol3/pull/6206) - Stop asserting that zero duration animations take time ([@tschaub](https://github.com/tschaub))
|
||||||
|
* [#6203](https://github.com/openlayers/ol3/pull/6203) - Address a few missing requires ([@tschaub](https://github.com/tschaub))
|
||||||
|
* [#6201](https://github.com/openlayers/ol3/pull/6201) - Remove assertion in TileArcGISRest source ([@tschaub](https://github.com/tschaub))
|
||||||
|
* [#6202](https://github.com/openlayers/ol3/pull/6202) - Allow animation duration to be zero ([@tschaub](https://github.com/tschaub))
|
||||||
|
* [#6198](https://github.com/openlayers/ol3/pull/6198) - Fix sourceResolution value in view.animate ([@oterral](https://github.com/oterral))
|
||||||
|
* [#6177](https://github.com/openlayers/ol3/pull/6177) - Add duration and easing options to view.fit() for animations ([@tchandelle](https://github.com/tchandelle))
|
||||||
|
* [#6078](https://github.com/openlayers/ol3/pull/6078) - Use winding number algorithm for linearRingContainsXY ([@bjornharrtell](https://github.com/bjornharrtell))
|
||||||
|
* [#6187](https://github.com/openlayers/ol3/pull/6187) - Update pbf to version 3.0.5 🚀 ([@openlayers](https://github.com/openlayers))
|
||||||
|
* [#6175](https://github.com/openlayers/ol3/pull/6175) - Generate projection transform function only when requested ([@tchandelle](https://github.com/tchandelle))
|
||||||
|
* [#6181](https://github.com/openlayers/ol3/pull/6181) - Replace expired Bing key with a new one ([@ahocevar](https://github.com/ahocevar))
|
||||||
|
* [#6164](https://github.com/openlayers/ol3/pull/6164) - Simplify color parsing and allow more decimals ([@marcjansen](https://github.com/marcjansen))
|
||||||
|
* [#6178](https://github.com/openlayers/ol3/pull/6178) - Add missing goog.require ([@fredj](https://github.com/fredj))
|
||||||
|
* [#6176](https://github.com/openlayers/ol3/pull/6176) - Doc: easing option is optional ([@tchandelle](https://github.com/tchandelle))
|
||||||
|
* [#6180](https://github.com/openlayers/ol3/pull/6180) - Update eslint to version 3.11.1 🚀 ([@openlayers](https://github.com/openlayers))
|
||||||
|
* [#6179](https://github.com/openlayers/ol3/pull/6179) - Remove unused ol.Map.removePreRenderFunction function ([@fredj](https://github.com/fredj))
|
||||||
|
* [#6052](https://github.com/openlayers/ol3/pull/6052) - Remove the use of ol.format.KML.DEFAULT_IMAGE_SCALE_MULTIPLIER_ when … ([@oterral](https://github.com/oterral))
|
||||||
|
* [#6159](https://github.com/openlayers/ol3/pull/6159) - Remove carriage return after goog.require in examples ([@tchandelle](https://github.com/tchandelle))
|
||||||
|
* [#6169](https://github.com/openlayers/ol3/pull/6169) - Image rotation in WebGL was anti-clockwise ([@tchandelle](https://github.com/tchandelle))
|
||||||
|
* [#5590](https://github.com/openlayers/ol3/pull/5590) - Kml format: improved support for region and extendeddata ([@thhomas](https://github.com/thhomas))
|
||||||
|
* [#5462](https://github.com/openlayers/ol3/pull/5462) - WebGL vector support ([@GaborFarkas](https://github.com/GaborFarkas))
|
||||||
|
* [#6168](https://github.com/openlayers/ol3/pull/6168) - Update mocha to version 3.2.0 🚀 ([@openlayers](https://github.com/openlayers))
|
||||||
|
* [#5589](https://github.com/openlayers/ol3/pull/5589) - Wmts tilematrixlimits ([@thhomas](https://github.com/thhomas))
|
||||||
|
* [#6155](https://github.com/openlayers/ol3/pull/6155) - Set GeometryLayout correctly when reading GPX ([@romanzoller](https://github.com/romanzoller))
|
||||||
|
* [#6161](https://github.com/openlayers/ol3/pull/6161) - Update async to version 2.1.4 🚀 ([@openlayers](https://github.com/openlayers))
|
||||||
|
* [#6153](https://github.com/openlayers/ol3/pull/6153) - Remove legacy licenses folder ([@romanzoller](https://github.com/romanzoller))
|
||||||
|
* [#6154](https://github.com/openlayers/ol3/pull/6154) - Update mocha-phantomjs-core to version 2.1.0 🚀 ([@openlayers](https://github.com/openlayers))
|
||||||
|
* [#6146](https://github.com/openlayers/ol3/pull/6146) - Merge ol.style.Circle and RegularShape together ([@tchandelle](https://github.com/tchandelle))
|
||||||
|
* [#6139](https://github.com/openlayers/ol3/pull/6139) - Match equivalent projections from WMTS caps ([@bartvde](https://github.com/bartvde))
|
||||||
|
* [#6138](https://github.com/openlayers/ol3/pull/6138) - Update clean-css to version 3.4.21 🚀 ([@openlayers](https://github.com/openlayers))
|
||||||
|
* [#6132](https://github.com/openlayers/ol3/pull/6132) - Add getter for color property to ol.style.Icon ([@tohu12](https://github.com/tohu12))
|
||||||
|
* [#6127](https://github.com/openlayers/ol3/pull/6127) - Format WKT Z, M and ZM ([@omarkljung](https://github.com/omarkljung))
|
||||||
|
* [#6136](https://github.com/openlayers/ol3/pull/6136) - Update eslint to version 3.10.2 🚀 ([@openlayers](https://github.com/openlayers))
|
||||||
|
* [#6133](https://github.com/openlayers/ol3/pull/6133) - Doc clarification ol.MapBrowserEvent#pixel, ol.MapBrowserEvent#coordinate, ol.Map#getEventCoordinate ([@KlausBenndorf](https://github.com/KlausBenndorf))
|
||||||
|
* [#6134](https://github.com/openlayers/ol3/pull/6134) - Add setter methods for fill, image, stroke and text styles ([@dnlkoch](https://github.com/dnlkoch))
|
||||||
|
* [#6129](https://github.com/openlayers/ol3/pull/6129) - Update pbf to version 3.0.4 🚀 ([@openlayers](https://github.com/openlayers))
|
||||||
|
* [#6121](https://github.com/openlayers/ol3/pull/6121) - Hint change means view change ([@tschaub](https://github.com/tschaub))
|
||||||
|
* [#6120](https://github.com/openlayers/ol3/pull/6120) - Set interacting hint during trackpad scroll ([@tschaub](https://github.com/tschaub))
|
||||||
|
* [#6128](https://github.com/openlayers/ol3/pull/6128) - Update pbf to version 3.0.3 🚀 ([@openlayers](https://github.com/openlayers))
|
||||||
|
* [#6124](https://github.com/openlayers/ol3/pull/6124) - Allow up to 16 decimals for alpha channel when parsing rgba strings to colors ([@marcjansen](https://github.com/marcjansen))
|
||||||
|
* [#6117](https://github.com/openlayers/ol3/pull/6117) - Update handlebars to version 4.0.6 🚀 ([@openlayers](https://github.com/openlayers))
|
||||||
|
* [#6113](https://github.com/openlayers/ol3/pull/6113) - Smooth trackpad zooming ([@tschaub](https://github.com/tschaub))
|
||||||
|
* [#6105](https://github.com/openlayers/ol3/pull/6105) - Move vector tile loader functions into vector tile module ([@tschaub](https://github.com/tschaub))
|
||||||
|
* [#6114](https://github.com/openlayers/ol3/pull/6114) - Updated linter config and curly conditional blocks ([@tschaub](https://github.com/tschaub))
|
||||||
|
* [#6106](https://github.com/openlayers/ol3/pull/6106) - Add type annotations for vector tiles ([@tschaub](https://github.com/tschaub))
|
||||||
|
* [#6107](https://github.com/openlayers/ol3/pull/6107) - Reset hint first and notify of change when cancelling animations ([@tschaub](https://github.com/tschaub))
|
||||||
|
* [#6112](https://github.com/openlayers/ol3/pull/6112) - Update eslint to version 3.10.0 🚀 ([@openlayers](https://github.com/openlayers))
|
||||||
|
* [#6110](https://github.com/openlayers/ol3/pull/6110) - Update coveralls to version 2.11.15 🚀 ([@openlayers](https://github.com/openlayers))
|
||||||
|
* [#6077](https://github.com/openlayers/ol3/pull/6077) - Optionally enable hidpi support for Bing ([@bartvde](https://github.com/bartvde))
|
||||||
|
* [#6103](https://github.com/openlayers/ol3/pull/6103) - Properly complete multiple parallel animations ([@tschaub](https://github.com/tschaub))
|
||||||
|
* [#6101](https://github.com/openlayers/ol3/pull/6101) - Avoid starting new zoom animation while already animating ([@tschaub](https://github.com/tschaub))
|
||||||
|
* [#6099](https://github.com/openlayers/ol3/pull/6099) - Modify interaction tests : check for change events ([@tchandelle](https://github.com/tchandelle))
|
||||||
|
* [#6069](https://github.com/openlayers/ol3/pull/6069) - If there is no features option, all features will be translated. ([@tchandelle](https://github.com/tchandelle))
|
||||||
|
* [#6097](https://github.com/openlayers/ol3/pull/6097) - API index page : Fix link anchor to static members ([@tchandelle](https://github.com/tchandelle))
|
||||||
|
* [#6095](https://github.com/openlayers/ol3/pull/6095) - LineString Arrows example: rotate with the view ([@tchandelle](https://github.com/tchandelle))
|
||||||
|
* [#6093](https://github.com/openlayers/ol3/pull/6093) - Update mustache to version 2.3.0 🚀 ([@openlayers](https://github.com/openlayers))
|
||||||
|
* [#6079](https://github.com/openlayers/ol3/pull/6079) - Add view animation ([@tschaub](https://github.com/tschaub))
|
||||||
|
* [#6081](https://github.com/openlayers/ol3/pull/6081) - Update metalsmith-layouts to version 1.7.0 🚀 ([@openlayers](https://github.com/openlayers))
|
||||||
|
* [#6074](https://github.com/openlayers/ol3/pull/6074) - Fix typo on style name on Modify Features Test example ([@tchandelle](https://github.com/tchandelle))
|
||||||
|
* [#6073](https://github.com/openlayers/ol3/pull/6073) - Fix link to errors doc ([@tchandelle](https://github.com/tchandelle))
|
||||||
|
* [#6072](https://github.com/openlayers/ol3/pull/6072) - Update metalsmith to version 2.3.0 🚀 ([@openlayers](https://github.com/openlayers))
|
||||||
|
* [#6068](https://github.com/openlayers/ol3/pull/6068) - Fix GeoJSON writeGeometry tests ([@ahocevar](https://github.com/ahocevar))
|
||||||
|
* [#6067](https://github.com/openlayers/ol3/pull/6067) - Do not draw circle when pointer not moved ([@ahocevar](https://github.com/ahocevar))
|
||||||
|
* [#6064](https://github.com/openlayers/ol3/pull/6064) - Make vertex candidate selection work better on rotated views ([@ahocevar](https://github.com/ahocevar))
|
||||||
|
* [#6054](https://github.com/openlayers/ol3/pull/6054) - Update eslint to version 3.9.1 🚀 ([@openlayers](https://github.com/openlayers))
|
||||||
|
* [#6058](https://github.com/openlayers/ol3/pull/6058) - Update fs-extra to version 1.0.0 🚀 ([@openlayers](https://github.com/openlayers))
|
||||||
|
* [#6053](https://github.com/openlayers/ol3/pull/6053) - Update glob to version 7.1.1 🚀 ([@openlayers](https://github.com/openlayers))
|
||||||
|
* [#6045](https://github.com/openlayers/ol3/pull/6045) - Add an example using Mapbox Terrain-RGB tiles ([@tschaub](https://github.com/tschaub))
|
||||||
|
* [#6042](https://github.com/openlayers/ol3/pull/6042) - Set constants of KML format even if a default style is provided ([@oterral](https://github.com/oterral))
|
||||||
@@ -53,7 +53,7 @@ The 3.5.0 release includes features and fixes from a whopping 129 pull requests
|
|||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
See http://openlayers.org/en/master/examples/vector-layer.html for a real example.
|
See https://openlayers.org/en/master/examples/vector-layer.html for a real example.
|
||||||
|
|
||||||
Note that you no longer need to set a `projection` on the source!
|
Note that you no longer need to set a `projection` on the source!
|
||||||
|
|
||||||
@@ -75,7 +75,7 @@ The 3.5.0 release includes features and fixes from a whopping 129 pull requests
|
|||||||
|
|
||||||
The above code uses jQuery to send an Ajax request, but you can obviously use any Ajax library.
|
The above code uses jQuery to send an Ajax request, but you can obviously use any Ajax library.
|
||||||
|
|
||||||
See http://openlayers.org/en/master/examples/igc.html for a real example.
|
See https://openlayers.org/en/master/examples/igc.html for a real example.
|
||||||
|
|
||||||
* Note about KML
|
* Note about KML
|
||||||
|
|
||||||
@@ -133,9 +133,9 @@ The 3.5.0 release includes features and fixes from a whopping 129 pull requests
|
|||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
See http://openlayers.org/en/master/examples/vector-osm.html for a real example.
|
See https://openlayers.org/en/master/examples/vector-osm.html for a real example.
|
||||||
|
|
||||||
* The experimental `ol.loadingstrategy.createTile` function has been renamed to `ol.loadingstrategy.tile`. The signature of the function hasn't changed. See http://openlayers.org/en/master/examples/vector-osm.html for an example.
|
* The experimental `ol.loadingstrategy.createTile` function has been renamed to `ol.loadingstrategy.tile`. The signature of the function hasn't changed. See https://openlayers.org/en/master/examples/vector-osm.html for an example.
|
||||||
|
|
||||||
### Change to `ol.style.Icon`
|
### Change to `ol.style.Icon`
|
||||||
|
|
||||||
|
|||||||
@@ -66,16 +66,16 @@
|
|||||||
<textarea class="hidden" name="css">{{ css.source }}</textarea>
|
<textarea class="hidden" name="css">{{ css.source }}</textarea>
|
||||||
<textarea class="hidden" name="html">{{ contents }}</textarea>
|
<textarea class="hidden" name="html">{{ contents }}</textarea>
|
||||||
<input type="hidden" name="wrap" value="l">
|
<input type="hidden" name="wrap" value="l">
|
||||||
<input type="hidden" name="resources" value="http://openlayers.org/en/v{{ olVersion }}/css/ol.css,http://openlayers.org/en/v{{ olVersion }}/build/ol.js{{ extraResources }}">
|
<input type="hidden" name="resources" value="https://openlayers.org/en/v{{ olVersion }}/css/ol.css,https://openlayers.org/en/v{{ olVersion }}/build/ol.js{{ extraResources }}">
|
||||||
</form>
|
</form>
|
||||||
<pre><code id="example-source" class="language-markup"><!DOCTYPE html>
|
<pre><code id="example-source" class="language-markup"><!DOCTYPE html>
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<title>{{ title }}</title>
|
<title>{{ title }}</title>
|
||||||
<link rel="stylesheet" href="http://openlayers.org/en/v{{ olVersion }}/css/ol.css" type="text/css">
|
<link rel="stylesheet" href="https://openlayers.org/en/v{{ olVersion }}/css/ol.css" type="text/css">
|
||||||
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
|
<!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
|
||||||
<script src="http://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
|
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
|
||||||
<script src="http://openlayers.org/en/v{{ olVersion }}/build/ol.js"></script>{{#if extraHead.remote}}
|
<script src="https://openlayers.org/en/v{{ olVersion }}/build/ol.js"></script>{{#if extraHead.remote}}
|
||||||
{{ indent extraHead.remote spaces=4 }}{{/if}}{{#if css.source}}
|
{{ indent extraHead.remote spaces=4 }}{{/if}}{{#if css.source}}
|
||||||
<style>
|
<style>
|
||||||
{{ indent css.source spaces=6 }} </style>{{/if}}
|
{{ indent css.source spaces=6 }} </style>{{/if}}
|
||||||
|
|||||||
@@ -15,11 +15,11 @@
|
|||||||
</tr><tr>
|
</tr><tr>
|
||||||
<th>Controls</th><th>Interactions</th><th>Sources and formats</th>
|
<th>Controls</th><th>Interactions</th><th>Sources and formats</th>
|
||||||
</tr><tr>
|
</tr><tr>
|
||||||
<td>[Map default controls](ol.control.html#defaults)<br>
|
<td>[Map default controls](ol.control.html#.defaults)<br>
|
||||||
[All controls](ol.control.html)
|
[All controls](ol.control.html)
|
||||||
</td>
|
</td>
|
||||||
<td>
|
<td>
|
||||||
[Map default interactions](ol.interaction.html#defaults)<br>
|
[Map default interactions](ol.interaction.html#.defaults)<br>
|
||||||
Interactions for [vector features](ol.Feature.html)
|
Interactions for [vector features](ol.Feature.html)
|
||||||
<ul><li>[ol.interaction.Select](ol.interaction.Select.html)</li>
|
<ul><li>[ol.interaction.Select](ol.interaction.Select.html)</li>
|
||||||
<li>[ol.interaction.Draw](ol.interaction.Draw.html)</li>
|
<li>[ol.interaction.Draw](ol.interaction.Draw.html)</li>
|
||||||
@@ -32,9 +32,9 @@ Interactions for [vector features](ol.Feature.html)
|
|||||||
<br>[Formats](ol.format.Feature.html) for reading/writing vector data
|
<br>[Formats](ol.format.Feature.html) for reading/writing vector data
|
||||||
<br>[ol.format.WMSCapabilities](ol.format.WMSCapabilities.html)</td></tr>
|
<br>[ol.format.WMSCapabilities](ol.format.WMSCapabilities.html)</td></tr>
|
||||||
<tr><th>Projections</th><th>Observable objects</th><th>Other components</th></tr>
|
<tr><th>Projections</th><th>Observable objects</th><th>Other components</th></tr>
|
||||||
<tr><td><p>All coordinates and extents need to be provided in view projection (default: EPSG:3857). To transform, use [ol.proj.transform()](ol.proj.html#transform) and [ol.proj.transformExtent()](ol.proj.html#transformExtent).</p>
|
<tr><td><p>All coordinates and extents need to be provided in view projection (default: EPSG:3857). To transform, use [ol.proj.transform()](ol.proj.html#.transform) and [ol.proj.transformExtent()](ol.proj.html#.transformExtent).</p>
|
||||||
[ol.proj](ol.proj.html)</td>
|
[ol.proj](ol.proj.html)</td>
|
||||||
<td><p>Changes to all [ol.Objects](ol.Object.html) can observed by calling the [object.on('propertychange')](ol.Object.html#on) method. Listeners receive an [ol.ObjectEvent](ol.ObjectEvent.html) with information on the changed property and old value.</p>
|
<td><p>Changes to all [ol.Objects](ol.Object.html) can observed by calling the [object.on('propertychange')](ol.Object.html#on) method. Listeners receive an [ol.Object.Event](ol.Object.Event.html) with information on the changed property and old value.</p>
|
||||||
<td>[ol.DeviceOrientation](ol.DeviceOrientation.html)<br>
|
<td>[ol.DeviceOrientation](ol.DeviceOrientation.html)<br>
|
||||||
[ol.Geolocation](ol.Geolocation.html)<br>
|
[ol.Geolocation](ol.Geolocation.html)<br>
|
||||||
[ol.Overlay](ol.Overlay.html)<br></td>
|
[ol.Overlay](ol.Overlay.html)<br></td>
|
||||||
|
|||||||
@@ -47,7 +47,7 @@ exports.handlers = {
|
|||||||
if (!cls.fires) {
|
if (!cls.fires) {
|
||||||
cls.fires = [];
|
cls.fires = [];
|
||||||
}
|
}
|
||||||
event = 'ol.ObjectEvent#event:change:' + name;
|
event = 'ol.Object.Event#event:change:' + name;
|
||||||
if (cls.fires.indexOf(event) == -1) {
|
if (cls.fires.indexOf(event) == -1) {
|
||||||
cls.fires.push(event);
|
cls.fires.push(event);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -45,9 +45,11 @@
|
|||||||
body {
|
body {
|
||||||
padding-top: 50px;
|
padding-top: 50px;
|
||||||
}
|
}
|
||||||
.nameContainer .name, .prettyprint.source .pln {
|
.nameContainer .anchor {
|
||||||
padding-top: 50px;
|
padding-top: 50px;
|
||||||
margin-top: -50px;
|
margin-top: -50px;
|
||||||
|
width: 0px;
|
||||||
|
height: 0px;
|
||||||
}
|
}
|
||||||
a {
|
a {
|
||||||
position: relative;
|
position: relative;
|
||||||
@@ -294,6 +296,7 @@ span.type-signature.static {
|
|||||||
color: gray;
|
color: gray;
|
||||||
}
|
}
|
||||||
.main .nameContainer h4 {
|
.main .nameContainer h4 {
|
||||||
|
margin-top: 0px;
|
||||||
margin-right: 150px;
|
margin-right: 150px;
|
||||||
line-height: 1.3;
|
line-height: 1.3;
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -11,7 +11,9 @@ if (data.type && data.type.names) {
|
|||||||
?>
|
?>
|
||||||
<dt class="<?js= (data.stability && data.stability !== 'stable') ? 'unstable' : '' ?>">
|
<dt class="<?js= (data.stability && data.stability !== 'stable') ? 'unstable' : '' ?>">
|
||||||
<div class="nameContainer">
|
<div class="nameContainer">
|
||||||
<h4 class="name" id="<?js= id ?>">
|
<div class="anchor" id="<?js= id ?>">
|
||||||
|
</div>
|
||||||
|
<h4 class="name">
|
||||||
<?js= data.attribs + (data.scope === 'static' ? longname : name) + typeSignature ?>
|
<?js= data.attribs + (data.scope === 'static' ? longname : name) + typeSignature ?>
|
||||||
<?js= this.partial('stability.tmpl', data) ?>
|
<?js= this.partial('stability.tmpl', data) ?>
|
||||||
</h4>
|
</h4>
|
||||||
|
|||||||
@@ -5,7 +5,9 @@ var self = this;
|
|||||||
<dt class="<?js= (data.stability && data.stability !== 'stable') ? 'unstable' : '' ?>">
|
<dt class="<?js= (data.stability && data.stability !== 'stable') ? 'unstable' : '' ?>">
|
||||||
<div class="nameContainer<?js if (data.inherited) { ?> inherited<?js } ?>">
|
<div class="nameContainer<?js if (data.inherited) { ?> inherited<?js } ?>">
|
||||||
<?js if (data.stability || kind !== 'class') { ?>
|
<?js if (data.stability || kind !== 'class') { ?>
|
||||||
<h4 class="name" id="<?js= id ?>">
|
<div class="anchor" id="<?js= id ?>">
|
||||||
|
</div>
|
||||||
|
<h4 class="name">
|
||||||
<?js= data.attribs + (kind === 'class' ? 'new ' : '') + (data.scope === 'static' ? longname : name) + (kind !== 'event' ? data.signature : '') ?>
|
<?js= data.attribs + (kind === 'class' ? 'new ' : '') + (data.scope === 'static' ? longname : name) + (kind !== 'event' ? data.signature : '') ?>
|
||||||
<?js if (data.inherited || data.inherits) { ?>
|
<?js if (data.inherited || data.inherits) { ?>
|
||||||
<span class="inherited"><?js= this.linkto(data.inherits, 'inherited') ?></span>
|
<span class="inherited"><?js= this.linkto(data.inherits, 'inherited') ?></span>
|
||||||
|
|||||||
@@ -8,7 +8,7 @@
|
|||||||
<th>Name</th>
|
<th>Name</th>
|
||||||
<th>Type</th>
|
<th>Type</th>
|
||||||
<th>Settable</th>
|
<th>Settable</th>
|
||||||
<th><a href="ol.ObjectEvent.html">ol.ObjectEvent</a> type</th>
|
<th><a href="ol.Object.Event.html">ol.Object.Event</a> type</th>
|
||||||
<th class="last">Description</th>
|
<th class="last">Description</th>
|
||||||
</tr>
|
</tr>
|
||||||
</thead>
|
</thead>
|
||||||
|
|||||||
@@ -137,10 +137,6 @@ Invalid `units`. `'degrees'`, `'imperial'`, `'nautical'`, `'metric'` or `'us'` r
|
|||||||
|
|
||||||
Invalid geometry layout. Must be `XY`, `XYZ`, `XYM` or `XYZM`.
|
Invalid geometry layout. Must be `XY`, `XYZ`, `XYM` or `XYZM`.
|
||||||
|
|
||||||
### 35
|
|
||||||
|
|
||||||
Unknown GeoJSON object type. Expected `"Feature"` or `"FeatureCollection"`.
|
|
||||||
|
|
||||||
### 36
|
### 36
|
||||||
|
|
||||||
Unknown SRS type. Expected `"name"` or `"EPSG"`.
|
Unknown SRS type. Expected `"name"` or `"EPSG"`.
|
||||||
@@ -165,10 +161,6 @@ Expected `feature` to have a geometry.
|
|||||||
|
|
||||||
Expected an `ol.style.Style` or an array of `ol.style.Style`.
|
Expected an `ol.style.Style` or an array of `ol.style.Style`.
|
||||||
|
|
||||||
### 42
|
|
||||||
|
|
||||||
Expected an `ol.Feature`, but got an `ol.RenderFeature`.
|
|
||||||
|
|
||||||
### 43
|
### 43
|
||||||
|
|
||||||
Expected `layers` to be an array or an `ol.Collection`.
|
Expected `layers` to be an array or an `ol.Collection`.
|
||||||
|
|||||||
@@ -77,7 +77,7 @@ var map = new ol.Map({
|
|||||||
var swissProjection = new ol.proj.Projection({
|
var swissProjection = new ol.proj.Projection({
|
||||||
code: 'EPSG:21781',
|
code: 'EPSG:21781',
|
||||||
// The extent is used to determine zoom level 0. Recommended values for a
|
// The extent is used to determine zoom level 0. Recommended values for a
|
||||||
// projection's validity extent can be found at http://epsg.io/.
|
// projection's validity extent can be found at https://epsg.io/.
|
||||||
extent: [485869.5728, 76443.1884, 837076.5648, 299941.7864],
|
extent: [485869.5728, 76443.1884, 837076.5648, 299941.7864],
|
||||||
units: 'm'
|
units: 'm'
|
||||||
});
|
});
|
||||||
@@ -94,7 +94,7 @@ var map = new ol.Map({
|
|||||||
```
|
```
|
||||||
|
|
||||||
We recommend to lookup parameters of your projection (like the validity extent)
|
We recommend to lookup parameters of your projection (like the validity extent)
|
||||||
over at [epsg.io](http://epsg.io/).
|
over at [epsg.io](https://epsg.io/).
|
||||||
|
|
||||||
|
|
||||||
## Why is my map centered on the gulf of guinea (or africa, the ocean, null-island)?
|
## Why is my map centered on the gulf of guinea (or africa, the ocean, null-island)?
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ If you're eager to get your first OpenLayers 3 map on a page, dive into the [qui
|
|||||||
|
|
||||||
For a more in-depth overview of OpenLayers 3 core concepts, check out the [tutorials](tutorials/).
|
For a more in-depth overview of OpenLayers 3 core concepts, check out the [tutorials](tutorials/).
|
||||||
|
|
||||||
Make sure to also check out the [OpenLayers 3 workshop](/workshop/en/).
|
Make sure to also check out the [OpenLayers 3 workshop](/workshop/).
|
||||||
|
|
||||||
Find additional reference material in the [API docs](../apidoc).
|
Find additional reference material in the [API docs](../apidoc).
|
||||||
|
|
||||||
|
|||||||
@@ -13,14 +13,14 @@ Below you'll find a complete working example. Create a new file, copy in the co
|
|||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<link rel="stylesheet" href="http://openlayers.org/en/{{ latest }}/css/ol.css" type="text/css">
|
<link rel="stylesheet" href="https://openlayers.org/en/{{ latest }}/css/ol.css" type="text/css">
|
||||||
<style>
|
<style>
|
||||||
.map {
|
.map {
|
||||||
height: 400px;
|
height: 400px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
<script src="http://openlayers.org/en/{{ latest }}/build/ol.js" type="text/javascript"></script>
|
<script src="https://openlayers.org/en/{{ latest }}/build/ol.js" type="text/javascript"></script>
|
||||||
<title>OpenLayers 3 example</title>
|
<title>OpenLayers 3 example</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
@@ -55,7 +55,7 @@ To include a map a web page you will need 3 things:
|
|||||||
### Include OpenLayers
|
### Include OpenLayers
|
||||||
|
|
||||||
```xml
|
```xml
|
||||||
<script src="http://openlayers.org/en/{{ latest }}/build/ol.js" type="text/javascript"></script>
|
<script src="https://openlayers.org/en/{{ latest }}/build/ol.js" type="text/javascript"></script>
|
||||||
```
|
```
|
||||||
|
|
||||||
The first part is to include the JavaScript library. For the purpose of this tutorial, here we simply point to the openlayers.org website to get the whole library. In a production environment, we would build a custom version of the library including only the module needed for our application.
|
The first part is to include the JavaScript library. For the purpose of this tutorial, here we simply point to the openlayers.org website to get the whole library. In a production environment, we would build a custom version of the library including only the module needed for our application.
|
||||||
@@ -63,7 +63,7 @@ The first part is to include the JavaScript library. For the purpose of this tut
|
|||||||
**Optional:** If the application is intended to run on old platforms like Internet Explorer or Android 4.x, another script needs to be included before OpenLayers:
|
**Optional:** If the application is intended to run on old platforms like Internet Explorer or Android 4.x, another script needs to be included before OpenLayers:
|
||||||
|
|
||||||
```xml
|
```xml
|
||||||
<script src="http://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList"></script>
|
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList"></script>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -95,7 +95,7 @@ var map = new ol.Map({
|
|||||||
});
|
});
|
||||||
```
|
```
|
||||||
|
|
||||||
Note that this JavaScript code corresponds to OpenLayers 3's [`simple`](http://openlayers.org/en/master/examples/simple.html) example.
|
Note that this JavaScript code corresponds to OpenLayers 3's [`simple`](https://openlayers.org/en/master/examples/simple.html) example.
|
||||||
|
|
||||||
You are now ready to create your first OpenLayers 3 build. Use the following command to create the build:
|
You are now ready to create your first OpenLayers 3 build. Use the following command to create the build:
|
||||||
|
|
||||||
@@ -180,7 +180,7 @@ Note that `build.js` currently requires you to enter an output file and will wri
|
|||||||
|
|
||||||
## A more complicated example
|
## A more complicated example
|
||||||
|
|
||||||
Now let's try a more complicated example: [`heatmaps-earthquakes`](http://openlayers.org/en/master/examples/heatmap-earthquakes.html). The build configuration file looks like this:
|
Now let's try a more complicated example: [`heatmaps-earthquakes`](https://openlayers.org/en/master/examples/heatmap-earthquakes.html). The build configuration file looks like this:
|
||||||
|
|
||||||
```json
|
```json
|
||||||
{
|
{
|
||||||
|
|||||||
@@ -34,7 +34,7 @@ The library is intended for use on both desktop/laptop and mobile devices.
|
|||||||
OL3 uses a similar object hierarchy to the Closure library. There is a top-level `ol` namespace (basically, `var ol = {};`). Subdivisions of this are:
|
OL3 uses a similar object hierarchy to the Closure library. There is a top-level `ol` namespace (basically, `var ol = {};`). Subdivisions of this are:
|
||||||
|
|
||||||
* further namespaces, such as `ol.layer`; these have a lower-case initial
|
* further namespaces, such as `ol.layer`; these have a lower-case initial
|
||||||
* simple objects containing static properties and methods, such as `ol.animation`; these also have a lower-case initial
|
* simple objects containing static properties and methods, such as `ol.easing`; these also have a lower-case initial
|
||||||
* types, which have an upper-case initial. These are mainly 'classes', which here means a constructor function with prototypal inheritance, such as `ol.Map` or `ol.layer.Vector` (the Vector class within the layer namespace). There are however other, simpler, types, such as `ol.Extent`, which is an array.
|
* types, which have an upper-case initial. These are mainly 'classes', which here means a constructor function with prototypal inheritance, such as `ol.Map` or `ol.layer.Vector` (the Vector class within the layer namespace). There are however other, simpler, types, such as `ol.Extent`, which is an array.
|
||||||
|
|
||||||
Class namespaces, such as `ol.layer` have a base class type with the same name, such as `ol.layer.Layer`. These are mainly abstract classes, from which the other subclasses inherit.
|
Class namespaces, such as `ol.layer` have a base class type with the same name, such as `ol.layer.Layer`. These are mainly abstract classes, from which the other subclasses inherit.
|
||||||
|
|||||||
@@ -10,7 +10,7 @@ Transformation of the map projections of the image happens directly in a web bro
|
|||||||
The view in any Proj4js supported coordinate reference system is possible and previously incompatible layers can now be combined and overlaid.
|
The view in any Proj4js supported coordinate reference system is possible and previously incompatible layers can now be combined and overlaid.
|
||||||
|
|
||||||
# Usage
|
# Usage
|
||||||
The API usage is very simple. Just specify proper projection (using [EPSG](http://epsg.io) code) on `ol.View`:
|
The API usage is very simple. Just specify proper projection (using [EPSG](https://epsg.io) code) on `ol.View`:
|
||||||
``` javascript
|
``` javascript
|
||||||
var map = new ol.Map({
|
var map = new ol.Map({
|
||||||
target: 'map',
|
target: 'map',
|
||||||
@@ -35,14 +35,14 @@ var map = new ol.Map({
|
|||||||
If a source (based on `ol.source.TileImage` or `ol.source.Image`) has a projection different from the current `ol.View`’s projection then the reprojection happens automatically under the hood.
|
If a source (based on `ol.source.TileImage` or `ol.source.Image`) has a projection different from the current `ol.View`’s projection then the reprojection happens automatically under the hood.
|
||||||
|
|
||||||
### Examples
|
### Examples
|
||||||
- [Raster reprojection demo](http://openlayers.org/en/master/examples/reprojection.html)
|
- [Raster reprojection demo](https://openlayers.org/en/master/examples/reprojection.html)
|
||||||
- [OpenStreetMap to WGS84 reprojection](http://openlayers.org/en/master/examples/reprojection-wgs84.html)
|
- [OpenStreetMap to WGS84 reprojection](https://openlayers.org/en/master/examples/reprojection-wgs84.html)
|
||||||
- [Reprojection with EPSG.io database search](http://openlayers.org/en/master/examples/reprojection-by-code.html)
|
- [Reprojection with EPSG.io database search](https://openlayers.org/en/master/examples/reprojection-by-code.html)
|
||||||
- [Image reprojection](http://openlayers.org/en/master/examples/reprojection-image.html)
|
- [Image reprojection](https://openlayers.org/en/master/examples/reprojection-image.html)
|
||||||
|
|
||||||
### Custom projection
|
### Custom projection
|
||||||
The easiest way to use a custom projection is to add the [Proj4js](http://proj4js.org/) library to your project and then define the projection using a proj4 definition string.
|
The easiest way to use a custom projection is to add the [Proj4js](http://proj4js.org/) library to your project and then define the projection using a proj4 definition string.
|
||||||
Following example shows definition of a [British National Grid](http://epsg.io/27700):
|
Following example shows definition of a [British National Grid](https://epsg.io/27700):
|
||||||
|
|
||||||
``` html
|
``` html
|
||||||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.14/proj4.js"></script>
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.14/proj4.js"></script>
|
||||||
@@ -122,7 +122,7 @@ Although this is mathematically correct behavior of the inverse transformation,
|
|||||||
A possible general solution would be to calculate the forward transformation for every vertex as well - but this would significantly decrease performance (especially for computationally expensive transformations).
|
A possible general solution would be to calculate the forward transformation for every vertex as well - but this would significantly decrease performance (especially for computationally expensive transformations).
|
||||||
|
|
||||||
Therefore a recommended workaround is to define a proper visibility extent on the `ol.layer.Tile` in the view projection.
|
Therefore a recommended workaround is to define a proper visibility extent on the `ol.layer.Tile` in the view projection.
|
||||||
Setting such a limit is demonstrated in the [reprojection demo example](http://openlayers.org/en/master/examples/reprojection.html).
|
Setting such a limit is demonstrated in the [reprojection demo example](https://openlayers.org/en/master/examples/reprojection.html).
|
||||||
|
|
||||||
### Resolution calculation
|
### Resolution calculation
|
||||||
When determining source tiles to load, the ideal source resolution needs to be calculated.
|
When determining source tiles to load, the ideal source resolution needs to be calculated.
|
||||||
|
|||||||
@@ -7,6 +7,9 @@
|
|||||||
"d3": false,
|
"d3": false,
|
||||||
"jsPDF": false,
|
"jsPDF": false,
|
||||||
"jsts": false,
|
"jsts": false,
|
||||||
|
"topolis": false,
|
||||||
|
"toastr": false,
|
||||||
|
"saveAs": false,
|
||||||
"topojson": false,
|
"topojson": false,
|
||||||
"turf": false
|
"turf": false
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -3,17 +3,17 @@ layout: example.html
|
|||||||
title: View Animation
|
title: View Animation
|
||||||
shortdesc: Demonstrates animated pan, zoom, and rotation.
|
shortdesc: Demonstrates animated pan, zoom, and rotation.
|
||||||
docs: >
|
docs: >
|
||||||
This example shows how to use the beforeRender function on the Map to run one
|
This example shows how to use the <code>view.animate()</code> method to run
|
||||||
or more animations.
|
one or more animations.
|
||||||
tags: "animation"
|
tags: "animation"
|
||||||
---
|
---
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
<button id="rotate-left" title="Rotate clockwise">↻</button>
|
<button id="rotate-left" title="Rotate clockwise">↻</button>
|
||||||
<button id="rotate-right" title="Rotate counterclockwise">↺</button>
|
<button id="rotate-right" title="Rotate counterclockwise">↺</button>
|
||||||
<button id="rotate-around-rome">Rotate around Rome</button>
|
|
||||||
<button id="pan-to-london">Pan to London</button>
|
<button id="pan-to-london">Pan to London</button>
|
||||||
<button id="elastic-to-moscow">Elastic to Moscow</button>
|
<button id="elastic-to-moscow">Elastic to Moscow</button>
|
||||||
<button id="bounce-to-istanbul">Bounce to Istanbul</button>
|
<button id="bounce-to-istanbul">Bounce to Istanbul</button>
|
||||||
<button id="spin-to-rome">Spin to Rome</button>
|
<button id="spin-to-rome">Spin to Rome</button>
|
||||||
<button id="fly-to-bern">Fly to Bern</button>
|
<button id="fly-to-bern">Fly to Bern</button>
|
||||||
<button id="spiral-to-madrid">Spiral to Madrid</button>
|
<button id="rotate-around-rome">Rotate around Rome</button>
|
||||||
|
<button id="tour">Take a tour</button>
|
||||||
|
|||||||
@@ -1,13 +1,35 @@
|
|||||||
goog.require('ol.Map');
|
goog.require('ol.Map');
|
||||||
goog.require('ol.View');
|
goog.require('ol.View');
|
||||||
goog.require('ol.animation');
|
|
||||||
goog.require('ol.control');
|
|
||||||
goog.require('ol.layer.Tile');
|
goog.require('ol.layer.Tile');
|
||||||
goog.require('ol.proj');
|
goog.require('ol.proj');
|
||||||
goog.require('ol.source.OSM');
|
goog.require('ol.source.OSM');
|
||||||
|
|
||||||
|
var london = ol.proj.fromLonLat([-0.12755, 51.507222]);
|
||||||
|
var moscow = ol.proj.fromLonLat([37.6178, 55.7517]);
|
||||||
|
var istanbul = ol.proj.fromLonLat([28.9744, 41.0128]);
|
||||||
|
var rome = ol.proj.fromLonLat([12.5, 41.9]);
|
||||||
|
var bern = ol.proj.fromLonLat([7.4458, 46.95]);
|
||||||
|
|
||||||
// from https://github.com/DmitryBaranovskiy/raphael
|
var view = new ol.View({
|
||||||
|
center: istanbul,
|
||||||
|
zoom: 6
|
||||||
|
});
|
||||||
|
|
||||||
|
var map = new ol.Map({
|
||||||
|
target: 'map',
|
||||||
|
layers: [
|
||||||
|
new ol.layer.Tile({
|
||||||
|
preload: 4,
|
||||||
|
source: new ol.source.OSM()
|
||||||
|
})
|
||||||
|
],
|
||||||
|
// Improve user experience by loading tiles while animating. Will make
|
||||||
|
// animations stutter on mobile or slow devices.
|
||||||
|
loadTilesWhileAnimating: true,
|
||||||
|
view: view
|
||||||
|
});
|
||||||
|
|
||||||
|
// A bounce easing method (from https://github.com/DmitryBaranovskiy/raphael).
|
||||||
function bounce(t) {
|
function bounce(t) {
|
||||||
var s = 7.5625, p = 2.75, l;
|
var s = 7.5625, p = 2.75, l;
|
||||||
if (t < (1 / p)) {
|
if (t < (1 / p)) {
|
||||||
@@ -29,159 +51,116 @@ function bounce(t) {
|
|||||||
return l;
|
return l;
|
||||||
}
|
}
|
||||||
|
|
||||||
// from https://github.com/DmitryBaranovskiy/raphael
|
// An elastic easing method (from https://github.com/DmitryBaranovskiy/raphael).
|
||||||
function elastic(t) {
|
function elastic(t) {
|
||||||
return Math.pow(2, -10 * t) * Math.sin((t - 0.075) * (2 * Math.PI) / 0.3) + 1;
|
return Math.pow(2, -10 * t) * Math.sin((t - 0.075) * (2 * Math.PI) / 0.3) + 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
var london = ol.proj.fromLonLat([-0.12755, 51.507222]);
|
function onClick(id, callback) {
|
||||||
var moscow = ol.proj.fromLonLat([37.6178, 55.7517]);
|
document.getElementById(id).addEventListener('click', callback);
|
||||||
var istanbul = ol.proj.fromLonLat([28.9744, 41.0128]);
|
}
|
||||||
var rome = ol.proj.fromLonLat([12.5, 41.9]);
|
|
||||||
var bern = ol.proj.fromLonLat([7.4458, 46.95]);
|
|
||||||
var madrid = ol.proj.fromLonLat([-3.683333, 40.4]);
|
|
||||||
|
|
||||||
var view = new ol.View({
|
onClick('rotate-left', function() {
|
||||||
// the view's initial state
|
view.animate({
|
||||||
center: istanbul,
|
rotation: view.getRotation() + Math.PI / 2
|
||||||
zoom: 6
|
});
|
||||||
});
|
});
|
||||||
|
|
||||||
var map = new ol.Map({
|
onClick('rotate-right', function() {
|
||||||
layers: [
|
view.animate({
|
||||||
new ol.layer.Tile({
|
rotation: view.getRotation() - Math.PI / 2
|
||||||
preload: 4,
|
});
|
||||||
source: new ol.source.OSM()
|
|
||||||
})
|
|
||||||
],
|
|
||||||
// Improve user experience by loading tiles while animating. Will make
|
|
||||||
// animations stutter on mobile or slow devices.
|
|
||||||
loadTilesWhileAnimating: true,
|
|
||||||
target: 'map',
|
|
||||||
controls: ol.control.defaults({
|
|
||||||
attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
|
|
||||||
collapsible: false
|
|
||||||
})
|
|
||||||
}),
|
|
||||||
view: view
|
|
||||||
});
|
});
|
||||||
|
|
||||||
var rotateLeft = document.getElementById('rotate-left');
|
onClick('rotate-around-rome', function() {
|
||||||
rotateLeft.addEventListener('click', function() {
|
view.animate({
|
||||||
var rotateLeft = ol.animation.rotate({
|
rotation: view.getRotation() + 2 * Math.PI,
|
||||||
duration: 2000,
|
anchor: rome
|
||||||
rotation: -4 * Math.PI
|
|
||||||
});
|
});
|
||||||
map.beforeRender(rotateLeft);
|
});
|
||||||
}, false);
|
|
||||||
var rotateRight = document.getElementById('rotate-right');
|
|
||||||
rotateRight.addEventListener('click', function() {
|
|
||||||
var rotateRight = ol.animation.rotate({
|
|
||||||
duration: 2000,
|
|
||||||
rotation: 4 * Math.PI
|
|
||||||
});
|
|
||||||
map.beforeRender(rotateRight);
|
|
||||||
}, false);
|
|
||||||
|
|
||||||
var rotateAroundRome = document.getElementById('rotate-around-rome');
|
onClick('pan-to-london', function() {
|
||||||
rotateAroundRome.addEventListener('click', function() {
|
view.animate({
|
||||||
var currentRotation = view.getRotation();
|
center: london,
|
||||||
var rotateAroundRome = ol.animation.rotate({
|
duration: 2000
|
||||||
anchor: rome,
|
|
||||||
duration: 1000,
|
|
||||||
rotation: currentRotation
|
|
||||||
});
|
});
|
||||||
map.beforeRender(rotateAroundRome);
|
});
|
||||||
view.rotate(currentRotation + (Math.PI / 2), rome);
|
|
||||||
}, false);
|
|
||||||
|
|
||||||
var panToLondon = document.getElementById('pan-to-london');
|
onClick('elastic-to-moscow', function() {
|
||||||
panToLondon.addEventListener('click', function() {
|
view.animate({
|
||||||
var pan = ol.animation.pan({
|
center: moscow,
|
||||||
duration: 2000,
|
duration: 2000,
|
||||||
source: /** @type {ol.Coordinate} */ (view.getCenter())
|
easing: elastic
|
||||||
});
|
});
|
||||||
map.beforeRender(pan);
|
});
|
||||||
view.setCenter(london);
|
|
||||||
}, false);
|
|
||||||
|
|
||||||
var elasticToMoscow = document.getElementById('elastic-to-moscow');
|
onClick('bounce-to-istanbul', function() {
|
||||||
elasticToMoscow.addEventListener('click', function() {
|
view.animate({
|
||||||
var pan = ol.animation.pan({
|
center: istanbul,
|
||||||
duration: 2000,
|
duration: 2000,
|
||||||
easing: elastic,
|
easing: bounce
|
||||||
source: /** @type {ol.Coordinate} */ (view.getCenter())
|
|
||||||
});
|
});
|
||||||
map.beforeRender(pan);
|
});
|
||||||
view.setCenter(moscow);
|
|
||||||
}, false);
|
|
||||||
|
|
||||||
var bounceToIstanbul = document.getElementById('bounce-to-istanbul');
|
onClick('spin-to-rome', function() {
|
||||||
bounceToIstanbul.addEventListener('click', function() {
|
view.animate({
|
||||||
var pan = ol.animation.pan({
|
center: rome,
|
||||||
duration: 2000,
|
|
||||||
easing: bounce,
|
|
||||||
source: /** @type {ol.Coordinate} */ (view.getCenter())
|
|
||||||
});
|
|
||||||
map.beforeRender(pan);
|
|
||||||
view.setCenter(istanbul);
|
|
||||||
}, false);
|
|
||||||
|
|
||||||
var spinToRome = document.getElementById('spin-to-rome');
|
|
||||||
spinToRome.addEventListener('click', function() {
|
|
||||||
var duration = 2000;
|
|
||||||
var start = +new Date();
|
|
||||||
var pan = ol.animation.pan({
|
|
||||||
duration: duration,
|
|
||||||
source: /** @type {ol.Coordinate} */ (view.getCenter()),
|
|
||||||
start: start
|
|
||||||
});
|
|
||||||
var rotate = ol.animation.rotate({
|
|
||||||
duration: duration,
|
|
||||||
rotation: 2 * Math.PI,
|
rotation: 2 * Math.PI,
|
||||||
start: start
|
duration: 2000
|
||||||
});
|
});
|
||||||
map.beforeRender(pan, rotate);
|
});
|
||||||
view.setCenter(rome);
|
|
||||||
}, false);
|
|
||||||
|
|
||||||
var flyToBern = document.getElementById('fly-to-bern');
|
function flyTo(location, done) {
|
||||||
flyToBern.addEventListener('click', function() {
|
|
||||||
var duration = 2000;
|
var duration = 2000;
|
||||||
var start = +new Date();
|
var zoom = view.getZoom();
|
||||||
var pan = ol.animation.pan({
|
var parts = 2;
|
||||||
duration: duration,
|
var called = false;
|
||||||
source: /** @type {ol.Coordinate} */ (view.getCenter()),
|
function callback(complete) {
|
||||||
start: start
|
--parts;
|
||||||
});
|
if (called) {
|
||||||
var bounce = ol.animation.bounce({
|
return;
|
||||||
duration: duration,
|
}
|
||||||
resolution: 4 * view.getResolution(),
|
if (parts === 0 || !complete) {
|
||||||
start: start
|
called = true;
|
||||||
});
|
done(complete);
|
||||||
map.beforeRender(pan, bounce);
|
}
|
||||||
view.setCenter(bern);
|
}
|
||||||
}, false);
|
view.animate({
|
||||||
|
center: location,
|
||||||
|
duration: duration
|
||||||
|
}, callback);
|
||||||
|
view.animate({
|
||||||
|
zoom: zoom - 1,
|
||||||
|
duration: duration / 2
|
||||||
|
}, {
|
||||||
|
zoom: zoom,
|
||||||
|
duration: duration / 2
|
||||||
|
}, callback);
|
||||||
|
}
|
||||||
|
|
||||||
var spiralToMadrid = document.getElementById('spiral-to-madrid');
|
onClick('fly-to-bern', function() {
|
||||||
spiralToMadrid.addEventListener('click', function() {
|
flyTo(bern, function() {});
|
||||||
var duration = 2000;
|
});
|
||||||
var start = +new Date();
|
|
||||||
var pan = ol.animation.pan({
|
function tour() {
|
||||||
duration: duration,
|
var locations = [london, bern, rome, moscow, istanbul];
|
||||||
source: /** @type {ol.Coordinate} */ (view.getCenter()),
|
var index = -1;
|
||||||
start: start
|
function next(more) {
|
||||||
});
|
if (more) {
|
||||||
var bounce = ol.animation.bounce({
|
++index;
|
||||||
duration: duration,
|
if (index < locations.length) {
|
||||||
resolution: 2 * view.getResolution(),
|
var delay = index === 0 ? 0 : 750;
|
||||||
start: start
|
setTimeout(function() {
|
||||||
});
|
flyTo(locations[index], next);
|
||||||
var rotate = ol.animation.rotate({
|
}, delay);
|
||||||
duration: duration,
|
} else {
|
||||||
rotation: -4 * Math.PI,
|
alert('Tour complete');
|
||||||
start: start
|
}
|
||||||
});
|
} else {
|
||||||
map.beforeRender(pan, bounce, rotate);
|
alert('Tour cancelled');
|
||||||
view.setCenter(madrid);
|
}
|
||||||
}, false);
|
}
|
||||||
|
next(true);
|
||||||
|
}
|
||||||
|
|
||||||
|
onClick('tour', tour);
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ goog.require('ol.layer.Image');
|
|||||||
goog.require('ol.source.OSM');
|
goog.require('ol.source.OSM');
|
||||||
goog.require('ol.source.ImageArcGISRest');
|
goog.require('ol.source.ImageArcGISRest');
|
||||||
|
|
||||||
var url = 'http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/' +
|
var url = 'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/' +
|
||||||
'Specialty/ESRI_StateCityHighway_USA/MapServer';
|
'Specialty/ESRI_StateCityHighway_USA/MapServer';
|
||||||
|
|
||||||
var layers = [
|
var layers = [
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ goog.require('ol.layer.Tile');
|
|||||||
goog.require('ol.source.OSM');
|
goog.require('ol.source.OSM');
|
||||||
goog.require('ol.source.TileArcGISRest');
|
goog.require('ol.source.TileArcGISRest');
|
||||||
|
|
||||||
var url = 'http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/' +
|
var url = 'https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/' +
|
||||||
'Specialty/ESRI_StateCityHighway_USA/MapServer';
|
'Specialty/ESRI_StateCityHighway_USA/MapServer';
|
||||||
|
|
||||||
var layers = [
|
var layers = [
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ docs: >
|
|||||||
<p>When the Bing Maps tile service doesn't have tiles for a given resolution and region it returns "placeholder" tiles indicating that. Zoom the map beyond level 19 to see the "placeholder" tiles. If you want OpenLayers to display stretched tiles in place of "placeholder" tiles beyond zoom level 19 then set <code>maxZoom</code> to <code>19</code> in the options passed to <code>ol.source.BingMaps</code>.</p>
|
<p>When the Bing Maps tile service doesn't have tiles for a given resolution and region it returns "placeholder" tiles indicating that. Zoom the map beyond level 19 to see the "placeholder" tiles. If you want OpenLayers to display stretched tiles in place of "placeholder" tiles beyond zoom level 19 then set <code>maxZoom</code> to <code>19</code> in the options passed to <code>ol.source.BingMaps</code>.</p>
|
||||||
tags: "bing, bing-maps"
|
tags: "bing, bing-maps"
|
||||||
cloak:
|
cloak:
|
||||||
AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF: Your Bing Maps Key from http://www.bingmapsportal.com/ here
|
As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
|
||||||
---
|
---
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
<select id="layer-select">
|
<select id="layer-select">
|
||||||
|
|||||||
@@ -18,7 +18,7 @@ for (i = 0, ii = styles.length; i < ii; ++i) {
|
|||||||
visible: false,
|
visible: false,
|
||||||
preload: Infinity,
|
preload: Infinity,
|
||||||
source: new ol.source.BingMaps({
|
source: new ol.source.BingMaps({
|
||||||
key: 'AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF',
|
key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
|
||||||
imagerySet: styles[i]
|
imagerySet: styles[i]
|
||||||
// use maxZoom 19 to see stretched tiles instead of the BingMaps
|
// use maxZoom 19 to see stretched tiles instead of the BingMaps
|
||||||
// "no photos at this zoom level" tiles
|
// "no photos at this zoom level" tiles
|
||||||
|
|||||||
@@ -1,6 +1,8 @@
|
|||||||
goog.require('ol.Map');
|
goog.require('ol.Map');
|
||||||
goog.require('ol.View');
|
goog.require('ol.View');
|
||||||
|
goog.require('ol.extent');
|
||||||
goog.require('ol.format.GeoJSON');
|
goog.require('ol.format.GeoJSON');
|
||||||
|
goog.require('ol.has');
|
||||||
goog.require('ol.layer.Vector');
|
goog.require('ol.layer.Vector');
|
||||||
goog.require('ol.proj');
|
goog.require('ol.proj');
|
||||||
goog.require('ol.source.Vector');
|
goog.require('ol.source.Vector');
|
||||||
@@ -8,14 +10,22 @@ goog.require('ol.style.Fill');
|
|||||||
goog.require('ol.style.Stroke');
|
goog.require('ol.style.Stroke');
|
||||||
goog.require('ol.style.Style');
|
goog.require('ol.style.Style');
|
||||||
|
|
||||||
// Will contain ol.Style instances key by country.
|
var canvas = document.createElement('canvas');
|
||||||
var styleLookup = {};
|
var context = canvas.getContext('2d');
|
||||||
|
|
||||||
|
// Gradient and pattern are in canvas pixel space, so we adjust for the
|
||||||
|
// renderer's pixel ratio
|
||||||
|
var pixelRatio = ol.has.DEVICE_PIXEL_RATIO;
|
||||||
|
|
||||||
// Generate a rainbow gradient
|
// Generate a rainbow gradient
|
||||||
var gradient = (function() {
|
function gradient(feature, resolution) {
|
||||||
var canvas = document.createElement('canvas');
|
var extent = feature.getGeometry().getExtent();
|
||||||
var context = canvas.getContext('2d');
|
// Gradient starts on the left edge of each feature, and ends on the right.
|
||||||
var grad = context.createLinearGradient(0,0,1000,0);
|
// Coordinate origin is the top-left corner of the extent of the geometry, so
|
||||||
|
// we just divide the geometry's extent width by resolution and multiply with
|
||||||
|
// pixelRatio to match the renderer's pixel coordinate system.
|
||||||
|
var grad = context.createLinearGradient(0, 0,
|
||||||
|
ol.extent.getWidth(extent) / resolution * pixelRatio, 0);
|
||||||
grad.addColorStop(0, 'red');
|
grad.addColorStop(0, 'red');
|
||||||
grad.addColorStop(1 / 6, 'orange');
|
grad.addColorStop(1 / 6, 'orange');
|
||||||
grad.addColorStop(2 / 6, 'yellow');
|
grad.addColorStop(2 / 6, 'yellow');
|
||||||
@@ -24,33 +34,35 @@ var gradient = (function() {
|
|||||||
grad.addColorStop(5 / 6, 'blue');
|
grad.addColorStop(5 / 6, 'blue');
|
||||||
grad.addColorStop(1, 'purple');
|
grad.addColorStop(1, 'purple');
|
||||||
return grad;
|
return grad;
|
||||||
}());
|
}
|
||||||
|
|
||||||
// Generate a canvasPattern with two circles
|
// Generate a canvasPattern with two circles on white background
|
||||||
var pattern = (function() {
|
var pattern = (function() {
|
||||||
var canvas = document.createElement('canvas');
|
canvas.width = 11 * pixelRatio;
|
||||||
var context = canvas.getContext('2d');
|
canvas.height = 11 * pixelRatio;
|
||||||
canvas.width = 11;
|
// white background
|
||||||
canvas.height = 11;
|
context.fillStyle = 'white';
|
||||||
|
context.fillRect(0, 0, canvas.width, canvas.height);
|
||||||
|
// outer circle
|
||||||
context.fillStyle = 'rgba(102, 0, 102, 0.5)';
|
context.fillStyle = 'rgba(102, 0, 102, 0.5)';
|
||||||
context.beginPath();
|
context.beginPath();
|
||||||
context.arc(5, 5, 4, 0, 2 * Math.PI);
|
context.arc(5 * pixelRatio, 5 * pixelRatio, 4 * pixelRatio, 0, 2 * Math.PI);
|
||||||
context.fill();
|
context.fill();
|
||||||
|
// inner circle
|
||||||
context.fillStyle = 'rgb(55, 0, 170)';
|
context.fillStyle = 'rgb(55, 0, 170)';
|
||||||
context.beginPath();
|
context.beginPath();
|
||||||
context.arc(5, 5, 2, 0, 2 * Math.PI);
|
context.arc(5 * pixelRatio, 5 * pixelRatio, 2 * pixelRatio, 0, 2 * Math.PI);
|
||||||
context.fill();
|
context.fill();
|
||||||
return context.createPattern(canvas, 'repeat');
|
return context.createPattern(canvas, 'repeat');
|
||||||
}());
|
}());
|
||||||
|
|
||||||
// Generate a background style that all features will reuse
|
// Generate style for gradient or pattern fill
|
||||||
var backgroundStyle = new ol.style.Style({
|
var fill = new ol.style.Fill();
|
||||||
|
var style = new ol.style.Style({
|
||||||
|
fill: fill,
|
||||||
stroke: new ol.style.Stroke({
|
stroke: new ol.style.Stroke({
|
||||||
color: '#333',
|
color: '#333',
|
||||||
width: 2
|
width: 2
|
||||||
}),
|
|
||||||
fill: new ol.style.Fill({
|
|
||||||
color: '#fff'
|
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -58,33 +70,14 @@ var backgroundStyle = new ol.style.Style({
|
|||||||
* The styling function for the vector layer, will return an array of styles
|
* The styling function for the vector layer, will return an array of styles
|
||||||
* which either contains the aboove gradient or pattern.
|
* which either contains the aboove gradient or pattern.
|
||||||
*
|
*
|
||||||
* @param {ol.Feature} feature the feature to style.
|
* @param {ol.Feature} feature The feature to style.
|
||||||
* @return {Array<ol.style.Style>} the styles to use for the feature.
|
* @param {number} resolution Resolution.
|
||||||
|
* @return {ol.style.Style} The style to use for the feature.
|
||||||
*/
|
*/
|
||||||
var getStackedStyle = function(feature) {
|
var getStackedStyle = function(feature, resolution) {
|
||||||
var id = feature.getId();
|
var id = feature.getId();
|
||||||
if (!styleLookup[id]) {
|
fill.setColor(id > 'J' ? gradient(feature, resolution) : pattern);
|
||||||
var patternOrGradient;
|
return style;
|
||||||
if (id > 'J') { // some shall get the gradient, others the pattern.
|
|
||||||
patternOrGradient = gradient;
|
|
||||||
} else {
|
|
||||||
patternOrGradient = pattern;
|
|
||||||
}
|
|
||||||
// Store the style in the lookup, next call will just return the stored
|
|
||||||
// style for the feature.
|
|
||||||
styleLookup[id] = [
|
|
||||||
// 1. Use the common background style
|
|
||||||
// (white fill and blackish stroke)
|
|
||||||
backgroundStyle,
|
|
||||||
// 2. On top of that, draw the pattern or gradient
|
|
||||||
new ol.style.Style({
|
|
||||||
fill: new ol.style.Fill({
|
|
||||||
color: patternOrGradient
|
|
||||||
})
|
|
||||||
})
|
|
||||||
];
|
|
||||||
}
|
|
||||||
return styleLookup[id];
|
|
||||||
};
|
};
|
||||||
|
|
||||||
// Create a vector layer that makes use of the style function above…
|
// Create a vector layer that makes use of the style function above…
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ goog.require('ol.layer.Tile');
|
|||||||
goog.require('ol.source.OSM');
|
goog.require('ol.source.OSM');
|
||||||
|
|
||||||
var logoElement = document.createElement('a');
|
var logoElement = document.createElement('a');
|
||||||
logoElement.href = 'http://www.osgeo.org/';
|
logoElement.href = 'https://www.osgeo.org/';
|
||||||
logoElement.target = '_blank';
|
logoElement.target = '_blank';
|
||||||
|
|
||||||
var logoImage = document.createElement('img');
|
var logoImage = document.createElement('img');
|
||||||
|
|||||||
@@ -2,9 +2,9 @@
|
|||||||
<Document>
|
<Document>
|
||||||
<name>Skimap.org OpenSkiMap </name>
|
<name>Skimap.org OpenSkiMap </name>
|
||||||
<description>Created from OpenStreetMap data. Renderer v0.5</description>
|
<description>Created from OpenStreetMap data. Renderer v0.5</description>
|
||||||
<!--
|
<!--
|
||||||
Copyright (c) OpenStreetMap Contributors
|
Copyright (c) OpenStreetMap Contributors
|
||||||
http://www.openstreetmap.org/
|
https://www.openstreetmap.org/
|
||||||
|
|
||||||
This work is licensed under the
|
This work is licensed under the
|
||||||
Creative Commons Attribution-ShareAlike 2.0 License.
|
Creative Commons Attribution-ShareAlike 2.0 License.
|
||||||
@@ -13,7 +13,7 @@ http://creativecommons.org/licenses/by-sa/2.0/
|
|||||||
<ScreenOverlay id="CopyrightNotice">
|
<ScreenOverlay id="CopyrightNotice">
|
||||||
<name>Copyright Notice</name>
|
<name>Copyright Notice</name>
|
||||||
<description>
|
<description>
|
||||||
<![CDATA[The data in this KML file is Copyright <a href="http://www.openstreetmap.org/">OpenStreetMap</a> Contributors. It is available under the <a href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons Attribution-ShareAlike (CC-BY-SA) Version 2.0 License</a>.]]>
|
<![CDATA[The data in this KML file is Copyright <a href="https://www.openstreetmap.org/">OpenStreetMap</a> Contributors. It is available under the <a href="http://creativecommons.org/licenses/by-sa/2.0/">Creative Commons Attribution-ShareAlike (CC-BY-SA) Version 2.0 License</a>.]]>
|
||||||
</description>
|
</description>
|
||||||
<Snippet>Copyright (c) OpenStreetMap Contributors. CC-BY-SA 2.0 License.</Snippet>
|
<Snippet>Copyright (c) OpenStreetMap Contributors. CC-BY-SA 2.0 License.</Snippet>
|
||||||
<Icon>
|
<Icon>
|
||||||
@@ -32,7 +32,7 @@ http://creativecommons.org/licenses/by-sa/2.0/
|
|||||||
<IconStyle>
|
<IconStyle>
|
||||||
<scale>0.2</scale>
|
<scale>0.2</scale>
|
||||||
<Icon>
|
<Icon>
|
||||||
<href>http://maps.google.com/mapfiles/kml/shapes/parking_lot.png</href>
|
<href>https://maps.google.com/mapfiles/kml/shapes/parking_lot.png</href>
|
||||||
</Icon>
|
</Icon>
|
||||||
</IconStyle>
|
</IconStyle>
|
||||||
</Style>
|
</Style>
|
||||||
@@ -140,7 +140,7 @@ http://creativecommons.org/licenses/by-sa/2.0/
|
|||||||
<IconStyle>
|
<IconStyle>
|
||||||
<scale>0.7</scale>
|
<scale>0.7</scale>
|
||||||
<Icon>
|
<Icon>
|
||||||
<href>http://maps.google.com/mapfiles/kml/pal2/icon21.png</href>
|
<href>https://maps.google.com/mapfiles/kml/pal2/icon21.png</href>
|
||||||
</Icon>
|
</Icon>
|
||||||
</IconStyle>
|
</IconStyle>
|
||||||
</Style>
|
</Style>
|
||||||
@@ -170,7 +170,7 @@ http://creativecommons.org/licenses/by-sa/2.0/
|
|||||||
<IconStyle>
|
<IconStyle>
|
||||||
<scale>0.7</scale>
|
<scale>0.7</scale>
|
||||||
<Icon>
|
<Icon>
|
||||||
<href>http://maps.google.com/mapfiles/kml/pal2/icon30.png</href>
|
<href>https://maps.google.com/mapfiles/kml/pal2/icon30.png</href>
|
||||||
</Icon>
|
</Icon>
|
||||||
</IconStyle>
|
</IconStyle>
|
||||||
</Style>
|
</Style>
|
||||||
@@ -188,7 +188,7 @@ http://creativecommons.org/licenses/by-sa/2.0/
|
|||||||
<IconStyle>
|
<IconStyle>
|
||||||
<scale>0.7</scale>
|
<scale>0.7</scale>
|
||||||
<Icon>
|
<Icon>
|
||||||
<href>http://maps.google.com/mapfiles/kml/pal2/icon28.png</href>
|
<href>https://maps.google.com/mapfiles/kml/pal2/icon28.png</href>
|
||||||
</Icon>
|
</Icon>
|
||||||
</IconStyle>
|
</IconStyle>
|
||||||
</Style>
|
</Style>
|
||||||
@@ -325,7 +325,7 @@ http://creativecommons.org/licenses/by-sa/2.0/
|
|||||||
<IconStyle>
|
<IconStyle>
|
||||||
<scale>0.7</scale>
|
<scale>0.7</scale>
|
||||||
<Icon>
|
<Icon>
|
||||||
<href>http://maps.google.com/mapfiles/kml/pal2/icon40.png</href>
|
<href>https://maps.google.com/mapfiles/kml/pal2/icon40.png</href>
|
||||||
</Icon>
|
</Icon>
|
||||||
</IconStyle>
|
</IconStyle>
|
||||||
</Style>
|
</Style>
|
||||||
@@ -548,7 +548,7 @@ http://creativecommons.org/licenses/by-sa/2.0/
|
|||||||
<IconStyle>
|
<IconStyle>
|
||||||
<scale>0.7</scale>
|
<scale>0.7</scale>
|
||||||
<Icon>
|
<Icon>
|
||||||
<href>http://maps.google.com/mapfiles/kml/pal3/icon38.png</href>
|
<href>https://maps.google.com/mapfiles/kml/pal3/icon38.png</href>
|
||||||
</Icon>
|
</Icon>
|
||||||
</IconStyle>
|
</IconStyle>
|
||||||
</Style>
|
</Style>
|
||||||
@@ -559,7 +559,7 @@ http://creativecommons.org/licenses/by-sa/2.0/
|
|||||||
<IconStyle>
|
<IconStyle>
|
||||||
<scale>0.7</scale>
|
<scale>0.7</scale>
|
||||||
<Icon>
|
<Icon>
|
||||||
<href>http://maps.google.com/mapfiles/kml/pal3/icon38.png</href>
|
<href>https://maps.google.com/mapfiles/kml/pal3/icon38.png</href>
|
||||||
</Icon>
|
</Icon>
|
||||||
</IconStyle>
|
</IconStyle>
|
||||||
</Style>
|
</Style>
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ docs: >
|
|||||||
Example of using the drag-and-drop interaction with a ol.source.ImageVector. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. Each file is rendered to an image on the client.
|
Example of using the drag-and-drop interaction with a ol.source.ImageVector. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. Each file is rendered to an image on the client.
|
||||||
tags: "drag-and-drop-image-vector, gpx, geojson, igc, kml, topojson, vector, image"
|
tags: "drag-and-drop-image-vector, gpx, geojson, igc, kml, topojson, vector, image"
|
||||||
cloak:
|
cloak:
|
||||||
AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF: Your Bing Maps Key from http://www.bingmapsportal.com/ here
|
As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
|
||||||
---
|
---
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
<div id="info"> </div>
|
<div id="info"> </div>
|
||||||
|
|||||||
@@ -100,7 +100,7 @@ var map = new ol.Map({
|
|||||||
new ol.layer.Tile({
|
new ol.layer.Tile({
|
||||||
source: new ol.source.BingMaps({
|
source: new ol.source.BingMaps({
|
||||||
imagerySet: 'Aerial',
|
imagerySet: 'Aerial',
|
||||||
key: 'AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF'
|
key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5'
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
],
|
],
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ docs: >
|
|||||||
Example of using the drag-and-drop interaction. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. There is no projection transform support, so this will only work with data in EPSG:4326 and EPSG:3857.
|
Example of using the drag-and-drop interaction. Drag and drop GPX, GeoJSON, IGC, KML, or TopoJSON files on to the map. There is no projection transform support, so this will only work with data in EPSG:4326 and EPSG:3857.
|
||||||
tags: "drag-and-drop, gpx, geojson, igc, kml, topojson"
|
tags: "drag-and-drop, gpx, geojson, igc, kml, topojson"
|
||||||
cloak:
|
cloak:
|
||||||
AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF: Your Bing Maps Key from http://www.bingmapsportal.com/ here
|
As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
|
||||||
---
|
---
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
<div id="info"> </div>
|
<div id="info"> </div>
|
||||||
|
|||||||
@@ -99,7 +99,7 @@ var map = new ol.Map({
|
|||||||
new ol.layer.Tile({
|
new ol.layer.Tile({
|
||||||
source: new ol.source.BingMaps({
|
source: new ol.source.BingMaps({
|
||||||
imagerySet: 'Aerial',
|
imagerySet: 'Aerial',
|
||||||
key: 'AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF'
|
key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5'
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
],
|
],
|
||||||
|
|||||||
@@ -5,11 +5,8 @@ shortdesc: Example of using the ol.interaction.Draw interaction.
|
|||||||
docs: >
|
docs: >
|
||||||
Example of using the Draw interaction. Select a geometry type from the
|
Example of using the Draw interaction. Select a geometry type from the
|
||||||
dropdown above to start drawing. To finish drawing, click the last
|
dropdown above to start drawing. To finish drawing, click the last
|
||||||
point. To activate freehand drawing for lines and polygons, hold the `Shift`
|
point. To activate freehand drawing for lines, polygons, and circles, hold
|
||||||
key. Square drawing is achieved by using Circle mode with a `geometryFunction`
|
the `Shift` key.
|
||||||
that creates a 4-sided regular polygon instead of a circle. Box drawing uses a
|
|
||||||
custom `geometryFunction` that takes start and end point of a line with 2
|
|
||||||
points and creates a rectangular box.
|
|
||||||
tags: "draw, edit, freehand, vector"
|
tags: "draw, edit, freehand, vector"
|
||||||
---
|
---
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
@@ -20,8 +17,6 @@ tags: "draw, edit, freehand, vector"
|
|||||||
<option value="LineString">LineString</option>
|
<option value="LineString">LineString</option>
|
||||||
<option value="Polygon">Polygon</option>
|
<option value="Polygon">Polygon</option>
|
||||||
<option value="Circle">Circle</option>
|
<option value="Circle">Circle</option>
|
||||||
<option value="Square">Square</option>
|
|
||||||
<option value="Box">Box</option>
|
|
||||||
<option value="None">None</option>
|
<option value="None">None</option>
|
||||||
</select>
|
</select>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
@@ -1,15 +1,10 @@
|
|||||||
goog.require('ol.Map');
|
goog.require('ol.Map');
|
||||||
goog.require('ol.View');
|
goog.require('ol.View');
|
||||||
goog.require('ol.geom.Polygon');
|
|
||||||
goog.require('ol.interaction.Draw');
|
goog.require('ol.interaction.Draw');
|
||||||
goog.require('ol.layer.Tile');
|
goog.require('ol.layer.Tile');
|
||||||
goog.require('ol.layer.Vector');
|
goog.require('ol.layer.Vector');
|
||||||
goog.require('ol.source.OSM');
|
goog.require('ol.source.OSM');
|
||||||
goog.require('ol.source.Vector');
|
goog.require('ol.source.Vector');
|
||||||
goog.require('ol.style.Circle');
|
|
||||||
goog.require('ol.style.Fill');
|
|
||||||
goog.require('ol.style.Stroke');
|
|
||||||
goog.require('ol.style.Style');
|
|
||||||
|
|
||||||
var raster = new ol.layer.Tile({
|
var raster = new ol.layer.Tile({
|
||||||
source: new ol.source.OSM()
|
source: new ol.source.OSM()
|
||||||
@@ -18,22 +13,7 @@ var raster = new ol.layer.Tile({
|
|||||||
var source = new ol.source.Vector({wrapX: false});
|
var source = new ol.source.Vector({wrapX: false});
|
||||||
|
|
||||||
var vector = new ol.layer.Vector({
|
var vector = new ol.layer.Vector({
|
||||||
source: source,
|
source: source
|
||||||
style: new ol.style.Style({
|
|
||||||
fill: new ol.style.Fill({
|
|
||||||
color: 'rgba(255, 255, 255, 0.2)'
|
|
||||||
}),
|
|
||||||
stroke: new ol.style.Stroke({
|
|
||||||
color: '#ffcc33',
|
|
||||||
width: 2
|
|
||||||
}),
|
|
||||||
image: new ol.style.Circle({
|
|
||||||
radius: 7,
|
|
||||||
fill: new ol.style.Fill({
|
|
||||||
color: '#ffcc33'
|
|
||||||
})
|
|
||||||
})
|
|
||||||
})
|
|
||||||
});
|
});
|
||||||
|
|
||||||
var map = new ol.Map({
|
var map = new ol.Map({
|
||||||
@@ -51,30 +31,9 @@ var draw; // global so we can remove it later
|
|||||||
function addInteraction() {
|
function addInteraction() {
|
||||||
var value = typeSelect.value;
|
var value = typeSelect.value;
|
||||||
if (value !== 'None') {
|
if (value !== 'None') {
|
||||||
var geometryFunction, maxPoints;
|
|
||||||
if (value === 'Square') {
|
|
||||||
value = 'Circle';
|
|
||||||
geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
|
|
||||||
} else if (value === 'Box') {
|
|
||||||
value = 'LineString';
|
|
||||||
maxPoints = 2;
|
|
||||||
geometryFunction = function(coordinates, geometry) {
|
|
||||||
if (!geometry) {
|
|
||||||
geometry = new ol.geom.Polygon(null);
|
|
||||||
}
|
|
||||||
var start = coordinates[0];
|
|
||||||
var end = coordinates[1];
|
|
||||||
geometry.setCoordinates([
|
|
||||||
[start, [start[0], end[1]], end, [end[0], start[1]], start]
|
|
||||||
]);
|
|
||||||
return geometry;
|
|
||||||
};
|
|
||||||
}
|
|
||||||
draw = new ol.interaction.Draw({
|
draw = new ol.interaction.Draw({
|
||||||
source: source,
|
source: source,
|
||||||
type: /** @type {ol.geom.GeometryType} */ (value),
|
type: /** @type {ol.geom.GeometryType} */ (typeSelect.value)
|
||||||
geometryFunction: geometryFunction,
|
|
||||||
maxPoints: maxPoints
|
|
||||||
});
|
});
|
||||||
map.addInteraction(draw);
|
map.addInteraction(draw);
|
||||||
}
|
}
|
||||||
|
|||||||
22
examples/draw-freehand.html
Normal file
22
examples/draw-freehand.html
Normal file
@@ -0,0 +1,22 @@
|
|||||||
|
---
|
||||||
|
layout: example.html
|
||||||
|
title: Freehand Drawing
|
||||||
|
shortdesc: Example using the ol.interaction.Draw interaction in freehand mode.
|
||||||
|
docs: >
|
||||||
|
This example demonstrates the `ol.interaction.Draw` in freehand mode. During
|
||||||
|
freehand drawing, points are added while dragging. Set `freehand: true` to
|
||||||
|
enable freehand mode. Note that freehand mode can be conditionally enabled
|
||||||
|
by using the `freehandCondition` option. For example to toggle freehand mode
|
||||||
|
with the `Shift` key, use `freehandCondition: ol.events.condition.shiftKeyOnly`.
|
||||||
|
tags: "draw, edit, freehand, vector"
|
||||||
|
---
|
||||||
|
<div id="map" class="map"></div>
|
||||||
|
<form class="form-inline">
|
||||||
|
<label>Geometry type </label>
|
||||||
|
<select id="type">
|
||||||
|
<option value="LineString">LineString</option>
|
||||||
|
<option value="Polygon">Polygon</option>
|
||||||
|
<option value="Circle">Circle</option>
|
||||||
|
<option value="None">None</option>
|
||||||
|
</select>
|
||||||
|
</form>
|
||||||
52
examples/draw-freehand.js
Normal file
52
examples/draw-freehand.js
Normal file
@@ -0,0 +1,52 @@
|
|||||||
|
goog.require('ol.Map');
|
||||||
|
goog.require('ol.View');
|
||||||
|
goog.require('ol.interaction.Draw');
|
||||||
|
goog.require('ol.layer.Tile');
|
||||||
|
goog.require('ol.layer.Vector');
|
||||||
|
goog.require('ol.source.OSM');
|
||||||
|
goog.require('ol.source.Vector');
|
||||||
|
|
||||||
|
var raster = new ol.layer.Tile({
|
||||||
|
source: new ol.source.OSM()
|
||||||
|
});
|
||||||
|
|
||||||
|
var source = new ol.source.Vector({wrapX: false});
|
||||||
|
|
||||||
|
var vector = new ol.layer.Vector({
|
||||||
|
source: source
|
||||||
|
});
|
||||||
|
|
||||||
|
var map = new ol.Map({
|
||||||
|
layers: [raster, vector],
|
||||||
|
target: 'map',
|
||||||
|
view: new ol.View({
|
||||||
|
center: [-11000000, 4600000],
|
||||||
|
zoom: 4
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
var typeSelect = document.getElementById('type');
|
||||||
|
|
||||||
|
var draw; // global so we can remove it later
|
||||||
|
function addInteraction() {
|
||||||
|
var value = typeSelect.value;
|
||||||
|
if (value !== 'None') {
|
||||||
|
draw = new ol.interaction.Draw({
|
||||||
|
source: source,
|
||||||
|
type: /** @type {ol.geom.GeometryType} */ (typeSelect.value),
|
||||||
|
freehand: true
|
||||||
|
});
|
||||||
|
map.addInteraction(draw);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handle change event.
|
||||||
|
*/
|
||||||
|
typeSelect.onchange = function() {
|
||||||
|
map.removeInteraction(draw);
|
||||||
|
addInteraction();
|
||||||
|
};
|
||||||
|
|
||||||
|
addInteraction();
|
||||||
25
examples/draw-shapes.html
Normal file
25
examples/draw-shapes.html
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
---
|
||||||
|
layout: example.html
|
||||||
|
title: Draw Shapes
|
||||||
|
shortdesc: Using the ol.interaction.Draw to create regular shapes
|
||||||
|
docs: >
|
||||||
|
This demonstrates the use of the `geometryFunction` option for the
|
||||||
|
`ol.interaction.Draw`. Select a shape type from the dropdown above to start
|
||||||
|
drawing. To activate freehand drawing, hold the `Shift` key. Square drawing is
|
||||||
|
achieved by using `type: 'Circle'` type with a `geometryFunction` that creates
|
||||||
|
a 4-sided regular polygon instead of a circle. Box drawing uses `type: 'Circle'`
|
||||||
|
with a `geometryFunction` that creates a box-shaped polygon instead of a
|
||||||
|
circle. Star drawing uses a custom geometry function that coverts a circle
|
||||||
|
into a start using the center and radius provided by the draw interaction.
|
||||||
|
tags: "draw, edit, freehand, vector"
|
||||||
|
---
|
||||||
|
<div id="map" class="map"></div>
|
||||||
|
<form class="form-inline">
|
||||||
|
<label>Shape type </label>
|
||||||
|
<select id="type">
|
||||||
|
<option value="Square">Square</option>
|
||||||
|
<option value="Box">Box</option>
|
||||||
|
<option value="Star">Star</option>
|
||||||
|
<option value="None">None</option>
|
||||||
|
</select>
|
||||||
|
</form>
|
||||||
86
examples/draw-shapes.js
Normal file
86
examples/draw-shapes.js
Normal file
@@ -0,0 +1,86 @@
|
|||||||
|
goog.require('ol.Map');
|
||||||
|
goog.require('ol.View');
|
||||||
|
goog.require('ol.geom.Polygon');
|
||||||
|
goog.require('ol.interaction.Draw');
|
||||||
|
goog.require('ol.layer.Tile');
|
||||||
|
goog.require('ol.layer.Vector');
|
||||||
|
goog.require('ol.source.OSM');
|
||||||
|
goog.require('ol.source.Vector');
|
||||||
|
|
||||||
|
var raster = new ol.layer.Tile({
|
||||||
|
source: new ol.source.OSM()
|
||||||
|
});
|
||||||
|
|
||||||
|
var source = new ol.source.Vector({wrapX: false});
|
||||||
|
|
||||||
|
var vector = new ol.layer.Vector({
|
||||||
|
source: source
|
||||||
|
});
|
||||||
|
|
||||||
|
var map = new ol.Map({
|
||||||
|
layers: [raster, vector],
|
||||||
|
target: 'map',
|
||||||
|
view: new ol.View({
|
||||||
|
center: [-11000000, 4600000],
|
||||||
|
zoom: 4
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
var typeSelect = document.getElementById('type');
|
||||||
|
|
||||||
|
var draw; // global so we can remove it later
|
||||||
|
function addInteraction() {
|
||||||
|
var value = typeSelect.value;
|
||||||
|
if (value !== 'None') {
|
||||||
|
var geometryFunction;
|
||||||
|
if (value === 'Square') {
|
||||||
|
value = 'Circle';
|
||||||
|
geometryFunction = ol.interaction.Draw.createRegularPolygon(4);
|
||||||
|
} else if (value === 'Box') {
|
||||||
|
value = 'Circle';
|
||||||
|
geometryFunction = ol.interaction.Draw.createBox();
|
||||||
|
} else if (value === 'Star') {
|
||||||
|
value = 'Circle';
|
||||||
|
geometryFunction = function(coordinates, geometry) {
|
||||||
|
if (!geometry) {
|
||||||
|
geometry = new ol.geom.Polygon(null);
|
||||||
|
}
|
||||||
|
var center = coordinates[0];
|
||||||
|
var last = coordinates[1];
|
||||||
|
var dx = center[0] - last[0];
|
||||||
|
var dy = center[1] - last[1];
|
||||||
|
var radius = Math.sqrt(dx * dx + dy * dy);
|
||||||
|
var rotation = Math.atan2(dy, dx);
|
||||||
|
var newCoordinates = [];
|
||||||
|
var numPoints = 12;
|
||||||
|
for (var i = 0; i < numPoints; ++i) {
|
||||||
|
var angle = rotation + i * 2 * Math.PI / numPoints;
|
||||||
|
var fraction = i % 2 === 0 ? 1 : 0.5;
|
||||||
|
var offsetX = radius * fraction * Math.cos(angle);
|
||||||
|
var offsetY = radius * fraction * Math.sin(angle);
|
||||||
|
newCoordinates.push([center[0] + offsetX, center[1] + offsetY]);
|
||||||
|
}
|
||||||
|
newCoordinates.push(newCoordinates[0].slice());
|
||||||
|
geometry.setCoordinates([newCoordinates]);
|
||||||
|
return geometry;
|
||||||
|
};
|
||||||
|
}
|
||||||
|
draw = new ol.interaction.Draw({
|
||||||
|
source: source,
|
||||||
|
type: /** @type {ol.geom.GeometryType} */ (value),
|
||||||
|
geometryFunction: geometryFunction
|
||||||
|
});
|
||||||
|
map.addInteraction(draw);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Handle change event.
|
||||||
|
*/
|
||||||
|
typeSelect.onchange = function() {
|
||||||
|
map.removeInteraction(draw);
|
||||||
|
addInteraction();
|
||||||
|
};
|
||||||
|
|
||||||
|
addInteraction();
|
||||||
@@ -9,7 +9,7 @@ goog.require('ol.source.TileWMS');
|
|||||||
var layers = [
|
var layers = [
|
||||||
new ol.layer.Tile({
|
new ol.layer.Tile({
|
||||||
source: new ol.source.TileWMS({
|
source: new ol.source.TileWMS({
|
||||||
url: 'http://demo.boundlessgeo.com/geoserver/wms',
|
url: 'https://ahocevar.com/geoserver/wms',
|
||||||
params: {
|
params: {
|
||||||
'LAYERS': 'ne:NE1_HR_LC_SR_W_DR'
|
'LAYERS': 'ne:NE1_HR_LC_SR_W_DR'
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -3,12 +3,12 @@ layout: example.html
|
|||||||
title: Map Export
|
title: Map Export
|
||||||
shortdesc: Example of exporting a map as a PNG image.
|
shortdesc: Example of exporting a map as a PNG image.
|
||||||
docs: >
|
docs: >
|
||||||
Example of exporting a map as a PNG image.
|
Example of exporting a map as a PNG image. This example requires a browser
|
||||||
|
that supports <a href="https://developer.mozilla.org/de/docs/Web/API/HTMLCanvasElement/toBlob#Browser_compatibility">
|
||||||
|
<code>canvas.toBlob()</code></a>.
|
||||||
tags: "export, png, openstreetmap"
|
tags: "export, png, openstreetmap"
|
||||||
|
resources:
|
||||||
|
- https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/1.3.3/FileSaver.min.js
|
||||||
---
|
---
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
<div id="no-download" class="alert alert-danger" style="display: none">
|
<a id="export-png" class="btn btn-default"><i class="fa fa-download"></i> Download PNG</a>
|
||||||
This example requires a browser that supports the
|
|
||||||
<a href="http://caniuse.com/#feat=download">link download</a> attribute.
|
|
||||||
</div>
|
|
||||||
<a id="export-png" class="btn btn-default" download="map.png"><i class="fa fa-download"></i> Download PNG</a>
|
|
||||||
|
|||||||
@@ -1,3 +1,5 @@
|
|||||||
|
// NOCOMPILE
|
||||||
|
// this example uses FileSaver.js for which we don't have an externs file.
|
||||||
goog.require('ol.Map');
|
goog.require('ol.Map');
|
||||||
goog.require('ol.View');
|
goog.require('ol.View');
|
||||||
goog.require('ol.control');
|
goog.require('ol.control');
|
||||||
@@ -31,20 +33,12 @@ var map = new ol.Map({
|
|||||||
})
|
})
|
||||||
});
|
});
|
||||||
|
|
||||||
var exportPNGElement = document.getElementById('export-png');
|
document.getElementById('export-png').addEventListener('click', function() {
|
||||||
|
map.once('postcompose', function(event) {
|
||||||
if ('download' in exportPNGElement) {
|
var canvas = event.context.canvas;
|
||||||
exportPNGElement.addEventListener('click', function() {
|
canvas.toBlob(function(blob) {
|
||||||
map.once('postcompose', function(event) {
|
saveAs(blob, 'map.png');
|
||||||
var canvas = event.context.canvas;
|
|
||||||
exportPNGElement.href = canvas.toDataURL('image/png');
|
|
||||||
});
|
});
|
||||||
map.renderSync();
|
});
|
||||||
}, false);
|
map.renderSync();
|
||||||
} else {
|
});
|
||||||
var info = document.getElementById('no-download');
|
|
||||||
/**
|
|
||||||
* display error message
|
|
||||||
*/
|
|
||||||
info.style.display = '';
|
|
||||||
}
|
|
||||||
|
|||||||
@@ -7,6 +7,8 @@ docs: >
|
|||||||
animate a (marker) feature along a line. In this example an encoded polyline
|
animate a (marker) feature along a line. In this example an encoded polyline
|
||||||
is being used.
|
is being used.
|
||||||
tags: "animation, feature, postcompose, polyline"
|
tags: "animation, feature, postcompose, polyline"
|
||||||
|
cloak:
|
||||||
|
As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
|
||||||
---
|
---
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
<label for="speed">
|
<label for="speed">
|
||||||
|
|||||||
@@ -140,7 +140,7 @@ var map = new ol.Map({
|
|||||||
new ol.layer.Tile({
|
new ol.layer.Tile({
|
||||||
source: new ol.source.BingMaps({
|
source: new ol.source.BingMaps({
|
||||||
imagerySet: 'AerialWithLabels',
|
imagerySet: 'AerialWithLabels',
|
||||||
key: 'AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF'
|
key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5'
|
||||||
})
|
})
|
||||||
}),
|
}),
|
||||||
vectorLayer
|
vectorLayer
|
||||||
|
|||||||
@@ -7,6 +7,6 @@ docs: >
|
|||||||
<p>If there is no button on the map, your browser does not support the <a href="http://caniuse.com/#feat=fullscreen">Full Screen API</a>.</p>
|
<p>If there is no button on the map, your browser does not support the <a href="http://caniuse.com/#feat=fullscreen">Full Screen API</a>.</p>
|
||||||
tags: "full-screen, drag, rotate, zoom, bing, bing-maps"
|
tags: "full-screen, drag, rotate, zoom, bing, bing-maps"
|
||||||
cloak:
|
cloak:
|
||||||
AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF: Your Bing Maps Key from http://www.bingmapsportal.com/ here
|
As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
|
||||||
---
|
---
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
|
|||||||
@@ -18,7 +18,7 @@ var map = new ol.Map({
|
|||||||
layers: [
|
layers: [
|
||||||
new ol.layer.Tile({
|
new ol.layer.Tile({
|
||||||
source: new ol.source.BingMaps({
|
source: new ol.source.BingMaps({
|
||||||
key: 'AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF',
|
key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
|
||||||
imagerySet: 'Aerial'
|
imagerySet: 'Aerial'
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -7,6 +7,6 @@ docs: >
|
|||||||
<p>If there is no button on the map, your browser does not support the <a href="http://caniuse.com/#feat=fullscreen">Full Screen API</a>.</p>
|
<p>If there is no button on the map, your browser does not support the <a href="http://caniuse.com/#feat=fullscreen">Full Screen API</a>.</p>
|
||||||
tags: "full-screen, bing, bing-maps"
|
tags: "full-screen, bing, bing-maps"
|
||||||
cloak:
|
cloak:
|
||||||
AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF: Your Bing Maps Key from http://www.bingmapsportal.com/ here
|
As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
|
||||||
---
|
---
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
|
|||||||
@@ -18,7 +18,7 @@ var map = new ol.Map({
|
|||||||
layers: [
|
layers: [
|
||||||
new ol.layer.Tile({
|
new ol.layer.Tile({
|
||||||
source: new ol.source.BingMaps({
|
source: new ol.source.BingMaps({
|
||||||
key: 'AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF',
|
key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
|
||||||
imagerySet: 'Aerial'
|
imagerySet: 'Aerial'
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -44,7 +44,6 @@ tags: "fullscreen, geolocation, orientation, mobile"
|
|||||||
<button id="geolocate">Geolocate Me!</button>
|
<button id="geolocate">Geolocate Me!</button>
|
||||||
<button id="simulate">Simulate</button>
|
<button id="simulate">Simulate</button>
|
||||||
</div>
|
</div>
|
||||||
<script src="http://code.jquery.com/jquery-2.2.3.min.js" type="text/javascript"></script>
|
|
||||||
<script src="./resources/common.js" type="text/javascript"></script>
|
<script src="./resources/common.js" type="text/javascript"></script>
|
||||||
<script src="loader.js?id=geolocation-orientation" type="text/javascript"></script>
|
<script src="loader.js?id=geolocation-orientation" type="text/javascript"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|||||||
@@ -130,26 +130,6 @@ function addPosition(position, heading, m, speed) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
var previousM = 0;
|
|
||||||
// change center and rotation before render
|
|
||||||
map.beforeRender(function(map, frameState) {
|
|
||||||
if (frameState !== null) {
|
|
||||||
// use sampling period to get a smooth transition
|
|
||||||
var m = frameState.time - deltaMean * 1.5;
|
|
||||||
m = Math.max(m, previousM);
|
|
||||||
previousM = m;
|
|
||||||
// interpolate position along positions LineString
|
|
||||||
var c = positions.getCoordinateAtM(m, true);
|
|
||||||
var view = frameState.viewState;
|
|
||||||
if (c) {
|
|
||||||
view.center = getCenterWithHeading(c, -c[2], view.resolution);
|
|
||||||
view.rotation = -c[2];
|
|
||||||
marker.setPosition(c);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return true; // Force animation to continue
|
|
||||||
});
|
|
||||||
|
|
||||||
// recenters the view by putting the given coordinates at 3/4 from the top or
|
// recenters the view by putting the given coordinates at 3/4 from the top or
|
||||||
// the screen
|
// the screen
|
||||||
function getCenterWithHeading(position, rotation, resolution) {
|
function getCenterWithHeading(position, rotation, resolution) {
|
||||||
@@ -162,9 +142,19 @@ function getCenterWithHeading(position, rotation, resolution) {
|
|||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
// postcompose callback
|
var previousM = 0;
|
||||||
function render() {
|
function updateView() {
|
||||||
map.render();
|
// use sampling period to get a smooth transition
|
||||||
|
var m = Date.now() - deltaMean * 1.5;
|
||||||
|
m = Math.max(m, previousM);
|
||||||
|
previousM = m;
|
||||||
|
// interpolate position along positions LineString
|
||||||
|
var c = positions.getCoordinateAtM(m, true);
|
||||||
|
if (c) {
|
||||||
|
view.setCenter(getCenterWithHeading(c, -c[2], view.getResolution()));
|
||||||
|
view.setRotation(-c[2]);
|
||||||
|
marker.setPosition(c);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// geolocate device
|
// geolocate device
|
||||||
@@ -172,7 +162,7 @@ var geolocateBtn = document.getElementById('geolocate');
|
|||||||
geolocateBtn.addEventListener('click', function() {
|
geolocateBtn.addEventListener('click', function() {
|
||||||
geolocation.setTracking(true); // Start position tracking
|
geolocation.setTracking(true); // Start position tracking
|
||||||
|
|
||||||
map.on('postcompose', render);
|
map.on('postcompose', updateView);
|
||||||
map.render();
|
map.render();
|
||||||
|
|
||||||
disableButtons();
|
disableButtons();
|
||||||
@@ -214,7 +204,7 @@ simulateBtn.addEventListener('click', function() {
|
|||||||
}
|
}
|
||||||
geolocate();
|
geolocate();
|
||||||
|
|
||||||
map.on('postcompose', render);
|
map.on('postcompose', updateView);
|
||||||
map.render();
|
map.render();
|
||||||
|
|
||||||
disableButtons();
|
disableButtons();
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ goog.require('ol.source.ImageWMS');
|
|||||||
|
|
||||||
|
|
||||||
var wmsSource = new ol.source.ImageWMS({
|
var wmsSource = new ol.source.ImageWMS({
|
||||||
url: 'http://demo.boundlessgeo.com/geoserver/wms',
|
url: 'https://ahocevar.com/geoserver/wms',
|
||||||
params: {'LAYERS': 'ne:ne'},
|
params: {'LAYERS': 'ne:ne'},
|
||||||
serverType: 'geoserver',
|
serverType: 'geoserver',
|
||||||
crossOrigin: 'anonymous'
|
crossOrigin: 'anonymous'
|
||||||
|
|||||||
@@ -5,7 +5,7 @@ goog.require('ol.source.TileWMS');
|
|||||||
|
|
||||||
|
|
||||||
var wmsSource = new ol.source.TileWMS({
|
var wmsSource = new ol.source.TileWMS({
|
||||||
url: 'http://demo.boundlessgeo.com/geoserver/wms',
|
url: 'https://ahocevar.com/geoserver/wms',
|
||||||
params: {'LAYERS': 'ne:ne'},
|
params: {'LAYERS': 'ne:ne'},
|
||||||
serverType: 'geoserver',
|
serverType: 'geoserver',
|
||||||
crossOrigin: 'anonymous'
|
crossOrigin: 'anonymous'
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ docs: >
|
|||||||
Example of using the GPX source.
|
Example of using the GPX source.
|
||||||
tags: "GPX"
|
tags: "GPX"
|
||||||
cloak:
|
cloak:
|
||||||
AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF: Your Bing Maps Key from http://www.bingmapsportal.com/ here
|
As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
|
||||||
---
|
---
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
<div id="info"> </div>
|
<div id="info"> </div>
|
||||||
|
|||||||
@@ -13,7 +13,7 @@ goog.require('ol.style.Style');
|
|||||||
var raster = new ol.layer.Tile({
|
var raster = new ol.layer.Tile({
|
||||||
source: new ol.source.BingMaps({
|
source: new ol.source.BingMaps({
|
||||||
imagerySet: 'Aerial',
|
imagerySet: 'Aerial',
|
||||||
key: 'AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF'
|
key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5'
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ layout: example.html
|
|||||||
title: IGC Data
|
title: IGC Data
|
||||||
shortdesc: Example of tracks recorded from multiple paraglider flights on the same day, read from an IGC file.
|
shortdesc: Example of tracks recorded from multiple paraglider flights on the same day, read from an IGC file.
|
||||||
docs: >
|
docs: >
|
||||||
<p>The five tracks contain a total of 49,707 unique coordinates. Zoom in to see more detail. The background layer is from <a href="http://www.opencyclemap.org/">OpenCycleMap</a>.</p>
|
<p>The five tracks contain a total of 49,707 unique coordinates. Zoom in to see more detail. The background layer is from <a href="https://www.opencyclemap.org/">OpenCycleMap</a>.</p>
|
||||||
tags: "complex-geometry, closest-feature, igc, opencyclemap"
|
tags: "complex-geometry, closest-feature, igc, opencyclemap"
|
||||||
---
|
---
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
|
|||||||
@@ -85,10 +85,10 @@ var map = new ol.Map({
|
|||||||
new ol.layer.Tile({
|
new ol.layer.Tile({
|
||||||
source: new ol.source.OSM({
|
source: new ol.source.OSM({
|
||||||
attributions: [
|
attributions: [
|
||||||
'All maps © <a href="http://www.opencyclemap.org/">OpenCycleMap</a>',
|
'All maps © <a href="https://www.opencyclemap.org/">OpenCycleMap</a>',
|
||||||
ol.source.OSM.ATTRIBUTION
|
ol.source.OSM.ATTRIBUTION
|
||||||
],
|
],
|
||||||
url: 'http://{a-c}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png'
|
url: 'https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png'
|
||||||
})
|
})
|
||||||
}),
|
}),
|
||||||
new ol.layer.Vector({
|
new ol.layer.Vector({
|
||||||
|
|||||||
@@ -8,7 +8,7 @@ docs: >
|
|||||||
In this example, the <code>postcompose</code> listener applies a filter to the image data.</p>
|
In this example, the <code>postcompose</code> listener applies a filter to the image data.</p>
|
||||||
tags: "filter, image manipulation"
|
tags: "filter, image manipulation"
|
||||||
cloak:
|
cloak:
|
||||||
AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF: Your Bing Maps Key from http://www.bingmapsportal.com/ here
|
As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
|
||||||
---
|
---
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
<select id="kernel" name="kernel">
|
<select id="kernel" name="kernel">
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ goog.require('ol.layer.Tile');
|
|||||||
goog.require('ol.proj');
|
goog.require('ol.proj');
|
||||||
goog.require('ol.source.BingMaps');
|
goog.require('ol.source.BingMaps');
|
||||||
|
|
||||||
var key = 'AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF';
|
var key = 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5';
|
||||||
|
|
||||||
var imagery = new ol.layer.Tile({
|
var imagery = new ol.layer.Tile({
|
||||||
source: new ol.source.BingMaps({key: key, imagerySet: 'Aerial'})
|
source: new ol.source.BingMaps({key: key, imagerySet: 'Aerial'})
|
||||||
|
|||||||
@@ -78,7 +78,7 @@ Progress.prototype.hide = function() {
|
|||||||
var progress = new Progress(document.getElementById('progress'));
|
var progress = new Progress(document.getElementById('progress'));
|
||||||
|
|
||||||
var source = new ol.source.ImageWMS({
|
var source = new ol.source.ImageWMS({
|
||||||
url: 'http://demo.boundlessgeo.com/geoserver/wms',
|
url: 'https://ahocevar.com/geoserver/wms',
|
||||||
params: {'LAYERS': 'topp:states'},
|
params: {'LAYERS': 'topp:states'},
|
||||||
serverType: 'geoserver'
|
serverType: 'geoserver'
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ docs: >
|
|||||||
This example uses the <code>ol.format.KML</code> to parse KML for rendering with a vector source.
|
This example uses the <code>ol.format.KML</code> to parse KML for rendering with a vector source.
|
||||||
tags: "KML"
|
tags: "KML"
|
||||||
cloak:
|
cloak:
|
||||||
AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF: Your Bing Maps Key from http://www.bingmapsportal.com/ here
|
As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
|
||||||
---
|
---
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
<div id="info"> </div>
|
<div id="info"> </div>
|
||||||
|
|||||||
@@ -12,7 +12,7 @@ var projection = ol.proj.get('EPSG:3857');
|
|||||||
var raster = new ol.layer.Tile({
|
var raster = new ol.layer.Tile({
|
||||||
source: new ol.source.BingMaps({
|
source: new ol.source.BingMaps({
|
||||||
imagerySet: 'Aerial',
|
imagerySet: 'Aerial',
|
||||||
key: 'AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF'
|
key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5'
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -10,6 +10,6 @@ docs: >
|
|||||||
<p>Move around the map to see the effect. Use the ↑ up and ↓ down arrow keys to adjust the spyglass size.</p>
|
<p>Move around the map to see the effect. Use the ↑ up and ↓ down arrow keys to adjust the spyglass size.</p>
|
||||||
tags: "spy, image manipulation"
|
tags: "spy, image manipulation"
|
||||||
cloak:
|
cloak:
|
||||||
AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF: Your Bing Maps Key from http://www.bingmapsportal.com/ here
|
As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
|
||||||
---
|
---
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ goog.require('ol.layer.Tile');
|
|||||||
goog.require('ol.proj');
|
goog.require('ol.proj');
|
||||||
goog.require('ol.source.BingMaps');
|
goog.require('ol.source.BingMaps');
|
||||||
|
|
||||||
var key = 'AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF';
|
var key = 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5';
|
||||||
|
|
||||||
var roads = new ol.layer.Tile({
|
var roads = new ol.layer.Tile({
|
||||||
source: new ol.source.BingMaps({key: key, imagerySet: 'Road'})
|
source: new ol.source.BingMaps({key: key, imagerySet: 'Road'})
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ docs: >
|
|||||||
Example of a Layer swipe map.
|
Example of a Layer swipe map.
|
||||||
tags: "swipe, openstreetmap"
|
tags: "swipe, openstreetmap"
|
||||||
cloak:
|
cloak:
|
||||||
AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF: Your Bing Maps Key from http://www.bingmapsportal.com/ here
|
As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
|
||||||
---
|
---
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
<input id="swipe" type="range" style="width: 100%">
|
<input id="swipe" type="range" style="width: 100%">
|
||||||
|
|||||||
@@ -10,7 +10,7 @@ var osm = new ol.layer.Tile({
|
|||||||
});
|
});
|
||||||
var bing = new ol.layer.Tile({
|
var bing = new ol.layer.Tile({
|
||||||
source: new ol.source.BingMaps({
|
source: new ol.source.BingMaps({
|
||||||
key: 'AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF',
|
key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
|
||||||
imagerySet: 'Aerial'
|
imagerySet: 'Aerial'
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
|
|||||||
@@ -38,7 +38,7 @@ var styleFunction = function(feature) {
|
|||||||
image: new ol.style.Icon({
|
image: new ol.style.Icon({
|
||||||
src: 'data/arrow.png',
|
src: 'data/arrow.png',
|
||||||
anchor: [0.75, 0.5],
|
anchor: [0.75, 0.5],
|
||||||
rotateWithView: false,
|
rotateWithView: true,
|
||||||
rotation: -rotation
|
rotation: -rotation
|
||||||
})
|
})
|
||||||
}));
|
}));
|
||||||
|
|||||||
@@ -3,7 +3,7 @@ layout: example.html
|
|||||||
title: Localized OpenStreetMap
|
title: Localized OpenStreetMap
|
||||||
shortdesc: Example of a localized OpenStreetMap map with a custom tile server and a custom attribution.
|
shortdesc: Example of a localized OpenStreetMap map with a custom tile server and a custom attribution.
|
||||||
docs: >
|
docs: >
|
||||||
<p>The base layer is <a href="http://www.opencyclemap.org/">OpenCycleMap</a> with an overlay from <a href="http://www.openseamap.org/">OpenSeaMap</a>.
|
<p>The base layer is <a href="https://www.opencyclemap.org/">OpenCycleMap</a> with an overlay from <a href="http://www.openseamap.org/">OpenSeaMap</a>.
|
||||||
tags: "localized-openstreetmap, openseamap, openstreetmap"
|
tags: "localized-openstreetmap, openseamap, openstreetmap"
|
||||||
---
|
---
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
|
|||||||
@@ -8,10 +8,10 @@ goog.require('ol.source.OSM');
|
|||||||
var openCycleMapLayer = new ol.layer.Tile({
|
var openCycleMapLayer = new ol.layer.Tile({
|
||||||
source: new ol.source.OSM({
|
source: new ol.source.OSM({
|
||||||
attributions: [
|
attributions: [
|
||||||
'All maps © <a href="http://www.opencyclemap.org/">OpenCycleMap</a>',
|
'All maps © <a href="https://www.opencyclemap.org/">OpenCycleMap</a>',
|
||||||
ol.source.OSM.ATTRIBUTION
|
ol.source.OSM.ATTRIBUTION
|
||||||
],
|
],
|
||||||
url: 'http://{a-c}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png'
|
url: 'https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png'
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -22,7 +22,7 @@ var openSeaMapLayer = new ol.layer.Tile({
|
|||||||
ol.source.OSM.ATTRIBUTION
|
ol.source.OSM.ATTRIBUTION
|
||||||
],
|
],
|
||||||
opaque: false,
|
opaque: false,
|
||||||
url: 'http://tiles.openseamap.org/seamark/{z}/{x}/{y}.png'
|
url: 'https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png'
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -47,7 +47,7 @@ var map = new ol.Map({
|
|||||||
preload: Infinity,
|
preload: Infinity,
|
||||||
source: new ol.source.VectorTile({
|
source: new ol.source.VectorTile({
|
||||||
attributions: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> ' +
|
attributions: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> ' +
|
||||||
'© <a href="http://www.openstreetmap.org/copyright">' +
|
'© <a href="https://www.openstreetmap.org/copyright">' +
|
||||||
'OpenStreetMap contributors</a>',
|
'OpenStreetMap contributors</a>',
|
||||||
format: new ol.format.MVT(),
|
format: new ol.format.MVT(),
|
||||||
tileGrid: new ol.tilegrid.TileGrid({
|
tileGrid: new ol.tilegrid.TileGrid({
|
||||||
|
|||||||
@@ -20,7 +20,7 @@ var map = new ol.Map({
|
|||||||
new ol.layer.VectorTile({
|
new ol.layer.VectorTile({
|
||||||
source: new ol.source.VectorTile({
|
source: new ol.source.VectorTile({
|
||||||
attributions: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> ' +
|
attributions: '© <a href="https://www.mapbox.com/map-feedback/">Mapbox</a> ' +
|
||||||
'© <a href="http://www.openstreetmap.org/copyright">' +
|
'© <a href="https://www.openstreetmap.org/copyright">' +
|
||||||
'OpenStreetMap contributors</a>',
|
'OpenStreetMap contributors</a>',
|
||||||
format: new ol.format.MVT(),
|
format: new ol.format.MVT(),
|
||||||
tileGrid: ol.tilegrid.createXYZ({maxZoom: 22}),
|
tileGrid: ol.tilegrid.createXYZ({maxZoom: 22}),
|
||||||
|
|||||||
@@ -4,7 +4,7 @@ title: Full-Screen Mobile
|
|||||||
shortdesc: Example of a full screen map.
|
shortdesc: Example of a full screen map.
|
||||||
tags: "fullscreen, geolocation, mobile"
|
tags: "fullscreen, geolocation, mobile"
|
||||||
cloak:
|
cloak:
|
||||||
AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF: Your Bing Maps Key from http://www.bingmapsportal.com/ here
|
As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
|
||||||
---
|
---
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
|||||||
@@ -14,7 +14,7 @@ var map = new ol.Map({
|
|||||||
layers: [
|
layers: [
|
||||||
new ol.layer.Tile({
|
new ol.layer.Tile({
|
||||||
source: new ol.source.BingMaps({
|
source: new ol.source.BingMaps({
|
||||||
key: 'AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF',
|
key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
|
||||||
imagerySet: 'Road'
|
imagerySet: 'Road'
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -29,7 +29,7 @@ var styleFunction = (function() {
|
|||||||
color: 'rgba(0, 0, 255, 0.1)'
|
color: 'rgba(0, 0, 255, 0.1)'
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
styles['MultiLinestring'] = new ol.style.Style({
|
styles['MultiLineString'] = new ol.style.Style({
|
||||||
stroke: new ol.style.Stroke({
|
stroke: new ol.style.Stroke({
|
||||||
color: 'green',
|
color: 'green',
|
||||||
width: 3
|
width: 3
|
||||||
|
|||||||
@@ -42,7 +42,7 @@ var map = new ol.Map({
|
|||||||
attributions: attribution,
|
attributions: attribution,
|
||||||
format: format,
|
format: format,
|
||||||
tileGrid: tileGrid,
|
tileGrid: tileGrid,
|
||||||
url: 'https://vector.mapzen.com/osm/water/{z}/{x}/{y}.topojson?api_key=' + key
|
url: 'https://tile.mapzen.com/mapzen/vector/v1/water/{z}/{x}/{y}.topojson?api_key=' + key
|
||||||
}),
|
}),
|
||||||
style: new ol.style.Style({
|
style: new ol.style.Style({
|
||||||
fill: new ol.style.Fill({
|
fill: new ol.style.Fill({
|
||||||
@@ -55,7 +55,7 @@ var map = new ol.Map({
|
|||||||
attributions: attribution,
|
attributions: attribution,
|
||||||
format: format,
|
format: format,
|
||||||
tileGrid: tileGrid,
|
tileGrid: tileGrid,
|
||||||
url: 'https://vector.mapzen.com/osm/roads/{z}/{x}/{y}.topojson?api_key=' + key
|
url: 'https://tile.mapzen.com/mapzen/vector/v1/roads/{z}/{x}/{y}.topojson?api_key=' + key
|
||||||
}),
|
}),
|
||||||
style: function(feature) {
|
style: function(feature) {
|
||||||
var kind = feature.get('kind');
|
var kind = feature.get('kind');
|
||||||
@@ -89,7 +89,7 @@ var map = new ol.Map({
|
|||||||
attributions: attribution,
|
attributions: attribution,
|
||||||
format: format,
|
format: format,
|
||||||
tileGrid: tileGrid,
|
tileGrid: tileGrid,
|
||||||
url: 'https://vector.mapzen.com/osm/buildings/{z}/{x}/{y}.topojson?api_key=' + key
|
url: 'https://tile.mapzen.com/mapzen/vector/v1/buildings/{z}/{x}/{y}.topojson?api_key=' + key
|
||||||
}),
|
}),
|
||||||
style: function(f, resolution) {
|
style: function(f, resolution) {
|
||||||
return (resolution < 10) ? buildingStyle : null;
|
return (resolution < 10) ? buildingStyle : null;
|
||||||
|
|||||||
@@ -14,7 +14,7 @@ var overviewMapControl = new ol.control.OverviewMap({
|
|||||||
layers: [
|
layers: [
|
||||||
new ol.layer.Tile({
|
new ol.layer.Tile({
|
||||||
source: new ol.source.OSM({
|
source: new ol.source.OSM({
|
||||||
'url': 'http://{a-c}.tile.opencyclemap.org/cycle/{z}/{x}/{y}.png'
|
'url': 'https://{a-c}.tile.thunderforest.com/cycle/{z}/{x}/{y}.png'
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
],
|
],
|
||||||
|
|||||||
11
examples/pinch-zoom.html
Normal file
11
examples/pinch-zoom.html
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
---
|
||||||
|
layout: example.html
|
||||||
|
title: Pinch Zoom
|
||||||
|
shortdesc: Restrict pinch zooming to integer zoom levels.
|
||||||
|
docs: >
|
||||||
|
By default, the `ol.interaction.PinchZoom` can leave the map at fractional zoom levels.
|
||||||
|
If instead you want to constrain pinch zooming to integer zoom levels, set
|
||||||
|
<code>constrainResolution: true</code> when constructing the interaction.
|
||||||
|
tags: "pinch, zoom, interaction"
|
||||||
|
---
|
||||||
|
<div id="map" class="map"></div>
|
||||||
25
examples/pinch-zoom.js
Normal file
25
examples/pinch-zoom.js
Normal file
@@ -0,0 +1,25 @@
|
|||||||
|
goog.require('ol.Map');
|
||||||
|
goog.require('ol.View');
|
||||||
|
goog.require('ol.interaction');
|
||||||
|
goog.require('ol.interaction.PinchZoom');
|
||||||
|
goog.require('ol.layer.Tile');
|
||||||
|
goog.require('ol.source.OSM');
|
||||||
|
|
||||||
|
|
||||||
|
var map = new ol.Map({
|
||||||
|
interactions: ol.interaction.defaults({pinchZoom: false}).extend([
|
||||||
|
new ol.interaction.PinchZoom({
|
||||||
|
constrainResolution: true // force zooming to a integer zoom
|
||||||
|
})
|
||||||
|
]),
|
||||||
|
layers: [
|
||||||
|
new ol.layer.Tile({
|
||||||
|
source: new ol.source.OSM()
|
||||||
|
})
|
||||||
|
],
|
||||||
|
target: 'map',
|
||||||
|
view: new ol.View({
|
||||||
|
center: [0, 0],
|
||||||
|
zoom: 2
|
||||||
|
})
|
||||||
|
});
|
||||||
@@ -6,7 +6,7 @@ docs: >
|
|||||||
<p>The map on the top preloads low resolution tiles. The map on the bottom does not use any preloading. Try zooming out and panning to see the difference.</p>
|
<p>The map on the top preloads low resolution tiles. The map on the bottom does not use any preloading. Try zooming out and panning to see the difference.</p>
|
||||||
tags: "preload, bing"
|
tags: "preload, bing"
|
||||||
cloak:
|
cloak:
|
||||||
AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF: Your Bing Maps Key from http://www.bingmapsportal.com/ here
|
As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
|
||||||
---
|
---
|
||||||
<div id="map1" class="map"></div>
|
<div id="map1" class="map"></div>
|
||||||
<div id="map2" class="map"></div>
|
<div id="map2" class="map"></div>
|
||||||
|
|||||||
@@ -14,7 +14,7 @@ var map1 = new ol.Map({
|
|||||||
new ol.layer.Tile({
|
new ol.layer.Tile({
|
||||||
preload: Infinity,
|
preload: Infinity,
|
||||||
source: new ol.source.BingMaps({
|
source: new ol.source.BingMaps({
|
||||||
key: 'AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF',
|
key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
|
||||||
imagerySet: 'Aerial'
|
imagerySet: 'Aerial'
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
@@ -28,7 +28,7 @@ var map2 = new ol.Map({
|
|||||||
new ol.layer.Tile({
|
new ol.layer.Tile({
|
||||||
preload: 0, // default value
|
preload: 0, // default value
|
||||||
source: new ol.source.BingMaps({
|
source: new ol.source.BingMaps({
|
||||||
key: 'AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF',
|
key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
|
||||||
imagerySet: 'AerialWithLabels'
|
imagerySet: 'AerialWithLabels'
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -22,7 +22,7 @@ tags: "raster, pixel"
|
|||||||
resources:
|
resources:
|
||||||
- https://d3js.org/d3.v3.min.js
|
- https://d3js.org/d3.v3.min.js
|
||||||
cloak:
|
cloak:
|
||||||
AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF: Your Bing Maps Key from http://www.bingmapsportal.com/ here
|
As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
|
||||||
---
|
---
|
||||||
<div class="rel">
|
<div class="rel">
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
|
|||||||
@@ -50,7 +50,7 @@ function summarize(value, counts) {
|
|||||||
* Use aerial imagery as the input data for the raster source.
|
* Use aerial imagery as the input data for the raster source.
|
||||||
*/
|
*/
|
||||||
var bing = new ol.source.BingMaps({
|
var bing = new ol.source.BingMaps({
|
||||||
key: 'AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF',
|
key: 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5',
|
||||||
imagerySet: 'Aerial'
|
imagerySet: 'Aerial'
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -25,7 +25,7 @@ docs: >
|
|||||||
</p>
|
</p>
|
||||||
tags: "raster, region growing"
|
tags: "raster, region growing"
|
||||||
cloak:
|
cloak:
|
||||||
AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF: Your Bing Maps Key from http://www.bingmapsportal.com/ here
|
As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5: Your Bing Maps Key from http://www.bingmapsportal.com/ here
|
||||||
---
|
---
|
||||||
<div id="map" class="map" style="cursor: pointer"></div>
|
<div id="map" class="map" style="cursor: pointer"></div>
|
||||||
<table class="controls">
|
<table class="controls">
|
||||||
|
|||||||
@@ -72,7 +72,7 @@ function next4Edges(edge) {
|
|||||||
];
|
];
|
||||||
}
|
}
|
||||||
|
|
||||||
var key = 'AkGbxXx6tDWf1swIhPJyoAVp06H0s0gDTYslNWWHZ6RoPqMpB9ld5FY1WutX8UoF';
|
var key = 'As1HiMj1PvLPlqc_gtM7AqZfBL8ZL3VrjaS3zIb22Uvb9WKhuJObROC-qUpa81U5';
|
||||||
|
|
||||||
var imagery = new ol.layer.Tile({
|
var imagery = new ol.layer.Tile({
|
||||||
source: new ol.source.BingMaps({key: key, imagerySet: 'Aerial'})
|
source: new ol.source.BingMaps({key: key, imagerySet: 'Aerial'})
|
||||||
|
|||||||
@@ -5,10 +5,10 @@ shortdesc: Demonstrates client-side raster reprojection of OSM to arbitrary proj
|
|||||||
docs: >
|
docs: >
|
||||||
This example shows client-side raster reprojection capabilities from
|
This example shows client-side raster reprojection capabilities from
|
||||||
OSM (EPSG:3857) to arbitrary projection by searching
|
OSM (EPSG:3857) to arbitrary projection by searching
|
||||||
in <a href="http://epsg.io/">EPSG.io</a> database.
|
in <a href="https://epsg.io/">EPSG.io</a> database.
|
||||||
tags: "reprojection, projection, proj4js, epsg.io"
|
tags: "reprojection, projection, proj4js, epsg.io"
|
||||||
resources:
|
resources:
|
||||||
- https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.14/proj4.js
|
- https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.15/proj4.js
|
||||||
---
|
---
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
<form class="form-inline">
|
<form class="form-inline">
|
||||||
|
|||||||
@@ -63,7 +63,7 @@ function setProjection(code, name, proj4def, bbox) {
|
|||||||
|
|
||||||
function search(query) {
|
function search(query) {
|
||||||
resultSpan.innerHTML = 'Searching ...';
|
resultSpan.innerHTML = 'Searching ...';
|
||||||
fetch('http://epsg.io/?format=json&q=' + query).then(function(response) {
|
fetch('https://epsg.io/?format=json&q=' + query).then(function(response) {
|
||||||
return response.json();
|
return response.json();
|
||||||
}).then(function(json) {
|
}).then(function(json) {
|
||||||
var results = json['results'];
|
var results = json['results'];
|
||||||
|
|||||||
@@ -6,6 +6,6 @@ docs: >
|
|||||||
This example shows client-side reprojection of single image source.
|
This example shows client-side reprojection of single image source.
|
||||||
tags: "reprojection, projection, proj4js, image, imagestatic"
|
tags: "reprojection, projection, proj4js, image, imagestatic"
|
||||||
resources:
|
resources:
|
||||||
- https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.14/proj4.js
|
- https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.15/proj4.js
|
||||||
---
|
---
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
|
|||||||
@@ -21,7 +21,7 @@ var map = new ol.Map({
|
|||||||
}),
|
}),
|
||||||
new ol.layer.Image({
|
new ol.layer.Image({
|
||||||
source: new ol.source.ImageStatic({
|
source: new ol.source.ImageStatic({
|
||||||
url: 'http://upload.wikimedia.org/wikipedia/commons/thumb/1/18/' +
|
url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/18/' +
|
||||||
'British_National_Grid.svg/2000px-British_National_Grid.svg.png',
|
'British_National_Grid.svg/2000px-British_National_Grid.svg.png',
|
||||||
crossOrigin: '',
|
crossOrigin: '',
|
||||||
projection: 'EPSG:27700',
|
projection: 'EPSG:27700',
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ docs: >
|
|||||||
This example shows client-side raster reprojection between various projections.
|
This example shows client-side raster reprojection between various projections.
|
||||||
tags: "reprojection, projection, proj4js, osm, wms, wmts, hidpi"
|
tags: "reprojection, projection, proj4js, osm, wms, wmts, hidpi"
|
||||||
resources:
|
resources:
|
||||||
- https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.14/proj4.js
|
- https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.15/proj4.js
|
||||||
---
|
---
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
<form class="form-inline">
|
<form class="form-inline">
|
||||||
|
|||||||
@@ -69,7 +69,7 @@ layers['osm'] = new ol.layer.Tile({
|
|||||||
|
|
||||||
layers['wms4326'] = new ol.layer.Tile({
|
layers['wms4326'] = new ol.layer.Tile({
|
||||||
source: new ol.source.TileWMS({
|
source: new ol.source.TileWMS({
|
||||||
url: 'http://demo.boundlessgeo.com/geoserver/wms',
|
url: 'https://ahocevar.com/geoserver/wms',
|
||||||
crossOrigin: '',
|
crossOrigin: '',
|
||||||
params: {
|
params: {
|
||||||
'LAYERS': 'ne:NE1_HR_LC_SR_W_DR'
|
'LAYERS': 'ne:NE1_HR_LC_SR_W_DR'
|
||||||
@@ -93,7 +93,7 @@ layers['wms21781'] = new ol.layer.Tile({
|
|||||||
});
|
});
|
||||||
|
|
||||||
var parser = new ol.format.WMTSCapabilities();
|
var parser = new ol.format.WMTSCapabilities();
|
||||||
var url = 'http://map1.vis.earthdata.nasa.gov/wmts-arctic/' +
|
var url = 'https://map1.vis.earthdata.nasa.gov/wmts-arctic/' +
|
||||||
'wmts.cgi?SERVICE=WMTS&request=GetCapabilities';
|
'wmts.cgi?SERVICE=WMTS&request=GetCapabilities';
|
||||||
fetch(url).then(function(response) {
|
fetch(url).then(function(response) {
|
||||||
return response.text();
|
return response.text();
|
||||||
@@ -129,7 +129,7 @@ for (var i = 0, ii = resolutions.length; i < ii; ++i) {
|
|||||||
|
|
||||||
layers['states'] = new ol.layer.Tile({
|
layers['states'] = new ol.layer.Tile({
|
||||||
source: new ol.source.TileWMS({
|
source: new ol.source.TileWMS({
|
||||||
url: 'http://demo.boundlessgeo.com/geoserver/wms',
|
url: 'https://ahocevar.com/geoserver/wms',
|
||||||
crossOrigin: '',
|
crossOrigin: '',
|
||||||
params: {'LAYERS': 'topp:states', 'TILED': true},
|
params: {'LAYERS': 'topp:states', 'TILED': true},
|
||||||
serverType: 'geoserver',
|
serverType: 'geoserver',
|
||||||
|
|||||||
@@ -6,6 +6,6 @@ docs: >
|
|||||||
This example shows client-side reprojection of OpenStreetMap to NAD83 Indiana East, including a ScaleLine control with US units.
|
This example shows client-side reprojection of OpenStreetMap to NAD83 Indiana East, including a ScaleLine control with US units.
|
||||||
tags: "reprojection, projection, openstreetmap, nad83, tile, scaleline"
|
tags: "reprojection, projection, openstreetmap, nad83, tile, scaleline"
|
||||||
resources:
|
resources:
|
||||||
- https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.14/proj4.js
|
- https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.15/proj4.js
|
||||||
---
|
---
|
||||||
<div id="map" class="map"></div>
|
<div id="map" class="map"></div>
|
||||||
|
|||||||
9
examples/sea-level.css
Normal file
9
examples/sea-level.css
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
#level {
|
||||||
|
display: inline-block;
|
||||||
|
width: 150px;
|
||||||
|
vertical-align: text-bottom;
|
||||||
|
}
|
||||||
|
|
||||||
|
a.location {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
26
examples/sea-level.html
Normal file
26
examples/sea-level.html
Normal file
@@ -0,0 +1,26 @@
|
|||||||
|
---
|
||||||
|
layout: example.html
|
||||||
|
title: Sea Level
|
||||||
|
shortdesc: Render sea level at different elevations
|
||||||
|
docs: >
|
||||||
|
<p>
|
||||||
|
This example uses a <code>ol.source.Raster</code> with
|
||||||
|
<a href="https://www.mapbox.com/blog/terrain-rgb/">Mapbox Terrain-RGB tiles</a>
|
||||||
|
to "flood" areas below the elevation shown on the sea level slider.
|
||||||
|
</p>
|
||||||
|
tags: "raster, pixel operation, flood"
|
||||||
|
cloak:
|
||||||
|
pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg: Your Mapbox access token from http://mapbox.com/ here
|
||||||
|
---
|
||||||
|
<div id="map" class="map"></div>
|
||||||
|
<label>
|
||||||
|
Sea level
|
||||||
|
<input id="level" type="range" min="0" max="100" value="1"/>
|
||||||
|
+<span id="output"></span> m
|
||||||
|
</label>
|
||||||
|
<br>
|
||||||
|
Go to
|
||||||
|
<a class="location" data-center="-122.3267,37.8377" data-zoom="11">San Francisco</a>,
|
||||||
|
<a class="location" data-center="-73.9338,40.6861" data-zoom="11">New York</a>,
|
||||||
|
<a class="location" data-center="72.9481,18.9929" data-zoom="11">Mumbai</a>, or
|
||||||
|
<a class="location" data-center="120.831,31.160" data-zoom="9">Shanghai</a>
|
||||||
78
examples/sea-level.js
Normal file
78
examples/sea-level.js
Normal file
@@ -0,0 +1,78 @@
|
|||||||
|
// NOCOMPILE
|
||||||
|
goog.require('ol.Map');
|
||||||
|
goog.require('ol.View');
|
||||||
|
goog.require('ol.layer.Image');
|
||||||
|
goog.require('ol.layer.Tile');
|
||||||
|
goog.require('ol.proj');
|
||||||
|
goog.require('ol.source.Raster');
|
||||||
|
goog.require('ol.source.XYZ');
|
||||||
|
|
||||||
|
function flood(pixels, data) {
|
||||||
|
var pixel = pixels[0];
|
||||||
|
if (pixel[3]) {
|
||||||
|
var height = -10000 + ((pixel[0] * 256 * 256 + pixel[1] * 256 + pixel[2]) * 0.1);
|
||||||
|
if (height <= data.level) {
|
||||||
|
pixel[0] = 145;
|
||||||
|
pixel[1] = 175;
|
||||||
|
pixel[2] = 186;
|
||||||
|
pixel[3] = 255;
|
||||||
|
} else {
|
||||||
|
pixel[3] = 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return pixel;
|
||||||
|
}
|
||||||
|
|
||||||
|
var key = 'pk.eyJ1IjoidHNjaGF1YiIsImEiOiJjaW5zYW5lNHkxMTNmdWttM3JyOHZtMmNtIn0.CDIBD8H-G2Gf-cPkIuWtRg';
|
||||||
|
var elevation = new ol.source.XYZ({
|
||||||
|
url: 'https://api.mapbox.com/v4/mapbox.terrain-rgb/{z}/{x}/{y}.pngraw?access_token=' + key,
|
||||||
|
crossOrigin: 'anonymous'
|
||||||
|
});
|
||||||
|
|
||||||
|
var raster = new ol.source.Raster({
|
||||||
|
sources: [elevation],
|
||||||
|
operation: flood
|
||||||
|
});
|
||||||
|
|
||||||
|
var map = new ol.Map({
|
||||||
|
target: 'map',
|
||||||
|
layers: [
|
||||||
|
new ol.layer.Tile({
|
||||||
|
source: new ol.source.XYZ({
|
||||||
|
url: 'https://api.mapbox.com/styles/v1/tschaub/ciutc102t00c62js5fqd47kqw/tiles/256/{z}/{x}/{y}?access_token=' + key
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
new ol.layer.Image({
|
||||||
|
opacity: 0.6,
|
||||||
|
source: raster
|
||||||
|
})
|
||||||
|
],
|
||||||
|
view: new ol.View({
|
||||||
|
center: ol.proj.fromLonLat([-122.3267, 37.8377]),
|
||||||
|
zoom: 11
|
||||||
|
})
|
||||||
|
});
|
||||||
|
|
||||||
|
var control = document.getElementById('level');
|
||||||
|
var output = document.getElementById('output');
|
||||||
|
control.addEventListener('input', function() {
|
||||||
|
output.innerText = control.value;
|
||||||
|
raster.changed();
|
||||||
|
});
|
||||||
|
output.innerText = control.value;
|
||||||
|
|
||||||
|
raster.on('beforeoperations', function(event) {
|
||||||
|
event.data.level = control.value;
|
||||||
|
});
|
||||||
|
|
||||||
|
var locations = document.getElementsByClassName('location');
|
||||||
|
for (var i = 0, ii = locations.length; i < ii; ++i) {
|
||||||
|
locations[i].addEventListener('click', relocate);
|
||||||
|
}
|
||||||
|
|
||||||
|
function relocate(event) {
|
||||||
|
var data = event.target.dataset;
|
||||||
|
var view = map.getView();
|
||||||
|
view.setCenter(ol.proj.fromLonLat(data.center.split(',').map(Number)));
|
||||||
|
view.setZoom(Number(data.zoom));
|
||||||
|
}
|
||||||
@@ -18,5 +18,13 @@ tags: "select, vector"
|
|||||||
<option value="altclick">Alt+Click</option>
|
<option value="altclick">Alt+Click</option>
|
||||||
<option value="none">None</option>
|
<option value="none">None</option>
|
||||||
</select>
|
</select>
|
||||||
<span id="status"> 0 selected features</span>
|
<span id="status"> 0 selected features</span>
|
||||||
|
<br />
|
||||||
|
<label>Hit tolerance for selecting features </label>
|
||||||
|
<select id="hitTolerance" class="form-control">
|
||||||
|
<option value="0" selected>0 Pixels</option>
|
||||||
|
<option value="5">5 Pixels</option>
|
||||||
|
<option value="10">10 Pixels</option>
|
||||||
|
</select>
|
||||||
|
<canvas id="circle" style="vertical-align: middle"/>
|
||||||
</form>
|
</form>
|
||||||
|
|||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user