archive-gh-me/ol-ext
1
0
Fork 0
mirror of https://github.com/Viglino/ol-ext.git synced 2026-02-01 17:46:22 +00:00
Code Issues Projects Releases Wiki Activity

[RFC] moving to ES6 classes / ol7

Browse Source
This commit is contained in:
Viglino 2022-08-31 08:35:16 +02:00
parent b21f49523f
commit f3fc4c70a5
23 changed files with 2472 additions and 2323 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

203
dist/ol-ext.css vendored
View File

@ -766,69 +766,70 @@ body > .ol-ext-dialog > form {
max-width:100%;
}
.ol-control.ol-bookmark
{ top: 0.5em;
left: 3em;
.ol-control.ol-bookmark {
top: 0.5em;
left: 3em;
background-color: rgba(255,255,255,.5);
}
.ol-control.ol-bookmark button
{ position: relative;
.ol-control.ol-bookmark button {
position: relative;
}
.ol-control.ol-bookmark > button::before
{ content: "";
position: absolute;
border-width: 10px 5px 4px;
border-style: solid;
border-color: #fff;
border-bottom-color: transparent;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
height: 0;
.ol-control.ol-bookmark > button::before {
content: "";
position: absolute;
border-width: 10px 5px 4px;
border-style: solid;
border-color: currentColor;
border-bottom-color: transparent;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
height: 0;
}
.ol-control.ol-bookmark > div
{ display: none;
min-width: 5em;
.ol-control.ol-bookmark > div {
display: none;
min-width: 5em;
}
.ol-control.ol-bookmark input
{ font-size: 0.9em;
margin: 0.1em 0 ;
padding: 0 0.5em;
.ol-control.ol-bookmark input {
font-size: 0.9em;
margin: 0.1em 0 ;
padding: 0 0.5em;
}
.ol-control.ol-bookmark ul
{ margin:0;
padding: 0;
list-style: none;
min-width: 10em;
.ol-control.ol-bookmark ul {
margin:0;
padding: 0;
list-style: none;
min-width: 10em;
}
.ol-control.ol-bookmark li
{ color: rgba(0,60,136,0.8);
font-size: 0.9em;
padding: 0 0.2em 0 0.5em;
cursor: default;
clear:both;
.ol-control.ol-bookmark li {
color: rgba(0,60,136,0.8);
font-size: 0.9em;
padding: 0 0.2em 0 0.5em;
cursor: default;
clear:both;
}
.ol-control.ol-bookmark li:hover
{ background-color: rgba(0,60,136,.5);
color: #fff;
.ol-control.ol-bookmark li:hover {
background-color: rgba(0,60,136,.5);
color: #fff;
}
.ol-control.ol-bookmark > div button
{ width: 1em;
height: 0.8em;
float: right;
background-color: transparent;
cursor: pointer;
border-radius: 0;
.ol-control.ol-bookmark > div button {
width: 1em;
height: 0.8em;
float: right;
background-color: transparent;
cursor: pointer;
border-radius: 0;
}
.ol-control.ol-bookmark > div button:before
{ content: "\2A2F";
color: #936;
font-size: 1.2em;
line-height: 1em;
border-radius: 0;
.ol-control.ol-bookmark > div button:before {
content: "\2A2F";
color: #936;
font-size: 1.2em;
line-height: 1em;
border-radius: 0;
position: absolute;
top: 50%;
left: 50%;
@ -837,12 +838,12 @@ body > .ol-ext-dialog > form {
}
.ol-bookmark ul li button,
.ol-bookmark input
{ display: none;
.ol-bookmark input {
display: none;
}
.ol-bookmark.ol-editable ul li button,
.ol-bookmark.ol-editable input
{ display: block;
.ol-bookmark.ol-editable input {
display: block;
}
@ -2686,19 +2687,50 @@ ul.ol-legend li div {
top:2px;
}
.ol-permalink
{ position: absolute;
top:0.5em;
right: 2.5em;
.ol-permalink {
position: absolute;
top:0.5em;
right: 2.5em;
}
.ol-touch .ol-permalink
{ right: 3em;
.ol-touch .ol-permalink {
right: 3em;
}
.ol-permalink button
{ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AcFBjYE1ZK03gAAAUlJREFUOMuVk71KA1EQhc/NaiP+gCRpFHwGBSFlCrFVfAsbwSJCBMv06QIGJOBziI3EYAgkjU8gIloIAasIn4WzMqx34zrN7J6de+6ZmbNSgQDSfADcATPgHbgCyvonSYv8KEzWdofegH3gwmG9Ikq67sAESFzNueHThTyiEIKAmr2OJCUhhO30Aou+5aUQU2Ik65K2JC1KegohPGfUBkmvksqShnntHEcGOs60NXHfjmKz6czZTsNqbhzW+muwY2ATWAWawCOwBgxcTfvnvCPxKx4Cy5bPgBWgauRpdL2ImNlGhp3MabETm8mh94nDk4yCNE5/KTGg7xxbyhYAG0AN2AEqURIDZ0a0Fxn+LXAPXDpzRqMk6cOedz1ubdYl1b6NHgZRJe72nuu/CdSBl+yKi/zZlTnbaeXOJIesClwDU+ATeEhtX5TkCwAWUyAsHH1QAAAAAElFTkSuQmCC');
background-position: center;
background-repeat: no-repeat;
.ol-permalink button i {
position: absolute;
width: 1em;
height: 1em;
display: block;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.ol-permalink button i:before {
content: '\2197';
position: absolute;
border: 1px solid currentColor;
left: 0;
top: 0;
width: 0.3em;
height: 1em;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-width: 1px 0 0 1px;
padding: 0 0.2em;
}
.ol-permalink button i:after {
content: '';
position: absolute;
border: 1px solid currentColor;
right: 0;
bottom: 0;
width: 1em;
height: 0.3em;
-webkit-box-sizing: border-box;
box-sizing: border-box;
border-width: 0 1px 1px 0;
padding: 0.2em;
}
.ol-control.ol-print {
top:.5em;
@ -3117,10 +3149,33 @@ ul.ol-legend li div {
.ol-profil button {
display: block;
position: absolute;
right: 2px;
background-position: center;
background-repeat: no-repeat;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAPCAYAAAALWoRrAAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AgXCR4dn7j9TAAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAz0lEQVQ4y7WTMU4CURRFz0xIpLUBEhdAY2tJYW1jaWlsXYVxDWyBhWCFCYugYgnDFPMOhTMJGf3AwHiqn/uTk5v/3gfAH6b0RH7sMiIe1Ts162z+q2lVVbd1XqijLuJk0zzP1/VxCGyApLgsy+HJphGx8DeFOm6L1bn6eVQaEW+m2amTRqx+1fkqKY2Ie0+zUx/U7WGYfNMsy57PmMMN8A1MWsWeUoPyivV8PWtPOzL7D+lYHfUtBXgHGLTCJfBxodD6k9Dsm8BLE17LobQ39nJC61aLVoVsAAAAAElFTkSuQmCC');
right: 0;
overflow: hidden;
}
.ol-profil button i {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 1em;
height: 1em;
overflow: hidden;
}
.ol-profil button i:before,
.ol-profil button i:after {
content: "";
position: absolute;
display: block;
background-color: currentColor;
width: 1em;
height: .9em;
-webkit-transform: scaleX(.8) translate(-.25em, .5em) rotate(45deg);
transform: scaleX(.8) translate(-.25em, .5em) rotate(45deg);
}
.ol-profil button i:after {
-webkit-transform: scaleX(.8) translate(.35em, .7em) rotate(45deg);
transform: scaleX(.8) translate(.35em, .7em) rotate(45deg);
}
.ol-profil.ol-collapsed button {
@ -4114,17 +4169,17 @@ ul.ol-legend li div {
bottom: 25%;
left: 50%;
width: 2px;
background: rgba(255,255,255,0.8);
background: currentColor;
transform: translate(-1px, 0);
-webkit-transform: translate(-1px, 0);
}
.ol-swipe button:after {
transform: translateX(5px);
-webkit-transform: translateX(5px);
-webkit-transform: translateX(4px);
transform: translateX(4px);
}
.ol-swipe button:before {
transform: translateX(-7px);
-webkit-transform: translateX(-7px);
-webkit-transform: translateX(-6px);
transform: translateX(-6px);
}
.ol-control.ol-timeline {

1952
dist/ol-ext.js vendored
View File

File diff suppressed because it is too large Load Diff

2
dist/ol-ext.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/ol-ext.min.js vendored
View File

File diff suppressed because one or more lines are too long

127
examples/control/map.control.geobookmark.html
View File

@ -1,85 +1,82 @@
<!DOCTYPE html>
<html>
<head>
<title>ol-ext: Control GeoBookmark</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="ol.control.Geobookmark add a control to handle bookmarks." />
<meta name="keywords" content="ol3, control, bookmark, place" />
<title>ol-ext: Control GeoBookmark</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="ol.control.Geobookmark add a control to handle bookmarks." />
<meta name="keywords" content="ol3, control, bookmark, place" />
<!-- jQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- jQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- Openlayers -->
<link rel="stylesheet" href="https://openlayers.org/en/v6.15.1/css/ol.css" />
<script type="text/javascript" src="https://openlayers.org/en/v6.15.1/build/ol.js"></script>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>
<!-- ol-ext -->
<!-- Openlayers -->
<link rel="stylesheet" href="https://openlayers.org/en/latest/legacy/ol.css" />
<script type="text/javascript" src="https://openlayers.org/en/latest/legacy/ol.js"></script>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>
<!-- ol-ext -->
<link rel="stylesheet" href="../../dist/ol-ext.css" />
<script type="text/javascript" src="../../dist/ol-ext.js"></script>
<!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
<script src="https://unpkg.com/elm-pep"></script>
<!-- -->
<link rel="stylesheet" href="../style.css" />
<!-- -->
<link rel="stylesheet" href="../style.css" />
<style>
</style>
</head>
</head>
<body >
<a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>
<a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>
<a href="../../index.html">
<h1>GeoBookmark control</h1>
</a>
<div class="info">
<i>ol.control.GeoBookmark</i> adds a control to handle geo bookmarks, ie. save places.
<ul>
<li>
The <i>editable</i> option enable modification (add or delate bookmarks)
</li>
<li>
You can define permanet bookmarks that can't be deleted
</li>
</ul>
GeoBookmarks are stored in the localStorage.
</div>
<a href="../../index.html">
<h1>GeoBookmark control</h1>
</a>
<div class="info">
<i>ol.control.GeoBookmark</i> adds a control to handle geo bookmarks, ie. save places.
<ul>
<li>
The <i>editable</i> option enable modification (add or delate bookmarks)
</li>
<li>
You can define permanet bookmarks that can't be deleted
</li>
</ul>
GeoBookmarks are stored in the localStorage.
</div>
<!-- DIV pour la carte -->
<div id="map" style="width:600px; height:400px;"></div>
<!-- DIV pour la carte -->
<div id="map" style="width:600px; height:400px;"></div>
<div class="options">
<ul>
<li>
<label><input type="checkbox" checked="checked" onchange="bm.set('editable',$(this).prop('checked'));" /> editable</label>
</li>
</ul>
</div>
<script type="text/javascript">
// The map
var map = new ol.Map
({ target: 'map',
view: new ol.View ({ zoom: 13, center: [649083, 5408224] }),
layers: [new ol.layer.Tile({ source: new ol.source.Stamen({ layer: 'watercolor' }) })]
});
<div class="options">
<ul>
<li>
<label><input type="checkbox" checked="checked" onchange="bm.set('editable',$(this).prop('checked'));" /> editable</label>
</li>
</ul>
</div>
<script type="text/javascript">
// The map
var map = new ol.Map({
target: 'map',
view: new ol.View ({ zoom: 13, center: [649083, 5408224] }),
layers: [new ol.layer.Tile({ source: new ol.source.Stamen({ layer: 'watercolor' }) })]
});
var bm = new ol.control.GeoBookmark({ marks:
{ Paris: {pos:ol.proj.transform([2.351828, 48.856578], 'EPSG:4326', 'EPSG:3857'), zoom:11, permanent: true },
London: {pos:ol.proj.transform([-0.1275,51.507222], 'EPSG:4326', 'EPSG:3857'), zoom:11, permanent: true },
Geneve: {pos:ol.proj.transform([6.149985,46.200013], 'EPSG:4326', 'EPSG:3857'), zoom:13, permanent: true },
Bruxelles: {pos:ol.proj.transform([4.35,50.83], 'EPSG:4326', 'EPSG:3857'), zoom:12, permanent: true },
Berlin: {pos:ol.proj.transform([13.383333,52.516667], 'EPSG:4326', 'EPSG:3857'), zoom:12, permanent: true },
Madrid: {pos:ol.proj.transform([-3.683333,40.433333], 'EPSG:4326', 'EPSG:3857'), zoom:12 },
Roma: {pos:ol.proj.transform([12.48657,41.888732], 'EPSG:4326', 'EPSG:3857'), zoom:12 },
}
});
map.addControl(bm);
var bm = new ol.control.GeoBookmark({
marks: {
Paris: {pos:ol.proj.transform([2.351828, 48.856578], 'EPSG:4326', 'EPSG:3857'), zoom:11, permanent: true },
London: {pos:ol.proj.transform([-0.1275,51.507222], 'EPSG:4326', 'EPSG:3857'), zoom:11, permanent: true },
Geneve: {pos:ol.proj.transform([6.149985,46.200013], 'EPSG:4326', 'EPSG:3857'), zoom:13, permanent: true },
Bruxelles: {pos:ol.proj.transform([4.35,50.83], 'EPSG:4326', 'EPSG:3857'), zoom:12, permanent: true },
Berlin: {pos:ol.proj.transform([13.383333,52.516667], 'EPSG:4326', 'EPSG:3857'), zoom:12, permanent: true },
Madrid: {pos:ol.proj.transform([-3.683333,40.433333], 'EPSG:4326', 'EPSG:3857'), zoom:12 },
Roma: {pos:ol.proj.transform([12.48657,41.888732], 'EPSG:4326', 'EPSG:3857'), zoom:12 },
}
});
map.addControl(bm);
</script>
</script>
</body>
</html>

246
examples/control/map.control.globe.html
View File

@ -1,148 +1,144 @@
<!DOCTYPE html>
<html>
<head>
<!----------------------------------------------------------
<!--
Copyright (c) 2015 Jean-Marc VIGLINO,
released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
-->
<title>ol-ext: Globe control</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Copyright (c) 2015 Jean-Marc VIGLINO,
released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
<!-- jQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
------------------------------------------------------------>
<title>ol-ext: Globe control</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- jQuery -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- Openlayers -->
<link rel="stylesheet" href="https://openlayers.org/en/v6.15.1/css/ol.css" />
<script type="text/javascript" src="https://openlayers.org/en/v6.15.1/build/ol.js"></script>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>
<!-- ol-ext -->
<!-- Openlayers -->
<link rel="stylesheet" href="https://openlayers.org/en/latest/legacy/ol.css" />
<script type="text/javascript" src="https://openlayers.org/en/latest/legacy/ol.js"></script>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>
<!-- ol-ext -->
<link rel="stylesheet" href="../../dist/ol-ext.css" />
<script type="text/javascript" src="../../dist/ol-ext.js"></script>
<!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
<script src="https://unpkg.com/elm-pep"></script>
<link rel="stylesheet" href="../style.css" />
<link rel="stylesheet" href="../style.css" />
</head>
<body>
<a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>
<a href="https://github.com/Viglino/ol-ext" class="icss-github-corner"><i></i></a>
<a href="../../index.html">
<h1>ol-ext: Globe control</h1>
</a>
<div class="info">
The <i>ol.control.Globe</i> add a small globe on the map to display a position marker</i>.
</div>
<a href="../../index.html">
<h1>ol-ext: Globe control</h1>
</a>
<div class="info">
The <i>ol.control.Globe</i> add a small globe on the map to display a position marker</i>.
</div>
<!-- the map -->
<div id="map" style="width:600px; height:400px;"></div>
<!-- the map -->
<div id="map" style="width:600px; height:400px;"></div>
<div class="options">
Layer:
<select onchange="setOVLayer(this)">
<option value="0" selected="selected">Vector</option>
<option value="1">OSM</option>
<option value="2">Stamen</option>
<option value="3">Mapbox</option>
</select>
<br />
<input id="follow" type="checkbox" onchange="ov.set('follow', $(this).prop('checked'));" /><label for="follow"> follow (when panning the map)</label>
<br />
Go to:
<button onclick="ov.setCenter([260516, 6253858]);">Paris</button>
<button onclick="ov.setCenter([-8238435, 4970406]);">New-York</button>
<button onclick="ov.setCenter([3120267, -3019639]);">Johannesburg</button>
<button onclick="ov.setCenter([12946521, 4856111]);">Beijing</button>
<button onclick="ov.setCenter([4117313, 7488805]);">Moscow</button>
<button onclick="ov.setCenter([15519012, 4245268]);">Tokyo</button>
<button onclick="ov.setCenter([16823948, -4007527]);">Sydney</button>
</div>
<div class="options">
Layer:
<select onchange="setOVLayer(this)">
<option value="0" selected="selected">Vector</option>
<option value="1">OSM</option>
<option value="2">Stamen</option>
<option value="3">Mapbox</option>
</select>
<br />
<input id="follow" type="checkbox" onchange="ov.set('follow', $(this).prop('checked'));" /><label for="follow"> follow (when panning the map)</label>
<br />
Go to:
<button onclick="ov.setCenter([260516, 6253858]);">Paris</button>
<button onclick="ov.setCenter([-8238435, 4970406]);">New-York</button>
<button onclick="ov.setCenter([3120267, -3019639]);">Johannesburg</button>
<button onclick="ov.setCenter([12946521, 4856111]);">Beijing</button>
<button onclick="ov.setCenter([4117313, 7488805]);">Moscow</button>
<button onclick="ov.setCenter([15519012, 4245268]);">Tokyo</button>
<button onclick="ov.setCenter([16823948, -4007527]);">Sydney</button>
</div>
<script type="text/javascript">
// The map
var map=new ol.Map
({
target: 'map',
view: new ol.View
({ zoom: 5,
center: [270148, 6247782]
}),
layers: [ new ol.layer.Tile({ source: new ol.source.Stamen({ layer: 'watercolor' }) }) ]
});
<script type="text/javascript">
// The map
var map=new ol.Map({
target: 'map',
view: new ol.View({
zoom: 5,
center: [270148, 6247782]
}),
layers: [ new ol.layer.Tile({ source: new ol.source.Stamen({ layer: 'watercolor' }) }) ]
});
// GeoJSON layer
var style = function(f) {
return [new ol.style.Style ({
fill: new ol.style.Fill({
color: (f.get('iso')=="US") ? 'red' : '#369'
})
})];
}
var vector = new ol.layer.Vector({
source: new ol.source.Vector({
url: '../data/worldpt.json',
projection: 'EPSG:3857',
format: new ol.format.GeoJSON()
}),
style: style
});
// Layers for the overview
var layers2 = [
vector,
new ol.layer.Tile({ source: new ol.source.OSM() }),
new ol.layer.Tile({
source: new ol.source.Stamen({
layer: 'toner'
})
}),
new ol.layer.Tile({
source: new ol.source.XYZ({
url: 'https://{a-d}.tiles.mapbox.com/v3/mapbox.natural-earth-2/{z}/{x}/{y}.png'
})
}),
/*
new ol.layer.Tile({
name: "Occupy streets",
source: new ol.source.XYZ(
{ url: 'https://{a-d}.tiles.mapbox.com/v3/occupy.occupy-streets/{z}/{x}/{y}.png'
})
}),
new ol.layer.Tile({
name: "pirate",
source: new ol.source.XYZ(
{ url: 'https://{a-d}.tiles.mapbox.com/v3/aj.Sketchy2/{z}/{x}/{y}.png'
})
}),
new ol.layer.Tile({
name: "Occupy streets",
source: new ol.source.XYZ(
{ url: 'https://{a-d}.tiles.mapbox.com/v3/occupy.occupy-streets/{z}/{x}/{y}.png'
})
}),
*/
];
// GeoJSON layer
var style = function(f)
{ return [new ol.style.Style ({
fill: new ol.style.Fill({
color: (f.get('iso')=="US") ? 'red' : '#369'
})
})];
}
var vector = new ol.layer.Vector(
{ source: new ol.source.Vector(
{ url: '../data/worldpt.json',
projection: 'EPSG:3857',
format: new ol.format.GeoJSON()
}),
style: style
});
// Layers for the overview
var layers2 =
[ vector,
new ol.layer.Tile({ source: new ol.source.OSM() }),
new ol.layer.Tile(
{ source: new ol.source.Stamen({
layer: 'toner'
})
}),
new ol.layer.Tile(
{ source: new ol.source.XYZ({
url: 'https://{a-d}.tiles.mapbox.com/v3/mapbox.natural-earth-2/{z}/{x}/{y}.png'
})
}),
/*
new ol.layer.Tile({
name: "Occupy streets",
source: new ol.source.XYZ(
{ url: 'https://{a-d}.tiles.mapbox.com/v3/occupy.occupy-streets/{z}/{x}/{y}.png'
})
}),
new ol.layer.Tile({
name: "pirate",
source: new ol.source.XYZ(
{ url: 'https://{a-d}.tiles.mapbox.com/v3/aj.Sketchy2/{z}/{x}/{y}.png'
})
}),
new ol.layer.Tile({
name: "Occupy streets",
source: new ol.source.XYZ(
{ url: 'https://{a-d}.tiles.mapbox.com/v3/occupy.occupy-streets/{z}/{x}/{y}.png'
})
}),
*/
];
// New control on the map
var ov = new ol.control.Globe({
layers: layers2,
follo: $("#follow").prop("checked"),
align: $("#align").val(),
panAnimation: "elastic"
});
map.addControl(ov);
// New control on the map
var ov = new ol.control.Globe(
{ layers: layers2,
follo: $("#follow").prop("checked"),
align: $("#align").val(),
panAnimation: "elastic"
});
map.addControl(ov);
// Options changes
function setOVLayer (e)
{ var l = ov.getGlobe().getLayers().getArray()
for (var i=0; i<l.length; i++) l[i].setVisible(false);
l[$(e).val()].setVisible(true);
}
setOVLayer(".options > select");
</script>
// Options changes
function setOVLayer (e) {
var l = ov.getGlobe().getLayers().getArray()
for (var i=0; i<l.length; i++) l[i].setVisible(false);
l[$(e).val()].setVisible(true);
}
setOVLayer(".options > select");
</script>
</body>
</html>

10
examples/control/map.control.notification.html
View File

@ -1,12 +1,10 @@
<!DOCTYPE html>
<html>
<head>
<!----------------------------------------------------------
<!--
Copyright (c) 2015-2018 Jean-Marc VIGLINO,
released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
------------------------------------------------------------>
-->
<title>ol-ext: Notification control</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
@ -19,8 +17,8 @@
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- Openlayers -->
<link rel="stylesheet" href="https://openlayers.org/en/v6.15.1/css/ol.css" />
<script type="text/javascript" src="https://openlayers.org/en/v6.15.1/build/ol.js"></script>
<link rel="stylesheet" href="https://openlayers.org/en/latest/legacy/ol.css" />
<script type="text/javascript" src="https://openlayers.org/en/latest/legacy/ol.js"></script>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>
<!-- ol-ext -->

4
examples/control/map.control.permalink.html
View File

@ -17,8 +17,8 @@
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- Openlayers -->
<link rel="stylesheet" href="https://openlayers.org/en/v6.15.1/css/ol.css" />
<script type="text/javascript" src="https://openlayers.org/en/v6.15.1/build/ol.js"></script>
<link rel="stylesheet" href="https://openlayers.org/en/latest/legacy/ol.css" />
<script type="text/javascript" src="https://openlayers.org/en/latest/legacy/ol.js"></script>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>
<!-- ol-ext -->

4
examples/control/map.control.profil.html
View File

@ -15,8 +15,8 @@
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- Openlayers -->
<link rel="stylesheet" href="https://openlayers.org/en/v6.15.1/css/ol.css" />
<script type="text/javascript" src="https://openlayers.org/en/v6.15.1/build/ol.js"></script>
<link rel="stylesheet" href="https://openlayers.org/en/latest/legacy/ol.css" />
<script type="text/javascript" src="https://openlayers.org/en/latest/legacy/ol.js"></script>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>
<!-- ol-ext -->

4
examples/control/map.control.swipe.html
View File

@ -17,8 +17,8 @@
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- Openlayers -->
<link rel="stylesheet" href="https://openlayers.org/en/v6.15.1/css/ol.css" />
<script type="text/javascript" src="https://openlayers.org/en/v6.15.1/build/ol.js"></script>
<link rel="stylesheet" href="https://openlayers.org/en/latest/legacy/ol.css" />
<script type="text/javascript" src="https://openlayers.org/en/latest/legacy/ol.js"></script>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>
<!-- ol-ext -->

4
examples/control/map.control.swipe2.html
View File

@ -17,8 +17,8 @@
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<!-- Openlayers -->
<link rel="stylesheet" href="https://openlayers.org/en/v6.15.1/css/ol.css" />
<script type="text/javascript" src="https://openlayers.org/en/v6.15.1/build/ol.js"></script>
<link rel="stylesheet" href="https://openlayers.org/en/latest/legacy/ol.css" />
<script type="text/javascript" src="https://openlayers.org/en/latest/legacy/ol.js"></script>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>
<!-- ol-ext -->

4
examples/control/map.overview.html
View File

@ -13,8 +13,8 @@
<!-- Openlayers -->
<link rel="stylesheet" href="https://openlayers.org/en/v6.15.1/css/ol.css" />
<script type="text/javascript" src="https://openlayers.org/en/v6.15.1/build/ol.js"></script>
<link rel="stylesheet" href="https://openlayers.org/en/latest/legacy/ol.css" />
<script type="text/javascript" src="https://openlayers.org/en/latest/legacy/ol.js"></script>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL,Object.assign"></script>
<!-- ol-ext -->

111
src/control/GeoBookmark.css
View File

@ -1,66 +1,67 @@
.ol-control.ol-bookmark
{ top: 0.5em;
left: 3em;
.ol-control.ol-bookmark {
top: 0.5em;
left: 3em;
background-color: rgba(255,255,255,.5);
}
.ol-control.ol-bookmark button
{ position: relative;
.ol-control.ol-bookmark button {
position: relative;
}
.ol-control.ol-bookmark > button::before
{ content: "";
position: absolute;
border-width: 10px 5px 4px;
border-style: solid;
border-color: #fff;
border-bottom-color: transparent;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
height: 0;
.ol-control.ol-bookmark > button::before {
content: "";
position: absolute;
border-width: 10px 5px 4px;
border-style: solid;
border-color: currentColor;
border-bottom-color: transparent;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
height: 0;
}
.ol-control.ol-bookmark > div
{ display: none;
min-width: 5em;
.ol-control.ol-bookmark > div {
display: none;
min-width: 5em;
}
.ol-control.ol-bookmark input
{ font-size: 0.9em;
margin: 0.1em 0 ;
padding: 0 0.5em;
.ol-control.ol-bookmark input {
font-size: 0.9em;
margin: 0.1em 0 ;
padding: 0 0.5em;
}
.ol-control.ol-bookmark ul
{ margin:0;
padding: 0;
list-style: none;
min-width: 10em;
.ol-control.ol-bookmark ul {
margin:0;
padding: 0;
list-style: none;
min-width: 10em;
}
.ol-control.ol-bookmark li
{ color: rgba(0,60,136,0.8);
font-size: 0.9em;
padding: 0 0.2em 0 0.5em;
cursor: default;
clear:both;
.ol-control.ol-bookmark li {
color: rgba(0,60,136,0.8);
font-size: 0.9em;
padding: 0 0.2em 0 0.5em;
cursor: default;
clear:both;
}
.ol-control.ol-bookmark li:hover
{ background-color: rgba(0,60,136,.5);
color: #fff;
.ol-control.ol-bookmark li:hover {
background-color: rgba(0,60,136,.5);
color: #fff;
}
.ol-control.ol-bookmark > div button
{ width: 1em;
height: 0.8em;
float: right;
background-color: transparent;
cursor: pointer;
border-radius: 0;
.ol-control.ol-bookmark > div button {
width: 1em;
height: 0.8em;
float: right;
background-color: transparent;
cursor: pointer;
border-radius: 0;
}
.ol-control.ol-bookmark > div button:before
{ content: "\2A2F";
color: #936;
font-size: 1.2em;
line-height: 1em;
border-radius: 0;
.ol-control.ol-bookmark > div button:before {
content: "\2A2F";
color: #936;
font-size: 1.2em;
line-height: 1em;
border-radius: 0;
position: absolute;
top: 50%;
left: 50%;
@ -69,11 +70,11 @@
}
.ol-bookmark ul li button,
.ol-bookmark input
{ display: none;
.ol-bookmark input {
display: none;
}
.ol-bookmark.ol-editable ul li button,
.ol-bookmark.ol-editable input
{ display: block;
.ol-bookmark.ol-editable input {
display: block;
}

372
src/control/GeoBookmark.js
View File

@ -1,4 +1,3 @@
import ol_ext_inherits from '../util/ext'
import ol_control_Control from 'ol/control/Control'
import ol_ext_element from '../util/element'
@ -26,206 +25,207 @@ var bm = new GeoBookmark ({
}
});
*/
var ol_control_GeoBookmark = function(options) {
options = options || {};
var self = this;
var ol_control_GeoBookmark = class olcontrolGeoBookmark extends ol_control_Control {
constructor(options) {
options = options || {};
var element = document.createElement('div');
if (options.target) {
element.className = options.className || "ol-bookmark";
} else {
element.className = (options.className || "ol-bookmark") +
" ol-unselectable ol-control ol-collapsed";
element.addEventListener("mouseleave", function() {
if (input !== document.activeElement) {
var element = document.createElement('div');
// Init
super({
element: element,
target: options.target
});
var self = this;
if (options.target) {
element.className = options.className || "ol-bookmark";
} else {
element.className = (options.className || "ol-bookmark") +
" ol-unselectable ol-control ol-collapsed";
element.addEventListener("mouseleave", function () {
if (input !== document.activeElement) {
menu.style.display = 'none';
}
});
// Show bookmarks on click
this.button = ol_ext_element.create('BUTTON', {
type: 'button',
title: options.title || 'Geobookmarks',
click: function () {
var show = (menu.style.display === '' || menu.style.display === 'none');
menu.style.display = (show ? 'block' : 'none');
if (show)
this.setBookmarks();
}.bind(this)
});
element.appendChild(this.button);
}
// The menu
var menu = document.createElement('div');
element.appendChild(menu);
var ul = document.createElement('ul');
menu.appendChild(ul);
var input = document.createElement('input');
input.setAttribute("placeholder", options.placeholder || "Add a new geomark...");
input.addEventListener("keydown", function (e) {
e.stopPropagation();
if (e.keyCode === 13) {
e.preventDefault();
var title = this.value;
if (title) {
self.addBookmark(title);
this.value = '';
self.dispatchEvent({
type: "add",
name: title
});
}
menu.style.display = 'none';
}
});
// Show bookmarks on click
this.button = ol_ext_element.create('BUTTON', {
type: 'button',
title: options.title || 'Geobookmarks',
click: function() {
var show = (menu.style.display === '' || menu.style.display === 'none');
menu.style.display = (show ? 'block': 'none');
if (show) this.setBookmarks();
}.bind(this)
});
element.appendChild(this.button);
}
// The menu
var menu = document.createElement('div');
element.appendChild(menu);
var ul = document.createElement('ul');
menu.appendChild(ul);
var input = document.createElement('input');
input.setAttribute("placeholder", options.placeholder || "Add a new geomark...")
input.addEventListener("keydown", function(e) {
e.stopPropagation();
if (e.keyCode === 13) {
e.preventDefault();
var title = this.value;
if (title) {
self.addBookmark(title);
this.value = '';
self.dispatchEvent({
type: "add",
name: title
});
}
input.addEventListener("blur", function () {
menu.style.display = 'none';
}
});
input.addEventListener("blur", function() {
menu.style.display = 'none';
});
menu.appendChild(input);
});
menu.appendChild(input);
// Init
ol_control_Control.call(this, {
element: element,
target: options.target
});
this.on("propertychange", function(e) {
if (e.key==='editable') {
element.className = element.className.replace(" ol-editable","");
if (this.get('editable')) {
element.className += " ol-editable";
this.on("propertychange", function (e) {
if (e.key === 'editable') {
element.className = element.className.replace(" ol-editable", "");
if (this.get('editable')) {
element.className += " ol-editable";
}
}
}
// console.log(e);
}.bind(this));
// console.log(e);
}.bind(this));
this.set("namespace", options.namespace || 'ol');
this.set("editable", options.editable !== false);
this.set('deleteTitle', options.deleteTitle || 'Suppr.');
this.set("namespace", options.namespace || 'ol');
this.set("editable", options.editable !== false);
this.set('deleteTitle', options.deleteTitle || 'Suppr.');
// Set default bmark
var bmark = {};
try {
if (localStorage[this.get('namespace')+"@bookmark"]) {
bmark = JSON.parse(localStorage[this.get('namespace')+"@bookmark"]);
}
} catch(e) { console.warn('Failed to access localStorage...'); }
if (options.marks) {
for (var i in options.marks) {
bmark[i] = options.marks[i];
}
}
this.setBookmarks(bmark);
};
ol_ext_inherits(ol_control_GeoBookmark, ol_control_Control);
/** Set bookmarks
* @param {} bmark a list of bookmarks, default retreave in the localstorage
* @example
bm.setBookmarks({
"Paris": {pos:_ol_proj_.transform([2.351828, 48.856578], 'EPSG:4326', 'EPSG:3857'), zoom:11, permanent: true },
"London": {pos:_ol_proj_.transform([-0.1275,51.507222], 'EPSG:4326', 'EPSG:3857'), zoom:12}
});
*/
ol_control_GeoBookmark.prototype.setBookmarks = function(bmark) {
if (!bmark) {
bmark = {};
// Set default bmark
var bmark = {};
try {
bmark = JSON.parse(localStorage[this.get('namespace')+"@bookmark"] || "{}");
} catch(e) { console.warn('Failed to access localStorage...'); }
}
var modify = this.get("editable");
var ul = this.element.querySelector("ul");
var menu = this.element.querySelector("div");
var self = this;
ul.innerHTML = '';
for (var b in bmark) {
var li = document.createElement('li');
li.textContent = b;
li.setAttribute('data-bookmark', JSON.stringify(bmark[b]));
li.setAttribute('data-name', b);
li.addEventListener('click', function() {
var bm = JSON.parse(this.getAttribute("data-bookmark"));
self.getMap().getView().setCenter(bm.pos);
self.getMap().getView().setZoom(bm.zoom);
self.getMap().getView().setRotation(bm.rot || 0);
menu.style.display = 'none';
self.dispatchEvent({ type: 'select', name: this.getAttribute("data-name"), bookmark: bm });
});
ul.appendChild(li);
if (modify && !bmark[b].permanent) {
var button = document.createElement('button');
button.setAttribute('data-name', b);
button.setAttribute('type', 'button');
button.setAttribute('title', this.get('deleteTitle') ||'Suppr.');
button.addEventListener('click', function(e) {
self.removeBookmark(this.getAttribute("data-name"));
self.dispatchEvent({ type: "remove", name: this.getAttribute("data-name") });
e.stopPropagation();
});
li.appendChild(button);
if (localStorage[this.get('namespace') + "@bookmark"]) {
bmark = JSON.parse(localStorage[this.get('namespace') + "@bookmark"]);
}
} catch (e) { console.warn('Failed to access localStorage...'); }
if (options.marks) {
for (var i in options.marks) {
bmark[i] = options.marks[i];
}
}
this.setBookmarks(bmark);
}
try {
localStorage[this.get('namespace')+"@bookmark"] = JSON.stringify(bmark);
} catch(e) { console.warn('Failed to access localStorage...'); }
};
/** Set bookmarks
* @param {} bmark a list of bookmarks, default retreave in the localstorage
* @example
bm.setBookmarks({
"Paris": {pos:_ol_proj_.transform([2.351828, 48.856578], 'EPSG:4326', 'EPSG:3857'), zoom:11, permanent: true },
"London": {pos:_ol_proj_.transform([-0.1275,51.507222], 'EPSG:4326', 'EPSG:3857'), zoom:12}
});
*/
setBookmarks(bmark) {
if (!bmark) {
bmark = {};
try {
bmark = JSON.parse(localStorage[this.get('namespace') + "@bookmark"] || "{}");
} catch (e) { console.warn('Failed to access localStorage...'); }
}
var modify = this.get("editable");
var ul = this.element.querySelector("ul");
var menu = this.element.querySelector("div");
var self = this;
/** Get Geo bookmarks
* @return {any} a list of bookmarks : { BM1:{pos:ol.coordinates, zoom: integer}, BM2:{pos:ol.coordinates, zoom: integer} }
*/
ol_control_GeoBookmark.prototype.getBookmarks = function() {
var bm = {};
try {
bm = JSON.parse(localStorage[this.get('namespace')+"@bookmark"] || "{}");
} catch(e) { console.warn('Failed to access localStorage...'); }
return bm;
};
/** Remove a Geo bookmark
* @param {string} name
*/
ol_control_GeoBookmark.prototype.removeBookmark = function(name) {
if (!name) {
return;
ul.innerHTML = '';
for (var b in bmark) {
var li = document.createElement('li');
li.textContent = b;
li.setAttribute('data-bookmark', JSON.stringify(bmark[b]));
li.setAttribute('data-name', b);
li.addEventListener('click', function () {
var bm = JSON.parse(this.getAttribute("data-bookmark"));
self.getMap().getView().setCenter(bm.pos);
self.getMap().getView().setZoom(bm.zoom);
self.getMap().getView().setRotation(bm.rot || 0);
menu.style.display = 'none';
self.dispatchEvent({ type: 'select', name: this.getAttribute("data-name"), bookmark: bm });
});
ul.appendChild(li);
if (modify && !bmark[b].permanent) {
var button = document.createElement('button');
button.setAttribute('data-name', b);
button.setAttribute('type', 'button');
button.setAttribute('title', this.get('deleteTitle') || 'Suppr.');
button.addEventListener('click', function (e) {
self.removeBookmark(this.getAttribute("data-name"));
self.dispatchEvent({ type: "remove", name: this.getAttribute("data-name") });
e.stopPropagation();
});
li.appendChild(button);
}
}
try {
localStorage[this.get('namespace') + "@bookmark"] = JSON.stringify(bmark);
} catch (e) { console.warn('Failed to access localStorage...'); }
}
var bmark = this.getBookmarks();
delete bmark[name];
this.setBookmarks(bmark);
};
/** Add a new Geo bookmark (replace existing one if any)
* @param {string} name name of the bookmark (display in the menu)
* @param {*} options
* @param {ol.coordinate} position default current position
* @param {number} zoom default current map zoom
* @param {number} rotation default current map rotation
* @param {bool} permanent prevent from deletion, default false
*/
ol_control_GeoBookmark.prototype.addBookmark = function(name, position, zoom, permanent) {
if (!name) return;
var options = position;
var rot;
if (options && options.position) {
zoom = options.zoom;
permanent = options.permanent;
rot = options.rotation ;
position = options.position;
} else {
rot = this.getMap().getView().getRotation();
/** Get Geo bookmarks
* @return {any} a list of bookmarks : { BM1:{pos:ol.coordinates, zoom: integer}, BM2:{pos:ol.coordinates, zoom: integer} }
*/
getBookmarks() {
var bm = {};
try {
bm = JSON.parse(localStorage[this.get('namespace') + "@bookmark"] || "{}");
} catch (e) { console.warn('Failed to access localStorage...'); }
return bm;
}
var bmark = this.getBookmarks();
// Don't override permanent bookmark
if (bmark[name] && bmark[name].permanent) return;
// Create or override
bmark[name] = {
pos: position || this.getMap().getView().getCenter(),
zoom: zoom || this.getMap().getView().getZoom(),
permanent: !!permanent
};
if (rot) {
bmark[name].rot = rot;
/** Remove a Geo bookmark
* @param {string} name
*/
removeBookmark(name) {
if (!name) {
return;
}
var bmark = this.getBookmarks();
delete bmark[name];
this.setBookmarks(bmark);
}
this.setBookmarks(bmark);
};
/** Add a new Geo bookmark (replace existing one if any)
* @param {string} name name of the bookmark (display in the menu)
* @param {*} options
* @param {ol.coordinate} position default current position
* @param {number} zoom default current map zoom
* @param {number} rotation default current map rotation
* @param {bool} permanent prevent from deletion, default false
*/
addBookmark(name, position, zoom, permanent) {
if (!name)
return;
var options = position;
var rot;
if (options && options.position) {
zoom = options.zoom;
permanent = options.permanent;
rot = options.rotation;
position = options.position;
} else {
rot = this.getMap().getView().getRotation();
}
var bmark = this.getBookmarks();
// Don't override permanent bookmark
if (bmark[name] && bmark[name].permanent)
return;
// Create or override
bmark[name] = {
pos: position || this.getMap().getView().getCenter(),
zoom: zoom || this.getMap().getView().getZoom(),
permanent: !!permanent
};
if (rot) {
bmark[name].rot = rot;
}
this.setBookmarks(bmark);
}
}
export default ol_control_GeoBookmark

275
src/control/Globe.js
View File

@ -1,9 +1,8 @@
/* Copyright (c) 2016 Jean-Marc VIGLINO,
released under the CeCILL-B license (French BSD license)
(http://www.cecill.info/licences/Licence_CeCILL-B_V1-en.txt).
released under the CeCILL-B license (French BSD license)
(http://www.cecill.info/licences/Licence_CeCILL-B_V1-en.txt).
*/
import ol_ext_inherits from '../util/ext'
import {unByKey as ol_Observable_unByKey} from 'ol/Observable'
import ol_control_Control from 'ol/control/Control'
import ol_Map from 'ol/Map'
@ -28,151 +27,149 @@ import ol_source_Vector from 'ol/source/Vector'
* @param {Array<ol.layer>} layers list of layers to display on the globe
* @param {ol.style.Style | Array.<ol.style.Style> | undefined} style style to draw the position on the map , default a marker
*/
var ol_control_Globe = function(opt_options)
{ var options = opt_options || {};
var self = this;
var ol_control_Globe = class olcontrolGlobe extends ol_control_Control {
constructor(opt_options) {
var options = opt_options || {}
var element = document.createElement('div');
super({
element: element,
target: options.target
})
// API
var element;
if (options.target)
{ element = document.createElement("div");
this.panel_ = options.target;
}
else
{ element = document.createElement("div");
element.classList.add('ol-globe', 'ol-unselectable', 'ol-control');
if (/top/.test(options.align)) element.classList.add('ol-control-top');
if (/right/.test(options.align)) element.classList.add('ol-control-right');
this.panel_ = document.createElement("div");
this.panel_.classList.add("panel")
element.appendChild(this.panel_);
this.pointer_ = document.createElement("div");
this.pointer_.classList.add("ol-pointer");
element.appendChild(this.pointer_);
}
var self = this
ol_control_Control.call(this,
{ element: element,
target: options.target
});
// API
if (options.target) {
this.panel_ = options.target
} else {
element.classList.add('ol-globe', 'ol-unselectable', 'ol-control')
if (/top/.test(options.align))
element.classList.add('ol-control-top')
if (/right/.test(options.align))
element.classList.add('ol-control-right')
this.panel_ = document.createElement("div")
this.panel_.classList.add("panel")
element.appendChild(this.panel_)
this.pointer_ = document.createElement("div")
this.pointer_.classList.add("ol-pointer")
element.appendChild(this.pointer_)
}
// http://openlayers.org/en/latest/examples/sphere-mollweide.html ???
// http://openlayers.org/en/latest/examples/sphere-mollweide.html ???
// Create a globe map
this.ovmap_ = new ol_Map({
controls: new ol_Collection(),
interactions: new ol_Collection(),
target: this.panel_,
view: new ol_View({
zoom: 0,
center: [0, 0]
}),
layers: options.layers
})
// Create a globe map
this.ovmap_ = new ol_Map(
{ controls: new ol_Collection(),
interactions: new ol_Collection(),
target: this.panel_,
view: new ol_View
({ zoom: 0,
center: [0,0]
}),
layers: options.layers
});
setTimeout(function () {
self.ovmap_.updateSize()
}, 0)
setTimeout (function()
{ self.ovmap_.updateSize();
}, 0);
this.set('follow', options.follow || false)
this.set('follow', options.follow || false);
// Cache extent
this.extentLayer = new ol_layer_Vector({
name: 'Cache extent',
source: new ol_source_Vector(),
style: options.style || [ new ol_style_Style({
image: new ol_style_Circle({
fill: new ol_style_Fill({
color: 'rgba(255,0,0, 1)'
}),
stroke: new ol_style_Stroke(
{
width: 7,
color: 'rgba(255,0,0, 0.8)'
}),
radius: 5
})
})]
})
this.ovmap_.addLayer(this.extentLayer)
}
/**
* Set the map instance the control associated with.
* @param {ol.Map} map The map instance.
*/
setMap(map) {
if (this._listener)
ol_Observable_unByKey(this._listener)
this._listener = null
// Cache extent
this.extentLayer = new ol_layer_Vector(
{ name: 'Cache extent',
source: new ol_source_Vector(),
style: options.style || [new ol_style_Style(
{ image: new ol_style_Circle(
{ fill: new ol_style_Fill({
color: 'rgba(255,0,0, 1)'
}),
stroke: new ol_style_Stroke(
{ width: 7,
color: 'rgba(255,0,0, 0.8)'
}),
radius: 5
})
}
)]
})
this.ovmap_.addLayer(this.extentLayer);
};
ol_ext_inherits(ol_control_Globe, ol_control_Control);
ol_control_Control.prototype.setMap.call(this, map)
/**
* Set the map instance the control associated with.
* @param {ol.Map} map The map instance.
*/
ol_control_Globe.prototype.setMap = function(map) {
if (this._listener) ol_Observable_unByKey(this._listener);
this._listener = null;
ol_control_Control.prototype.setMap.call(this, map);
// Get change (new layer added or removed)
if (map)
{ this._listener = map.getView().on('propertychange', this.setView.bind(this));
this.setView();
}
};
/** Set the globe center with the map center
*/
ol_control_Globe.prototype.setView = function()
{ if (this.getMap() && this.get('follow'))
{ this.setCenter(this.getMap().getView().getCenter());
}
// Get change (new layer added or removed)
if (map) {
this._listener = map.getView().on('propertychange', this.setView.bind(this))
this.setView()
}
}
/** Set the globe center with the map center
*/
setView() {
if (this.getMap() && this.get('follow')) {
this.setCenter(this.getMap().getView().getCenter())
}
}
/** Get globe map
* @return {ol_Map}
*/
getGlobe() {
return this.ovmap_
}
/** Show/hide the globe
*/
show(b) {
if (b !== false)
this.element.classList.remove("ol-collapsed")
else
this.element.classList.add("ol-collapsed")
this.ovmap_.updateSize()
}
/** Set position on the map
* @param {top|bottom-left|right} align
*/
setPosition(align) {
if (/top/.test(align))
this.element.classList.add("ol-control-top")
else
this.element.classList.remove("ol-control-top")
if (/right/.test(align))
this.element.classList.add("ol-control-right")
else
this.element.classList.remove("ol-control-right")
}
/** Set the globe center
* @param {_ol_coordinate_} center the point to center to
* @param {boolean} show show a pointer on the map, defaylt true
*/
setCenter(center, show) {
var self = this
this.pointer_.classList.add("hidden")
if (center) {
var map = this.ovmap_
var p = map.getPixelFromCoordinate(center)
if (p) {
if (show !== false) {
var h = this.element.clientHeight
setTimeout(function () {
self.pointer_.style.top = String(Math.min(Math.max(p[1], 0), h)) + 'px'
self.pointer_.style.left = "50%"
self.pointer_.classList.remove("hidden")
}, 800)
}
map.getView().animate({ center: [center[0], 0] })
}
}
}
}
/** Get globe map
* @return {ol_Map}
*/
ol_control_Globe.prototype.getGlobe = function()
{ return this.ovmap_;
}
/** Show/hide the globe
*/
ol_control_Globe.prototype.show = function(b)
{ if (b!==false) this.element.classList.remove("ol-collapsed");
else this.element.classList.add("ol-collapsed");
this.ovmap_.updateSize();
}
/** Set position on the map
* @param {top|bottom-left|right} align
*/
ol_control_Globe.prototype.setPosition = function(align)
{ if (/top/.test(align)) this.element.classList.add("ol-control-top");
else this.element.classList.remove("ol-control-top");
if (/right/.test(align)) this.element.classList.add("ol-control-right");
else this.element.classList.remove("ol-control-right");
}
/** Set the globe center
* @param {_ol_coordinate_} center the point to center to
* @param {boolean} show show a pointer on the map, defaylt true
*/
ol_control_Globe.prototype.setCenter = function (center, show)
{ var self = this;
this.pointer_.classList.add("hidden");
if (center)
{ var map = this.ovmap_;
var p = map.getPixelFromCoordinate(center);
if (p) {
if (show!==false) {
var h = this.element.clientHeight;
setTimeout(function() {
self.pointer_.style.top = String(Math.min(Math.max(p[1],0),h)) + 'px';
self.pointer_.style.left = "50%";
self.pointer_.classList.remove("hidden");
}, 800);
}
map.getView().animate({ center: [center[0],0] });
}
}
};
export default ol_control_Globe

168
src/control/Notification.js
View File

@ -3,7 +3,6 @@
(http://www.cecill.info/licences/Licence_CeCILL-B_V1-en.txt).
*/
import ol_ext_inherits from '../util/ext'
import ol_control_Control from 'ol/control/Control'
import ol_ext_element from '../util/element';
@ -18,98 +17,97 @@ import ol_ext_element from '../util/element';
* @param {boolean} options.closeBox add a close button
* @param {boolean} options.hideOnClick close dialog when click
*/
var ol_control_Notification = function(options) {
options = options || {};
var element = document.createElement('DIV');
this.contentElement = ol_ext_element.create('DIV', {
click: function() {
if (this.get('hideOnClick')) this.hide();
}.bind(this),
parent: element
});
var ol_control_Notification = class olcontrolNotification extends ol_control_Control {
constructor(options) {
options = options || {};
var element = document.createElement('DIV');
super({
element: element,
target: options.target
});
var classNames = (options.className||"")+ " ol-notification";
if (!options.target) {
classNames += " ol-unselectable ol-control ol-collapsed";
}
element.setAttribute('class', classNames);
this.contentElement = ol_ext_element.create('DIV', {
click: function () {
if (this.get('hideOnClick'))
this.hide();
}.bind(this),
parent: element
});
ol_control_Control.call(this, {
element: element,
target: options.target
});
this.set('closeBox', options.closeBox);
this.set('hideOnClick', options.hideOnClick);
};
ol_ext_inherits(ol_control_Notification, ol_control_Control);
/**
* Display a notification on the map
* @param {string|node|undefined} what the notification to show, default get the last one
* @param {number} [duration=3000] duration in ms, if -1 never hide
*/
ol_control_Notification.prototype.show = function(what, duration) {
var self = this;
var elt = this.element;
if (what) {
if (what instanceof Node) {
this.contentElement.innerHTML = '';
this.contentElement.appendChild(what);
} else {
this.contentElement.innerHTML = what;
var classNames = (options.className || "") + " ol-notification";
if (!options.target) {
classNames += " ol-unselectable ol-control ol-collapsed";
}
if (this.get('closeBox')) {
this.contentElement.classList.add('ol-close')
ol_ext_element.create('SPAN', {
className: 'closeBox',
click: function() { this.hide(); }.bind(this),
parent: this.contentElement
})
} else {
this.contentElement.classList.remove('ol-close')
}
}
element.setAttribute('class', classNames);
if (this._listener) {
clearTimeout(this._listener);
this._listener = null;
this.set('closeBox', options.closeBox);
this.set('hideOnClick', options.hideOnClick);
}
elt.classList.add('ol-collapsed');
this._listener = setTimeout(function() {
elt.classList.remove('ol-collapsed');
if (!duration || duration >= 0) {
self._listener = setTimeout(function() {
elt.classList.add('ol-collapsed');
/**
* Display a notification on the map
* @param {string|node|undefined} what the notification to show, default get the last one
* @param {number} [duration=3000] duration in ms, if -1 never hide
*/
show(what, duration) {
var self = this;
var elt = this.element;
if (what) {
if (what instanceof Node) {
this.contentElement.innerHTML = '';
this.contentElement.appendChild(what);
} else {
this.contentElement.innerHTML = what;
}
if (this.get('closeBox')) {
this.contentElement.classList.add('ol-close');
ol_ext_element.create('SPAN', {
className: 'closeBox',
click: function () { this.hide(); }.bind(this),
parent: this.contentElement
});
} else {
this.contentElement.classList.remove('ol-close');
}
}
if (this._listener) {
clearTimeout(this._listener);
this._listener = null;
}
elt.classList.add('ol-collapsed');
this._listener = setTimeout(function () {
elt.classList.remove('ol-collapsed');
if (!duration || duration >= 0) {
self._listener = setTimeout(function () {
elt.classList.add('ol-collapsed');
self._listener = null;
}, duration || 3000);
} else {
self._listener = null;
}, duration || 3000);
} else {
self._listener = null;
}
}, 100);
}
/**
* Remove a notification on the map
*/
hide() {
if (this._listener) {
clearTimeout(this._listener);
this._listener = null;
}
}, 100);
};
/**
* Remove a notification on the map
*/
ol_control_Notification.prototype.hide = function() {
if (this._listener) {
clearTimeout(this._listener);
this._listener = null;
this.element.classList.add('ol-collapsed');
}
this.element.classList.add('ol-collapsed');
};
/**
* Toggle a notification on the map
* @param {number} [duration=3000] duration in ms
*/
ol_control_Notification.prototype.toggle = function(duration) {
if (this.element.classList.contains('ol-collapsed')) {
this.show(null, duration);
} else {
this.hide();
/**
* Toggle a notification on the map
* @param {number} [duration=3000] duration in ms
*/
toggle(duration) {
if (this.element.classList.contains('ol-collapsed')) {
this.show(null, duration);
} else {
this.hide();
}
}
};
}
export default ol_control_Notification

457
src/control/Overview.js
View File

@ -3,7 +3,6 @@
(http://www.cecill.info/licences/Licence_CeCILL-B_V1-en.txt).
*/
import ol_ext_inherits from '../util/ext'
import {unByKey as ol_Observable_unByKey} from 'ol/Observable'
import ol_control_Control from 'ol/control/Control'
import ol_geom_Polygon from 'ol/geom/Polygon'
@ -39,65 +38,67 @@ import ol_Feature from 'ol/Feature'
* @param {ol.style.Style | Array.<ol.style.Style> | undefined} options.style style to draw the map extent on the overveiw
* @param {bool|elastic} options.panAnimation use animation to center map on click, default true
*/
var ol_control_Overview = function(options)
{ options = options || {};
var self = this;
var ol_control_Overview = class olcontrolOverview extends ol_control_Control {
constructor(options) {
options = options || {}
var element = document.createElement("div");
// API
this.minZoom = options.minZoom || 0;
this.maxZoom = options.maxZoom || 18;
this.rotation = options.rotation;
super({
element: element,
target: options.target
})
var element;
if (options.target) {
element = document.createElement("div");
this.panel_ = options.target;
} else {
element = document.createElement("div");
element.classList.add('ol-overview', 'ol-unselectable', 'ol-control', 'ol-collapsed');
if (/top/.test(options.align)) element.classList.add('ol-control-top');
if (/right/.test(options.align)) element.classList.add('ol-control-right');
var button = document.createElement("button");
button.setAttribute('type','button');
button.addEventListener("touchstart", function(e){ self.toggleMap(); e.preventDefault(); });
button.addEventListener("click", function(){self.toggleMap()});
element.appendChild(button);
this.panel_ = document.createElement("div");
this.panel_.classList.add("panel");
element.appendChild(this.panel_);
}
var self = this
ol_control_Control.call(this, {
element: element,
target: options.target
});
// API
this.minZoom = options.minZoom || 0
this.maxZoom = options.maxZoom || 18
this.rotation = options.rotation
// Create a overview map
this.ovmap_ = new ol_Map({
controls: new ol_Collection(),
interactions: new ol_Collection(),
target: this.panel_,
view: new ol_View ({
zoom: 2,
center: [0,0],
projection: options.projection
}),
layers: options.layers
});
if (options.target) {
this.panel_ = options.target
} else {
element.classList.add('ol-overview', 'ol-unselectable', 'ol-control', 'ol-collapsed')
if (/top/.test(options.align))
element.classList.add('ol-control-top')
if (/right/.test(options.align))
element.classList.add('ol-control-right')
var button = document.createElement("button")
button.setAttribute('type', 'button')
button.addEventListener("touchstart", function (e) { self.toggleMap(); e.preventDefault() })
button.addEventListener("click", function () { self.toggleMap() })
element.appendChild(button)
this.panel_ = document.createElement("div")
this.panel_.classList.add("panel")
element.appendChild(this.panel_)
}
this.oview_ = this.ovmap_.getView();
// Create a overview map
this.ovmap_ = new ol_Map({
controls: new ol_Collection(),
interactions: new ol_Collection(),
target: this.panel_,
view: new ol_View({
zoom: 2,
center: [0, 0],
projection: options.projection
}),
layers: options.layers
})
// Cache extent
this.extentLayer = new ol_layer_Vector({
name: 'Cache extent',
source: new ol_source_Vector(),
style: options.style || [new ol_style_Style({
image: new ol_style_Circle({
fill: new ol_style_Fill({
color: 'rgba(255,0,0, 1)'
}),
stroke: new ol_style_Stroke({
width: 7,
this.oview_ = this.ovmap_.getView()
// Cache extent
this.extentLayer = new ol_layer_Vector({
name: 'Cache extent',
source: new ol_source_Vector(),
style: options.style || [new ol_style_Style({
image: new ol_style_Circle({
fill: new ol_style_Fill({
color: 'rgba(255,0,0, 1)'
}),
stroke: new ol_style_Stroke({
width: 7,
color: 'rgba(255,0,0, 0.8)'
}),
radius: 5
@ -107,191 +108,195 @@ var ol_control_Overview = function(options)
color: "rgba(255,0,0,0.8)"
})
}
)]
})
this.ovmap_.addLayer(this.extentLayer);
)]
})
this.ovmap_.addLayer(this.extentLayer)
/** Elastic bounce
* @param {Int} bounce number of bounce
* @param {Number} amplitude amplitude of the bounce [0,1]
* @return {Number}
* /
var bounceFn = function (bounce, amplitude){
var a = (2*bounce+1) * Math.PI/2;
var b = amplitude>0 ? -1/amplitude : -100;
var c = - Math.cos(a) * Math.pow(2, b);
return function(t) {
t = 1-Math.cos(t*Math.PI/2);
return 1 + Math.abs( Math.cos(a*t) ) * Math.pow(2, b*t) + c*t;
/** Elastic bounce
* @param {Int} bounce number of bounce
* @param {Number} amplitude amplitude of the bounce [0,1]
* @return {Number}
* /
var bounceFn = function (bounce, amplitude){
var a = (2*bounce+1) * Math.PI/2;
var b = amplitude>0 ? -1/amplitude : -100;
var c = - Math.cos(a) * Math.pow(2, b);
return function(t) {
t = 1-Math.cos(t*Math.PI/2);
return 1 + Math.abs( Math.cos(a*t) ) * Math.pow(2, b*t) + c*t;
}
}
}
/** Elastic bounce
* @param {Int} bounce number of bounce
* @param {Number} amplitude amplitude of the bounce [0,1]
* @return {Number}
*/
var elasticFn = function (bounce, amplitude) {
var a = 3*bounce * Math.PI/2;
var b = amplitude>0 ? -1/amplitude : -100;
var c = Math.cos(a) * Math.pow(2, b);
return function(t){
t = 1-Math.cos(t*Math.PI/2);
return 1 - Math.cos(a*t) * Math.pow(2, b*t) + c*t;
/** Elastic bounce
* @param {Int} bounce number of bounce
* @param {Number} amplitude amplitude of the bounce [0,1]
* @return {Number}
*/
var elasticFn = function (bounce, amplitude) {
var a = 3 * bounce * Math.PI / 2
var b = amplitude > 0 ? -1 / amplitude : -100
var c = Math.cos(a) * Math.pow(2, b)
return function (t) {
t = 1 - Math.cos(t * Math.PI / 2)
return 1 - Math.cos(a * t) * Math.pow(2, b * t) + c * t
}
}
}
// Click on the preview center the map
this.ovmap_.addInteraction (new ol_interaction_Pointer({
handleDownEvent: function(evt) {
if (options.panAnimation !==false) {
if (options.panAnimation=="elastic" || options.elasticPan) {
self.getMap().getView().animate({
center: evt.coordinate,
easing: elasticFn(2,0.3),
duration: 1000
});
} else {
self.getMap().getView().animate({
center: evt.coordinate,
duration: 300
});
// Click on the preview center the map
this.ovmap_.addInteraction(new ol_interaction_Pointer({
handleDownEvent: function (evt) {
if (options.panAnimation !== false) {
if (options.panAnimation == "elastic" || options.elasticPan) {
self.getMap().getView().animate({
center: evt.coordinate,
easing: elasticFn(2, 0.3),
duration: 1000
})
} else {
self.getMap().getView().animate({
center: evt.coordinate,
duration: 300
})
}
}
else
self.getMap().getView().setCenter(evt.coordinate)
return false
}
else self.getMap().getView().setCenter(evt.coordinate);
return false;
}
}));
};
ol_ext_inherits(ol_control_Overview, ol_control_Control);
/** Get overview map
* @return {ol.Map}
*/
ol_control_Overview.prototype.getOverviewMap = function(){
return this.ovmap_;
};
/** Toggle overview map
*/
ol_control_Overview.prototype.toggleMap = function(){
this.element.classList.toggle("ol-collapsed");
this.ovmap_.updateSize();
this.setView();
};
/** Set overview map position
* @param {top|bottom-left|right}
*/
ol_control_Overview.prototype.setPosition = function(align){
if (/top/.test(align)) this.element.classList.add("ol-control-top");
else this.element.classList.remove("ol-control-top");
if (/right/.test(align)) this.element.classList.add("ol-control-right");
else this.element.classList.remove("ol-control-right");
};
/**
* Set the map instance the control associated with.
* @param {ol.Map} map The map instance.
*/
ol_control_Overview.prototype.setMap = function(map) {
if (this._listener) {
for (let i in this._listener) {
ol_Observable_unByKey(this._listener[i]);
}
}))
}
this._listener = {};
ol_control_Control.prototype.setMap.call(this, map);
if (map) {
this._listener.map = map.on('change:view', function() {
if (this._listener.view) ol_Observable_unByKey(this._listener.view);
if (map.getView()) {
this._listener.view = map.getView().on('propertychange', this.setView.bind(this));
this.setView();
/** Get overview map
* @return {ol.Map}
*/
getOverviewMap() {
return this.ovmap_
}
/** Toggle overview map
*/
toggleMap() {
this.element.classList.toggle("ol-collapsed")
this.ovmap_.updateSize()
this.setView()
}
/** Set overview map position
* @param {top|bottom-left|right}
*/
setPosition(align) {
if (/top/.test(align))
this.element.classList.add("ol-control-top")
else
this.element.classList.remove("ol-control-top")
if (/right/.test(align))
this.element.classList.add("ol-control-right")
else
this.element.classList.remove("ol-control-right")
}
/**
* Set the map instance the control associated with.
* @param {ol.Map} map The map instance.
*/
setMap(map) {
if (this._listener) {
for (let i in this._listener) {
ol_Observable_unByKey(this._listener[i])
}
}.bind(this));
this._listener.view = map.getView().on('propertychange', this.setView.bind(this));
this.setView();
}
};
/** Calculate the extent of the map and draw it on the overview
*/
ol_control_Overview.prototype.calcExtent_ = function(extent){
var map = this.getMap();
if (!map) return;
var source = this.extentLayer.getSource();
source.clear();
var f = new ol_Feature();
var size = map.getSize();
var resolution = map.getView().getResolution();
var rotation = map.getView().getRotation();
var center = map.getView().getCenter();
if (!resolution) return;
var dx = resolution * size[0] / 2;
var dy = resolution * size[1] / 2;
var res2 = this.oview_.getResolution();
if (dx/res2>5 || dy/res2>5) {
var cos = Math.cos(rotation);
var sin = Math.sin(rotation);
var i, x, y;
extent=[[-dx,-dy],[-dx,dy],[dx,dy],[dx,-dy]];
for (i = 0; i < 4; ++i) {
x = extent[i][0];
y = extent[i][1];
extent[i][0] = center[0] + x * cos - y * sin;
extent[i][1] = center[1] + x * sin + y * cos;
}
f.setGeometry (new ol_geom_Polygon( [ extent ]));
} else {
f.setGeometry (new ol_geom_Point( center ));
}
source.addFeature(f);
};
this._listener = {}
/**
* @private
*/
ol_control_Overview.prototype.setView = function(e){
if (!e) {
// refresh all
this.setView({key:'rotation'});
this.setView({key:'resolution'});
this.setView({key:'center'});
return;
}
// Set the view params
switch (e.key){
case 'rotation': {
if (this.rotation) this.oview_.setRotation(this.getMap().getView().getRotation());
else if (this.oview_.getRotation()) this.oview_.setRotation(0);
break;
ol_control_Control.prototype.setMap.call(this, map)
if (map) {
this._listener.map = map.on('change:view', function () {
if (this._listener.view)
ol_Observable_unByKey(this._listener.view)
if (map.getView()) {
this._listener.view = map.getView().on('propertychange', this.setView.bind(this))
this.setView()
}
}.bind(this))
this._listener.view = map.getView().on('propertychange', this.setView.bind(this))
this.setView()
}
case 'center': {
var mapExtent = this.getMap().getView().calculateExtent(this.getMap().getSize());
var extent = this.oview_.calculateExtent(this.ovmap_.getSize());
if (mapExtent[0]<extent[0] || mapExtent[1]<extent[1]
|| mapExtent[2]>extent[2] || mapExtent[3]>extent[3]){
this.oview_.setCenter(this.getMap().getView().getCenter());
}
/** Calculate the extent of the map and draw it on the overview
*/
calcExtent_(extent) {
var map = this.getMap()
if (!map)
return
var source = this.extentLayer.getSource()
source.clear()
var f = new ol_Feature()
var size = map.getSize()
var resolution = map.getView().getResolution()
var rotation = map.getView().getRotation()
var center = map.getView().getCenter()
if (!resolution)
return
var dx = resolution * size[0] / 2
var dy = resolution * size[1] / 2
var res2 = this.oview_.getResolution()
if (dx / res2 > 5 || dy / res2 > 5) {
var cos = Math.cos(rotation)
var sin = Math.sin(rotation)
var i, x, y
extent = [[-dx, -dy], [-dx, dy], [dx, dy], [dx, -dy]]
for (i = 0; i < 4; ++i) {
x = extent[i][0]
y = extent[i][1]
extent[i][0] = center[0] + x * cos - y * sin
extent[i][1] = center[1] + x * sin + y * cos
}
break;
}
case 'resolution': {
//var z = Math.round(this.getMap().getView().getZoom()/2)*2-4;
var z = Math.round(this.oview_.getZoomForResolution(this.getMap().getView().getResolution())/2)*2-4;
z = Math.min ( this.maxZoom, Math.max(this.minZoom, z) );
this.oview_.setZoom(z);
break;
f.setGeometry(new ol_geom_Polygon([extent]))
} else {
f.setGeometry(new ol_geom_Point(center))
}
default: break;
source.addFeature(f)
}
this.calcExtent_();
};
/**
* @private
*/
setView(e) {
if (!e) {
// refresh all
this.setView({ key: 'rotation' })
this.setView({ key: 'resolution' })
this.setView({ key: 'center' })
return
}
// Set the view params
switch (e.key) {
case 'rotation': {
if (this.rotation)
this.oview_.setRotation(this.getMap().getView().getRotation())
else if (this.oview_.getRotation())
this.oview_.setRotation(0)
break
}
case 'center': {
var mapExtent = this.getMap().getView().calculateExtent(this.getMap().getSize())
var extent = this.oview_.calculateExtent(this.ovmap_.getSize())
if (mapExtent[0] < extent[0] || mapExtent[1] < extent[1]
|| mapExtent[2] > extent[2] || mapExtent[3] > extent[3]) {
this.oview_.setCenter(this.getMap().getView().getCenter())
}
break
}
case 'resolution': {
//var z = Math.round(this.getMap().getView().getZoom()/2)*2-4;
var z = Math.round(this.oview_.getZoomForResolution(this.getMap().getView().getResolution()) / 2) * 2 - 4
z = Math.min(this.maxZoom, Math.max(this.minZoom, z))
this.oview_.setZoom(z)
break
}
default: break
}
this.calcExtent_()
}
}
export default ol_control_Overview

48
src/control/Permalink.css
View File

@ -1,14 +1,42 @@
.ol-permalink
{ position: absolute;
top:0.5em;
right: 2.5em;
.ol-permalink {
position: absolute;
top:0.5em;
right: 2.5em;
}
.ol-touch .ol-permalink
{ right: 3em;
.ol-touch .ol-permalink {
right: 3em;
}
.ol-permalink button
{ background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAASCAYAAABWzo5XAAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AcFBjYE1ZK03gAAAUlJREFUOMuVk71KA1EQhc/NaiP+gCRpFHwGBSFlCrFVfAsbwSJCBMv06QIGJOBziI3EYAgkjU8gIloIAasIn4WzMqx34zrN7J6de+6ZmbNSgQDSfADcATPgHbgCyvonSYv8KEzWdofegH3gwmG9Ikq67sAESFzNueHThTyiEIKAmr2OJCUhhO30Aou+5aUQU2Ik65K2JC1KegohPGfUBkmvksqShnntHEcGOs60NXHfjmKz6czZTsNqbhzW+muwY2ATWAWawCOwBgxcTfvnvCPxKx4Cy5bPgBWgauRpdL2ImNlGhp3MabETm8mh94nDk4yCNE5/KTGg7xxbyhYAG0AN2AEqURIDZ0a0Fxn+LXAPXDpzRqMk6cOedz1ubdYl1b6NHgZRJe72nuu/CdSBl+yKi/zZlTnbaeXOJIesClwDU+ATeEhtX5TkCwAWUyAsHH1QAAAAAElFTkSuQmCC');
background-position: center;
background-repeat: no-repeat;
.ol-permalink button i {
position: absolute;
width: 1em;
height: 1em;
display: block;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.ol-permalink button i:before {
content: '\2197';
position: absolute;
border: 1px solid currentColor;
left: 0;
top: 0;
width: 0.3em;
height: 1em;
box-sizing: border-box;
border-width: 1px 0 0 1px;
padding: 0 0.2em;
}
.ol-permalink button i:after {
content: '';
position: absolute;
border: 1px solid currentColor;
right: 0;
bottom: 0;
width: 1em;
height: 0.3em;
box-sizing: border-box;
border-width: 0 1px 1px 0;
padding: 0.2em;
}

1
src/control/Permalink.js
View File

@ -40,6 +40,7 @@ var ol_control_Permalink = class olcontrolPermalink extends ol_control_Control {
var self = this
var button = document.createElement('button')
ol_ext_element.create('I', { parent: button })
this.replaceState_ = (options.urlReplace !== false)
this.fixed_ = options.fixed || 6
this.hash_ = options.anchor ? "#" : "?"

28
src/control/Profil.css
View File

@ -51,10 +51,30 @@
.ol-profil button {
display: block;
position: absolute;
right: 2px;
background-position: center;
background-repeat: no-repeat;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABUAAAAPCAYAAAALWoRrAAAABmJLR0QAAAAAAAD5Q7t/AAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AgXCR4dn7j9TAAAAB1pVFh0Q29tbWVudAAAAAAAQ3JlYXRlZCB3aXRoIEdJTVBkLmUHAAAAz0lEQVQ4y7WTMU4CURRFz0xIpLUBEhdAY2tJYW1jaWlsXYVxDWyBhWCFCYugYgnDFPMOhTMJGf3AwHiqn/uTk5v/3gfAH6b0RH7sMiIe1Ts162z+q2lVVbd1XqijLuJk0zzP1/VxCGyApLgsy+HJphGx8DeFOm6L1bn6eVQaEW+m2amTRqx+1fkqKY2Ie0+zUx/U7WGYfNMsy57PmMMN8A1MWsWeUoPyivV8PWtPOzL7D+lYHfUtBXgHGLTCJfBxodD6k9Dsm8BLE17LobQ39nJC61aLVoVsAAAAAElFTkSuQmCC');
right: 0;
overflow: hidden;
}
.ol-profil button i {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 1em;
height: 1em;
overflow: hidden;
}
.ol-profil button i:before,
.ol-profil button i:after {
content: "";
position: absolute;
display: block;
background-color: currentColor;
width: 1em;
height: .9em;
transform: scaleX(.8) translate(-.25em, .5em) rotate(45deg);
}
.ol-profil button i:after {
transform: scaleX(.8) translate(.35em, .7em) rotate(45deg);
}
.ol-profil.ol-collapsed button {

9
src/control/Profile.js
View File

@ -61,15 +61,16 @@ var ol_control_Profil = class olcontrolProfil extends ol_control_Control {
} else {
element.className = ((options.className || 'ol-profil') + ' ol-unselectable ol-control ol-collapsed').trim()
this.button = document.createElement('button')
this.button.title = options.title || 'Profile',
this.button.setAttribute('type', 'button')
this.button.title = options.title || 'Profile';
this.button.setAttribute('type', 'button')
var click_touchstart_function = function (e) {
self.toggle()
e.preventDefault()
}
this.button.addEventListener("click", click_touchstart_function)
this.button.addEventListener("touchstart", click_touchstart_function)
this.button.addEventListener('click', click_touchstart_function)
this.button.addEventListener('touchstart', click_touchstart_function)
element.appendChild(this.button)
ol_ext_element.create('I', { parent: this.button })
}
// Drawing style

8
src/control/Swipe.css
View File

@ -44,15 +44,13 @@
bottom: 25%;
left: 50%;
width: 2px;
background: rgba(255,255,255,0.8);
background: currentColor;
transform: translate(-1px, 0);
-webkit-transform: translate(-1px, 0);
}
.ol-swipe button:after {
transform: translateX(5px);
-webkit-transform: translateX(5px);
transform: translateX(4px);
}
.ol-swipe button:before {
transform: translateX(-7px);
-webkit-transform: translateX(-7px);
transform: translateX(-6px);
}

756
src/control/Swipe.js
View File

@ -4,7 +4,6 @@
(http://www.cecill.info/licences/Licence_CeCILL-B_V1-en.txt).
*/
import ol_ext_inherits from '../util/ext'
import ol_control_Control from 'ol/control/Control'
/**
@ -19,403 +18,412 @@ import ol_control_Control from 'ol/control/Control'
* @param {number} options.position position propertie of the swipe [0,1], default 0.5
* @param {string} options.orientation orientation propertie (vertical|horizontal), default vertical
*/
var ol_control_Swipe = function(options) {
options = options || {};
var ol_control_Swipe = class olcontrolSwipe extends ol_control_Control {
constructor(options) {
options = options || {};
var button = document.createElement('button');
var element = document.createElement('div');
super({
element: element
});
element.className = (options.className || 'ol-swipe') + ' ol-unselectable ol-control';
var button = document.createElement('button');
element.appendChild(button);
var element = document.createElement('div');
element.className = (options.className || "ol-swipe") + " ol-unselectable ol-control";
element.appendChild(button);
element.addEventListener('mousedown', this.move.bind(this));
element.addEventListener('touchstart', this.move.bind(this));
element.addEventListener("mousedown", this.move.bind(this));
element.addEventListener("touchstart", this.move.bind(this));
// An array of listener on layer postcompose
this.precomposeRight_ = this.precomposeRight.bind(this);
this.precomposeLeft_ = this.precomposeLeft.bind(this);
this.postcompose_ = this.postcompose.bind(this);
ol_control_Control.call(this, {
element: element
});
this.layers = [];
if (options.layers)
this.addLayer(options.layers, false);
if (options.rightLayers)
this.addLayer(options.rightLayers, true);
// An array of listener on layer postcompose
this.precomposeRight_ = this.precomposeRight.bind(this);
this.precomposeLeft_ = this.precomposeLeft.bind(this);
this.postcompose_ = this.postcompose.bind(this);
this.layers = [];
if (options.layers) this.addLayer(options.layers, false);
if (options.rightLayers) this.addLayer(options.rightLayers, true);
this.on('propertychange', function(e) {
if (this.getMap()) {
try { this.getMap().renderSync(); } catch(e) { /* ok */ }
}
if (this.get('orientation') === "horizontal") {
this.element.style.top = this.get('position')*100+"%";
this.element.style.left = "";
} else {
if (this.get('orientation') !== "vertical") this.set('orientation', "vertical");
this.element.style.left = this.get('position')*100+"%";
this.element.style.top = "";
}
if (e.key==='orientation') {
this.element.classList.remove("horizontal", "vertical");
this.element.classList.add(this.get('orientation'));
}
// Force VectorImage to refresh
if (!this.isMoving) {
this.layers.forEach(function(l) {
if (l.layer.getImageRatio) l.layer.changed();
})
}
}.bind(this));
this.set('position', options.position || 0.5);
this.set('orientation', options.orientation || 'vertical');
};
ol_ext_inherits(ol_control_Swipe, ol_control_Control);
/**
* Set the map instance the control associated with.
* @param {_ol_Map_} map The map instance.
*/
ol_control_Swipe.prototype.setMap = function(map) {
var i;
var l;
if (this.getMap()) {
for (i=0; i<this.layers.length; i++) {
l = this.layers[i];
if (l.right) l.layer.un(['precompose','prerender'], this.precomposeRight_);
else l.layer.un(['precompose','prerender'], this.precomposeLeft_);
l.layer.un(['postcompose','postrender'], this.postcompose_);
}
try { this.getMap().renderSync(); } catch(e) { /* ok */ }
}
ol_control_Control.prototype.setMap.call(this, map);
if (map) {
this._listener = [];
for (i=0; i<this.layers.length; i++) {
l = this.layers[i];
if (l.right) l.layer.on(['precompose','prerender'], this.precomposeRight_);
else l.layer.on(['precompose','prerender'], this.precomposeLeft_);
l.layer.on(['postcompose','postrender'], this.postcompose_);
}
try { map.renderSync(); } catch(e) { /* ok */ }
}
};
/** @private
*/
ol_control_Swipe.prototype.isLayer_ = function(layer){
for (var k=0; k<this.layers.length; k++) {
if (this.layers[k].layer === layer) return k;
}
return -1;
};
/** Add a layer to clip
* @param {ol.layer|Array<ol.layer>} layer to clip
* @param {bool} add layer in the right part of the map, default left.
*/
ol_control_Swipe.prototype.addLayer = function(layers, right) {
if (!(layers instanceof Array)) layers = [layers];
for (var i=0; i<layers.length; i++) {
var l = layers[i];
if (this.isLayer_(l) < 0) {
this.layers.push({ layer:l, right:right });
this.on('propertychange', function (e) {
if (this.getMap()) {
if (right) l.on(['precompose','prerender'], this.precomposeRight_);
else l.on(['precompose','prerender'], this.precomposeLeft_);
l.on(['postcompose','postrender'], this.postcompose_);
try { this.getMap().renderSync(); } catch(e) { /* ok */ }
try { this.getMap().renderSync(); } catch (e) { /* ok */ }
}
if (this.get('orientation') === "horizontal") {
this.element.style.top = this.get('position') * 100 + "%";
this.element.style.left = "";
} else {
if (this.get('orientation') !== "vertical")
this.set('orientation', "vertical");
this.element.style.left = this.get('position') * 100 + "%";
this.element.style.top = "";
}
if (e.key === 'orientation') {
this.element.classList.remove("horizontal", "vertical");
this.element.classList.add(this.get('orientation'));
}
}
}
};
/** Remove all layers
*/
ol_control_Swipe.prototype.removeLayers = function() {
var layers = [];
this.layers.forEach(function(l) { layers.push(l.layer); });
this.removeLayer(layers)
};
/** Remove a layer to clip
* @param {ol.layer|Array<ol.layer>} layer to clip
*/
ol_control_Swipe.prototype.removeLayer = function(layers) {
if (!(layers instanceof Array)) layers = [layers];
for (var i=0; i<layers.length; i++) {
var k = this.isLayer_(layers[i]);
if (k >=0 && this.getMap()) {
if (this.layers[k].right) layers[i].un(['precompose','prerender'], this.precomposeRight_);
else layers[i].un(['precompose','prerender'], this.precomposeLeft_);
layers[i].un(['postcompose','postrender'], this.postcompose_);
this.layers.splice(k,1);
}
}
if (this.getMap()) {
try { this.getMap().renderSync(); } catch(e) { /* ok */ }
}
};
/** Get visible rectangle
* @returns {ol.extent}
*/
ol_control_Swipe.prototype.getRectangle = function() {
var s;
if (this.get('orientation') === 'vertical') {
s = this.getMap().getSize();
return [ 0, 0, s[0]*this.get('position'), s[1]];
} else {
s = this.getMap().getSize();
return [ 0, 0, s[0], s[1]*this.get('position')];
}
};
/** @private
*/
ol_control_Swipe.prototype.move = function(e) {
var self = this;
var l;
if (!this._movefn) this._movefn = this.move.bind(this);
switch (e.type) {
case 'touchcancel':
case 'touchend':
case 'mouseup': {
self.isMoving = false;
["mouseup", "mousemove", "touchend", "touchcancel", "touchmove"]
.forEach(function(eventName) {
document.removeEventListener(eventName, self._movefn);
});
// Force VectorImage to refresh
this.layers.forEach(function(l) {
if (l.layer.getImageRatio) l.layer.changed();
})
break;
}
case 'mousedown':
case 'touchstart': {
self.isMoving = true;
["mouseup", "mousemove", "touchend", "touchcancel", "touchmove"]
.forEach(function(eventName) {
document.addEventListener(eventName, self._movefn);
if (!this.isMoving) {
this.layers.forEach(function (l) {
if (l.layer.getImageRatio)
l.layer.changed();
});
}
}.bind(this));
this.set('position', options.position || 0.5);
this.set('orientation', options.orientation || 'vertical');
}
/**
* Set the map instance the control associated with.
* @param {_ol_Map_} map The map instance.
*/
setMap(map) {
var i;
var l;
if (this.getMap()) {
for (i = 0; i < this.layers.length; i++) {
l = this.layers[i];
if (l.right)
l.layer.un(['precompose', 'prerender'], this.precomposeRight_);
else
l.layer.un(['precompose', 'prerender'], this.precomposeLeft_);
l.layer.un(['postcompose', 'postrender'], this.postcompose_);
}
try { this.getMap().renderSync(); } catch (e) { /* ok */ }
}
// fallthrough
case 'mousemove':
case 'touchmove': {
if (self.isMoving) {
if (self.get('orientation') === 'vertical') {
var pageX = e.pageX
|| (e.touches && e.touches.length && e.touches[0].pageX)
|| (e.changedTouches && e.changedTouches.length && e.changedTouches[0].pageX);
if (!pageX) break;
pageX -= self.getMap().getTargetElement().getBoundingClientRect().left +
window.pageXOffset - document.documentElement.clientLeft;
l = self.getMap().getSize()[0];
var w = l - Math.min(Math.max(0, l-pageX), l);
l = w/l;
self.set('position', l);
self.dispatchEvent({ type: 'moving', size: [w, self.getMap().getSize()[1]], position: [l,0] });
} else {
var pageY = e.pageY
|| (e.touches && e.touches.length && e.touches[0].pageY)
|| (e.changedTouches && e.changedTouches.length && e.changedTouches[0].pageY);
if (!pageY) break;
pageY -= self.getMap().getTargetElement().getBoundingClientRect().top +
window.pageYOffset - document.documentElement.clientTop;
super.setMap(map);
l = self.getMap().getSize()[1];
var h = l - Math.min(Math.max(0, l-pageY), l);
l = h/l;
self.set('position', l);
self.dispatchEvent({ type: 'moving', size: [self.getMap().getSize()[0],h], position: [0,l] });
if (map) {
this._listener = [];
for (i = 0; i < this.layers.length; i++) {
l = this.layers[i];
if (l.right)
l.layer.on(['precompose', 'prerender'], this.precomposeRight_);
else
l.layer.on(['precompose', 'prerender'], this.precomposeLeft_);
l.layer.on(['postcompose', 'postrender'], this.postcompose_);
}
try { map.renderSync(); } catch (e) { /* ok */ }
}
}
/** @private
*/
isLayer_(layer) {
for (var k = 0; k < this.layers.length; k++) {
if (this.layers[k].layer === layer)
return k;
}
return -1;
}
/** Add a layer to clip
* @param {ol.layer|Array<ol.layer>} layer to clip
* @param {bool} add layer in the right part of the map, default left.
*/
addLayer(layers, right) {
if (!(layers instanceof Array))
layers = [layers];
for (var i = 0; i < layers.length; i++) {
var l = layers[i];
if (this.isLayer_(l) < 0) {
this.layers.push({ layer: l, right: right });
if (this.getMap()) {
if (right)
l.on(['precompose', 'prerender'], this.precomposeRight_);
else
l.on(['precompose', 'prerender'], this.precomposeLeft_);
l.on(['postcompose', 'postrender'], this.postcompose_);
try { this.getMap().renderSync(); } catch (e) { /* ok */ }
}
}
break;
}
default: break;
}
};
/** @private
*/
ol_control_Swipe.prototype._transformPt = function(e, pt) {
var tr = e.inversePixelTransform;
var x = pt[0];
var y = pt[1];
pt[0] = tr[0] * x + tr[2] * y + tr[4];
pt[1] = tr[1] * x + tr[3] * y + tr[5];
return pt;
};
/** @private
*/
ol_control_Swipe.prototype._drawRect = function(e, pts) {
var tr = e.inversePixelTransform;
if (tr) {
var r = [
[pts[0][0], pts[0][1]],
[pts[0][0], pts[1][1]],
[pts[1][0], pts[1][1]],
[pts[1][0], pts[0][1]],
[pts[0][0], pts[0][1]]
];
e.context.save()
// Rotate VectorImages
if (e.target.getImageRatio) {
var rot = -Math.atan2(e.frameState.pixelToCoordinateTransform[1], e.frameState.pixelToCoordinateTransform[0]);
e.context.translate(e.frameState.size[0]/2, e.frameState.size[1]/2)
e.context.rotate(rot)
e.context.translate(-e.frameState.size[0]/2, -e.frameState.size[1]/2)
}
r.forEach(function (pt, i) {
pt = [
(pt[0]*tr[0] - pt[1]*tr[1] + tr[4]),
(-pt[0]*tr[2] + pt[1]*tr[3] + tr[5])
];
if (!i) {
e.context.moveTo(pt[0], pt[1]);
} else {
e.context.lineTo(pt[0], pt[1]);
/** Remove all layers
*/
removeLayers() {
var layers = [];
this.layers.forEach(function (l) { layers.push(l.layer); });
this.removeLayer(layers);
}
/** Remove a layer to clip
* @param {ol.layer|Array<ol.layer>} layer to clip
*/
removeLayer(layers) {
if (!(layers instanceof Array))
layers = [layers];
for (var i = 0; i < layers.length; i++) {
var k = this.isLayer_(layers[i]);
if (k >= 0 && this.getMap()) {
if (this.layers[k].right)
layers[i].un(['precompose', 'prerender'], this.precomposeRight_);
else
layers[i].un(['precompose', 'prerender'], this.precomposeLeft_);
layers[i].un(['postcompose', 'postrender'], this.postcompose_);
this.layers.splice(k, 1);
}
});
e.context.restore();
} else {
var ratio = e.frameState.pixelRatio;
e.context.rect(pts[0][0]*ratio,pts[0][1]*ratio,pts[1][0]*ratio,pts[1][1]*ratio);
}
if (this.getMap()) {
try { this.getMap().renderSync(); } catch (e) { /* ok */ }
}
}
};
/** @private
*/
ol_control_Swipe.prototype.precomposeLeft = function(e) {
var ctx = e.context;
if (ctx instanceof WebGLRenderingContext) {
if (e.type === 'prerender') {
// Clear
ctx.clearColor(0, 0, 0, 0);
ctx.clear(ctx.COLOR_BUFFER_BIT);
// Clip
ctx.enable(ctx.SCISSOR_TEST);
var mapSize = this.getMap().getSize(); // [width, height] in CSS pixels
// get render coordinates and dimensions given CSS coordinates
var bottomLeft = this._transformPt(e, [0, mapSize[1]]);
var topRight = this._transformPt(e, [mapSize[0], 0]);
var fullWidth = topRight[0] - bottomLeft[0];
var fullHeight = topRight[1] - bottomLeft[1];
var width, height;
if (this.get('orientation') === "vertical") {
width = Math.round(fullWidth * this.get('position'));
height = fullHeight;
} else {
width = fullWidth;
height = Math.round((fullHeight * this.get('position')));
bottomLeft[1] += fullHeight - height;
/** Get visible rectangle
* @returns {ol.extent}
*/
getRectangle() {
var s;
if (this.get('orientation') === 'vertical') {
s = this.getMap().getSize();
return [0, 0, s[0] * this.get('position'), s[1]];
} else {
s = this.getMap().getSize();
return [0, 0, s[0], s[1] * this.get('position')];
}
}
/** @private
*/
move(e) {
var self = this;
var l;
if (!this._movefn)
this._movefn = this.move.bind(this);
switch (e.type) {
case 'touchcancel':
case 'touchend':
case 'mouseup': {
self.isMoving = false;
["mouseup", "mousemove", "touchend", "touchcancel", "touchmove"]
.forEach(function (eventName) {
document.removeEventListener(eventName, self._movefn);
});
// Force VectorImage to refresh
this.layers.forEach(function (l) {
if (l.layer.getImageRatio)
l.layer.changed();
});
break;
}
ctx.scissor(bottomLeft[0], bottomLeft[1], width, height);
}
} else {
var size = e.frameState.size;
ctx.save();
ctx.beginPath();
var pts = [[0,0],[size[0],size[1]]];
if (this.get('orientation') === "vertical") {
pts[1] = [
size[0]*.5 + this.getMap().getSize()[0] * (this.get('position') - .5),
size[1]
];
} else {
pts[1] = [
size[0],
size[1]*.5 + this.getMap().getSize()[1] * (this.get('position') - .5)
];
}
this._drawRect(e, pts);
ctx.clip();
}
};
/** @private
*/
ol_control_Swipe.prototype.precomposeRight = function(e) {
var ctx = e.context;
if (ctx instanceof WebGLRenderingContext) {
if (e.type === 'prerender') {
// Clear
ctx.clearColor(0, 0, 0, 0);
ctx.clear(ctx.COLOR_BUFFER_BIT);
// Clip
ctx.enable(ctx.SCISSOR_TEST);
var mapSize = this.getMap().getSize(); // [width, height] in CSS pixels
// get render coordinates and dimensions given CSS coordinates
var bottomLeft = this._transformPt(e, [0, mapSize[1]]);
var topRight = this._transformPt(e, [mapSize[0], 0]);
var fullWidth = topRight[0] - bottomLeft[0];
var fullHeight = topRight[1] - bottomLeft[1];
var width, height;
if (this.get('orientation') === "vertical") {
height = fullHeight;
width = Math.round(fullWidth * (1-this.get('position')));
bottomLeft[0] += fullWidth - width;
} else {
width = fullWidth;
height = Math.round(fullHeight * (1-this.get('position')));
case 'mousedown':
case 'touchstart': {
self.isMoving = true;
["mouseup", "mousemove", "touchend", "touchcancel", "touchmove"]
.forEach(function (eventName) {
document.addEventListener(eventName, self._movefn);
});
}
ctx.scissor(bottomLeft[0], bottomLeft[1], width, height);
}
} else {
var size = e.frameState.size;
ctx.save();
ctx.beginPath();
var pts = [[0,0],[size[0],size[1]]];
if (this.get('orientation') === "vertical") {
pts[0] = [
size[0]*.5 + this.getMap().getSize()[0] * (this.get('position') - .5),
0
];
} else {
pts[0] = [
0,
size[1]*.5 + this.getMap().getSize()[1] * (this.get('position') - .5)
]
}
this._drawRect(e, pts);
ctx.clip();
}
};
// fallthrough
case 'mousemove':
case 'touchmove': {
if (self.isMoving) {
if (self.get('orientation') === 'vertical') {
var pageX = e.pageX
|| (e.touches && e.touches.length && e.touches[0].pageX)
|| (e.changedTouches && e.changedTouches.length && e.changedTouches[0].pageX);
if (!pageX)
break;
pageX -= self.getMap().getTargetElement().getBoundingClientRect().left +
window.pageXOffset - document.documentElement.clientLeft;
/** @private
*/
ol_control_Swipe.prototype.postcompose = function(e) {
if (e.context instanceof WebGLRenderingContext) {
if (e.type === 'postrender') {
var gl = e.context;
gl.disable(gl.SCISSOR_TEST);
l = self.getMap().getSize()[0];
var w = l - Math.min(Math.max(0, l - pageX), l);
l = w / l;
self.set('position', l);
self.dispatchEvent({ type: 'moving', size: [w, self.getMap().getSize()[1]], position: [l, 0] });
} else {
var pageY = e.pageY
|| (e.touches && e.touches.length && e.touches[0].pageY)
|| (e.changedTouches && e.changedTouches.length && e.changedTouches[0].pageY);
if (!pageY)
break;
pageY -= self.getMap().getTargetElement().getBoundingClientRect().top +
window.pageYOffset - document.documentElement.clientTop;
l = self.getMap().getSize()[1];
var h = l - Math.min(Math.max(0, l - pageY), l);
l = h / l;
self.set('position', l);
self.dispatchEvent({ type: 'moving', size: [self.getMap().getSize()[0], h], position: [0, l] });
}
}
break;
}
default: break;
}
} else {
// restore context when decluttering is done (ol>=6)
// https://github.com/openlayers/openlayers/issues/10096
if (e.target.getClassName && e.target.getClassName()!=='ol-layer' && e.target.get('declutter')) {
setTimeout(function () {
e.context.restore();
}, 0);
} else {
}
/** @private
*/
_transformPt(e, pt) {
var tr = e.inversePixelTransform;
var x = pt[0];
var y = pt[1];
pt[0] = tr[0] * x + tr[2] * y + tr[4];
pt[1] = tr[1] * x + tr[3] * y + tr[5];
return pt;
}
/** @private
*/
_drawRect(e, pts) {
var tr = e.inversePixelTransform;
if (tr) {
var r = [
[pts[0][0], pts[0][1]],
[pts[0][0], pts[1][1]],
[pts[1][0], pts[1][1]],
[pts[1][0], pts[0][1]],
[pts[0][0], pts[0][1]]
];
e.context.save();
// Rotate VectorImages
if (e.target.getImageRatio) {
var rot = -Math.atan2(e.frameState.pixelToCoordinateTransform[1], e.frameState.pixelToCoordinateTransform[0]);
e.context.translate(e.frameState.size[0] / 2, e.frameState.size[1] / 2);
e.context.rotate(rot);
e.context.translate(-e.frameState.size[0] / 2, -e.frameState.size[1] / 2);
}
r.forEach(function (pt, i) {
pt = [
(pt[0] * tr[0] - pt[1] * tr[1] + tr[4]),
(-pt[0] * tr[2] + pt[1] * tr[3] + tr[5])
];
if (!i) {
e.context.moveTo(pt[0], pt[1]);
} else {
e.context.lineTo(pt[0], pt[1]);
}
});
e.context.restore();
} else {
var ratio = e.frameState.pixelRatio;
e.context.rect(pts[0][0] * ratio, pts[0][1] * ratio, pts[1][0] * ratio, pts[1][1] * ratio);
}
}
};
/** @private
*/
precomposeLeft(e) {
var ctx = e.context;
if (ctx instanceof WebGLRenderingContext) {
if (e.type === 'prerender') {
// Clear
ctx.clearColor(0, 0, 0, 0);
ctx.clear(ctx.COLOR_BUFFER_BIT);
// Clip
ctx.enable(ctx.SCISSOR_TEST);
var mapSize = this.getMap().getSize(); // [width, height] in CSS pixels
// get render coordinates and dimensions given CSS coordinates
var bottomLeft = this._transformPt(e, [0, mapSize[1]]);
var topRight = this._transformPt(e, [mapSize[0], 0]);
var fullWidth = topRight[0] - bottomLeft[0];
var fullHeight = topRight[1] - bottomLeft[1];
var width, height;
if (this.get('orientation') === "vertical") {
width = Math.round(fullWidth * this.get('position'));
height = fullHeight;
} else {
width = fullWidth;
height = Math.round((fullHeight * this.get('position')));
bottomLeft[1] += fullHeight - height;
}
ctx.scissor(bottomLeft[0], bottomLeft[1], width, height);
}
} else {
var size = e.frameState.size;
ctx.save();
ctx.beginPath();
var pts = [[0, 0], [size[0], size[1]]];
if (this.get('orientation') === "vertical") {
pts[1] = [
size[0] * .5 + this.getMap().getSize()[0] * (this.get('position') - .5),
size[1]
];
} else {
pts[1] = [
size[0],
size[1] * .5 + this.getMap().getSize()[1] * (this.get('position') - .5)
];
}
this._drawRect(e, pts);
ctx.clip();
}
}
/** @private
*/
precomposeRight(e) {
var ctx = e.context;
if (ctx instanceof WebGLRenderingContext) {
if (e.type === 'prerender') {
// Clear
ctx.clearColor(0, 0, 0, 0);
ctx.clear(ctx.COLOR_BUFFER_BIT);
// Clip
ctx.enable(ctx.SCISSOR_TEST);
var mapSize = this.getMap().getSize(); // [width, height] in CSS pixels
// get render coordinates and dimensions given CSS coordinates
var bottomLeft = this._transformPt(e, [0, mapSize[1]]);
var topRight = this._transformPt(e, [mapSize[0], 0]);
var fullWidth = topRight[0] - bottomLeft[0];
var fullHeight = topRight[1] - bottomLeft[1];
var width, height;
if (this.get('orientation') === "vertical") {
height = fullHeight;
width = Math.round(fullWidth * (1 - this.get('position')));
bottomLeft[0] += fullWidth - width;
} else {
width = fullWidth;
height = Math.round(fullHeight * (1 - this.get('position')));
}
ctx.scissor(bottomLeft[0], bottomLeft[1], width, height);
}
} else {
var size = e.frameState.size;
ctx.save();
ctx.beginPath();
var pts = [[0, 0], [size[0], size[1]]];
if (this.get('orientation') === "vertical") {
pts[0] = [
size[0] * .5 + this.getMap().getSize()[0] * (this.get('position') - .5),
0
];
} else {
pts[0] = [
0,
size[1] * .5 + this.getMap().getSize()[1] * (this.get('position') - .5)
];
}
this._drawRect(e, pts);
ctx.clip();
}
}
/** @private
*/
postcompose(e) {
if (e.context instanceof WebGLRenderingContext) {
if (e.type === 'postrender') {
var gl = e.context;
gl.disable(gl.SCISSOR_TEST);
}
} else {
// restore context when decluttering is done (ol>=6)
// https://github.com/openlayers/openlayers/issues/10096
if (e.target.getClassName && e.target.getClassName() !== 'ol-layer' && e.target.get('declutter')) {
setTimeout(function () {
e.context.restore();
}, 0);
} else {
e.context.restore();
}
}
}
}
export default ol_control_Swipe