Skip to content
GitLab
Menu
Projects
Groups
Snippets
Loading...
Help
Help
Support
Community forum
Keyboard shortcuts
?
Submit feedback
Sign in
Toggle navigation
Menu
Open sidebar
minerva
core
Commits
4122293e
Commit
4122293e
authored
Apr 19, 2018
by
Piotr Gawron
Browse files
OpenLayers support different layers and initial center point and zoom
parent
cd304d87
Changes
7
Hide whitespace changes
Inline
Side-by-side
frontend-js/package-lock.json
View file @
4122293e
...
...
@@ -39,30 +39,38 @@
"litemol"
:
"github:dsehnal/LiteMol#67556b0de0d2428f9494136758cbf8a662f66412"
},
"dependencies"
:
{
"ProtVista"
:
{
"version"
:
"git://github.com/davidhoksza/protvista.git#4e4bb737ba1e183291505bd25f8bae2e651ce21e"
,
"dev"
:
true
,
"requires"
:
{
"d3"
:
"3.5.17"
,
"file-saver"
:
"1.3.3"
,
"jquery"
:
"2.2.4"
,
"jszip"
:
"3.1.4"
,
"underscore"
:
"1.8.3"
},
"dependencies"
:
{
"jquery"
:
{
"version"
:
"2.2.4"
,
"resolved"
:
"https://registry.npmjs.org/jquery/-/jquery-2.2.4.tgz"
,
"integrity"
:
"sha1-LInWiJterFIqfuoywUUhVZxsvwI="
,
"dev"
:
true
}
}
},
"jquery"
:
{
"version"
:
"3.3.1"
,
"resolved"
:
"https://registry.npmjs.org/jquery/-/jquery-3.3.1.tgz"
,
"integrity"
:
"sha512-Ubldcmxp5np52/ENotGxlLe6aGMvmF4R8S6tZjsP6Knsaxd/xp3Zrh50cG93lR6nPXyUFwzN3ZSOQI0wRJNdGg=="
,
"dev"
:
true
}
}
},
"ProtVista"
:
{
"version"
:
"git://github.com/davidhoksza/protvista.git#4e4bb737ba1e183291505bd25f8bae2e651ce21e"
,
"dev"
:
true
,
"requires"
:
{
"d3"
:
"3.5.17"
,
"file-saver"
:
"1.3.3"
,
"jquery"
:
"2.2.4"
,
"jszip"
:
"3.1.4"
,
"underscore"
:
"1.8.3"
},
"dependencies"
:
{
"jquery"
:
{
"version"
:
"2.2.4"
,
"resolved"
:
"https://registry.npmjs.org/jquery/-/jquery-2.2.4.tgz"
,
"integrity"
:
"sha1-LInWiJterFIqfuoywUUhVZxsvwI="
,
"dev"
:
true
},
"litemol"
:
{
"version"
:
"github:dsehnal/LiteMol#67556b0de0d2428f9494136758cbf8a662f66412"
,
"dev"
:
true
,
"requires"
:
{
"@types/react"
:
"15.6.15"
,
"@types/react-dom"
:
"15.5.7"
}
}
}
},
...
...
@@ -3058,14 +3066,6 @@
"immediate"
:
"3.0.6"
}
},
"litemol"
:
{
"version"
:
"github:dsehnal/LiteMol#67556b0de0d2428f9494136758cbf8a662f66412"
,
"dev"
:
true
,
"requires"
:
{
"@types/react"
:
"15.6.15"
,
"@types/react-dom"
:
"15.5.7"
}
},
"lodash"
:
{
"version"
:
"4.17.4"
,
"resolved"
:
"https://registry.npmjs.org/lodash/-/lodash-4.17.4.tgz"
,
...
...
frontend-js/src/main/js/GuiConnector.js
View file @
4122293e
...
...
@@ -134,6 +134,11 @@ GuiConnector.prototype.getLoadingImg = function () {
return
"
icons/ajax-loader.gif
"
;
};
GuiConnector
.
prototype
.
getEmptyTileUrl
=
function
()
{
return
"
resources/images/empty_tile.png
"
;
};
/**
* Returns home directory for images in the application.
*/
...
...
frontend-js/src/main/js/map/canvas/GoogleMaps/GoogleMapsApiCanvas.js
View file @
4122293e
...
...
@@ -17,15 +17,6 @@ var GoogleMapsApiRectangle = require('./GoogleMapsApiRectangle');
function
GoogleMapsApiCanvas
(
element
,
options
)
{
MapCanvas
.
call
(
this
,
element
,
options
);
// following fields are used in conversion between x,y coordinates and lat,lng
// coordinates
this
.
pixelOrigin_
=
new
Point
(
options
.
tileSize
/
2
,
options
.
tileSize
/
2
);
this
.
pixelsPerLonDegree_
=
options
.
tileSize
/
360
;
this
.
pixelsPerLonRadian_
=
options
.
tileSize
/
(
2
*
Math
.
PI
);
/* jshint bitwise: false */
this
.
zoomFactor
=
Math
.
max
(
options
.
width
,
options
.
height
)
/
(
options
.
tileSize
/
(
1
<<
options
.
minZoom
));
var
self
=
this
;
self
.
setGoogleMap
(
new
google
.
maps
.
Map
(
element
,
self
.
prepareGoogleMapOptions
(
options
)));
self
.
setupBackgroundOverlays
(
options
.
backgroundOverlays
);
...
...
@@ -161,26 +152,6 @@ GoogleMapsApiCanvas.prototype.addCenterButton = function () {
};
/**
* Transforms coordinates on the map from {Point} to
* google.maps.LatLng
*
* @param point
* coordinates in standard x,y format
* @return coordinates in lat,lng format
*/
GoogleMapsApiCanvas
.
prototype
.
fromPointToLatLng
=
function
(
point
)
{
var
me
=
this
;
// rescale the point (all computations are done assuming that we work on
// TILE_SIZE square)
var
p
=
new
Point
(
point
.
x
/
me
.
zoomFactor
,
point
.
y
/
me
.
zoomFactor
);
var
origin
=
me
.
pixelOrigin_
;
var
lng
=
(
p
.
x
-
origin
.
x
)
/
me
.
pixelsPerLonDegree_
;
var
latRadians
=
(
p
.
y
-
origin
.
y
)
/
-
me
.
pixelsPerLonRadian_
;
var
lat
=
Functions
.
radiansToDegrees
(
2
*
Math
.
atan
(
Math
.
exp
(
latRadians
))
-
Math
.
PI
/
2
);
return
new
google
.
maps
.
LatLng
(
lat
,
lng
);
};
/**
* Transforms google.maps.LatLng to tile coordinate (for instance on which tile
...
...
@@ -202,33 +173,6 @@ GoogleMapsApiCanvas.prototype.latLngToTile = function (latLng, z) {
return
tileCoordinate
;
};
/**
* Transforms coordinates on the map from google.maps.LatLng to
* {Point}
*
* @param latLng
* in lat,lng format
* @param {Point} coordinates in x,y format
*
*/
GoogleMapsApiCanvas
.
prototype
.
fromLatLngToPoint
=
function
(
latLng
)
{
var
me
=
this
;
var
point
=
new
Point
(
0
,
0
);
var
origin
=
me
.
pixelOrigin_
;
point
.
x
=
origin
.
x
+
latLng
.
lng
()
*
me
.
pixelsPerLonDegree_
;
// Truncating to 0.9999 effectively limits latitude to 89.189. This is
// about a third of a tile past the edge of the world tile.
var
siny
=
Functions
.
bound
(
Math
.
sin
(
Functions
.
degreesToRadians
(
latLng
.
lat
())),
-
0.9999
,
0.9999
);
point
.
y
=
origin
.
y
+
0.5
*
Math
.
log
((
1
+
siny
)
/
(
1
-
siny
))
*
-
me
.
pixelsPerLonRadian_
;
// rescale the point (all computations are done assuming that we work on
// TILE_SIZE square)
point
.
x
*=
me
.
zoomFactor
;
point
.
y
*=
me
.
zoomFactor
;
return
point
;
};
GoogleMapsApiCanvas
.
prototype
.
createMarker
=
function
(
options
)
{
if
(
!
(
options
.
position
instanceof
Point
))
{
...
...
@@ -452,5 +396,31 @@ GoogleMapsApiCanvas.prototype.removeSelection = function () {
}
};
/**
* Transforms coordinates on the map from {Point} to
* {google.maps.LatLng}
*
* @param {Point} point
* coordinates in standard x,y format
* @return {google.maps.LatLng} coordinates in lat,lng format
*/
GoogleMapsApiCanvas
.
prototype
.
fromPointToLatLng
=
function
(
point
)
{
var
tmp
=
MapCanvas
.
prototype
.
pointToLatLng
.
call
(
this
,
point
);
return
new
google
.
maps
.
LatLng
(
tmp
[
0
],
tmp
[
1
]);
};
/**
* Transforms coordinates on the map from {google.maps.LatLng} to
* {Point}
*
* @param {google.maps.LatLng} latLng
* in lat,lng format
* @returns {Point} coordinates in x,y format
*
*/
GoogleMapsApiCanvas
.
prototype
.
fromLatLngToPoint
=
function
(
latLng
)
{
return
MapCanvas
.
prototype
.
latLngToPoint
.
call
(
this
,
[
latLng
.
lat
(),
latLng
.
lng
()]);
};
module
.
exports
=
GoogleMapsApiCanvas
;
frontend-js/src/main/js/map/canvas/MapCanvas.js
View file @
4122293e
...
...
@@ -3,7 +3,9 @@
// noinspection JSUnusedLocalSymbols
var
logger
=
require
(
'
../../logger
'
);
var
Functions
=
require
(
'
../../Functions
'
);
var
ObjectWithListeners
=
require
(
'
../../ObjectWithListeners
'
);
var
Point
=
require
(
'
./Point
'
);
function
MapCanvas
(
element
,
options
)
{
...
...
@@ -21,6 +23,15 @@ function MapCanvas(element, options) {
this
.
registerListenerType
(
"
shape-rightclick
"
);
this
.
setOptions
(
options
);
// following fields are used in conversion between x,y coordinates and lat,lng
// coordinates
this
.
pixelOrigin_
=
new
Point
(
options
.
tileSize
/
2
,
options
.
tileSize
/
2
);
this
.
pixelsPerLonDegree_
=
options
.
tileSize
/
360
;
this
.
pixelsPerLonRadian_
=
options
.
tileSize
/
(
2
*
Math
.
PI
);
/* jshint bitwise: false */
this
.
zoomFactor
=
Math
.
max
(
options
.
width
,
options
.
height
)
/
(
options
.
tileSize
/
(
1
<<
options
.
minZoom
));
}
MapCanvas
.
prototype
=
Object
.
create
(
ObjectWithListeners
.
prototype
);
...
...
@@ -153,4 +164,55 @@ MapCanvas.prototype.triggerListeners = function (type, data) {
throw
new
Error
(
"
Not implemented
"
);
};
/**
* Transforms coordinates on the map from {Point} to
* google.maps.LatLng
*
* @param {Point} point
* coordinates in standard x,y format
* @return {Number[]} coordinates in lat,lng format
*/
MapCanvas
.
prototype
.
pointToLatLng
=
function
(
point
)
{
var
me
=
this
;
// rescale the point (all computations are done assuming that we work on
// TILE_SIZE square)
var
p
=
new
Point
(
point
.
x
/
me
.
zoomFactor
,
point
.
y
/
me
.
zoomFactor
);
var
origin
=
me
.
pixelOrigin_
;
var
lng
=
(
p
.
x
-
origin
.
x
)
/
me
.
pixelsPerLonDegree_
;
var
latRadians
=
(
p
.
y
-
origin
.
y
)
/
-
me
.
pixelsPerLonRadian_
;
var
lat
=
Functions
.
radiansToDegrees
(
2
*
Math
.
atan
(
Math
.
exp
(
latRadians
))
-
Math
.
PI
/
2
);
return
[
lat
,
lng
];
};
/**
* Transforms coordinates on the map from google.maps.LatLng to
* {Point}
*
* @param {Number[]} latLng
* in lat,lng format
* @returns {Point} coordinates in x,y format
*
*/
MapCanvas
.
prototype
.
latLngToPoint
=
function
(
latLng
)
{
var
lat
=
latLng
[
0
];
var
lng
=
latLng
[
1
];
var
me
=
this
;
var
point
=
new
Point
(
0
,
0
);
var
origin
=
me
.
pixelOrigin_
;
point
.
x
=
origin
.
x
+
lng
*
me
.
pixelsPerLonDegree_
;
// Truncating to 0.9999 effectively limits latitude to 89.189. This is
// about a third of a tile past the edge of the world tile.
var
siny
=
Functions
.
bound
(
Math
.
sin
(
Functions
.
degreesToRadians
(
lat
)),
-
0.9999
,
0.9999
);
point
.
y
=
origin
.
y
+
0.5
*
Math
.
log
((
1
+
siny
)
/
(
1
-
siny
))
*
-
me
.
pixelsPerLonRadian_
;
// rescale the point (all computations are done assuming that we work on
// TILE_SIZE square)
point
.
x
*=
me
.
zoomFactor
;
point
.
y
*=
me
.
zoomFactor
;
return
point
;
};
module
.
exports
=
MapCanvas
;
frontend-js/src/main/js/map/canvas/OpenLayers/OpenLayerCanvas.js
View file @
4122293e
...
...
@@ -5,6 +5,7 @@ var ol;
var
logger
=
require
(
'
../../../logger
'
);
var
Bounds
=
require
(
'
../Bounds
'
);
var
GuiConnector
=
require
(
'
../../../GuiConnector
'
);
var
Functions
=
require
(
'
../../../Functions
'
);
var
MapCanvas
=
require
(
'
../MapCanvas
'
);
var
Point
=
require
(
'
../Point
'
);
...
...
@@ -13,19 +14,19 @@ function OpenLayerCanvas(element, options) {
ol
=
require
(
'
openlayers/dist/ol-debug
'
);
MapCanvas
.
call
(
this
,
element
,
options
);
$
(
element
).
css
(
"
background-color
"
,
"
#e4e2de
"
);
var
self
=
this
;
self
.
setOpenLayersMap
(
new
ol
.
Map
({
target
:
element
,
layers
:
[
new
ol
.
layer
.
Tile
({
source
:
new
ol
.
source
.
OSM
()
})
],
layers
:
self
.
createLayers
(
options
),
view
:
new
ol
.
View
({
center
:
[
0
,
0
],
zoom
:
0
center
:
self
.
fromPointToProjection
(
options
.
center
),
zoom
:
options
.
zoom
,
minZoom
:
options
.
minZoom
,
maxZoom
:
options
.
maxZoom
})
}));
}
OpenLayerCanvas
.
prototype
=
Object
.
create
(
MapCanvas
.
prototype
);
...
...
@@ -35,6 +36,57 @@ OpenLayerCanvas.prototype.setOpenLayersMap = function (map) {
this
.
_map
=
map
;
};
OpenLayerCanvas
.
prototype
.
createLayers
=
function
(
options
)
{
var
self
=
this
;
var
result
=
[];
console
.
log
(
options
);
self
.
_layers
=
[];
options
.
backgroundOverlays
.
forEach
(
function
(
overlay
,
index
)
{
var
layer
=
new
ol
.
layer
.
Tile
({
visible
:
(
index
===
0
),
source
:
new
ol
.
source
.
XYZ
({
minZoom
:
options
.
minZoom
,
maxZoom
:
options
.
maxZoom
,
tileLoadFunction
:
function
(
imageTile
,
src
)
{
if
(
src
!==
null
)
{
imageTile
.
getImage
().
src
=
src
;
}
},
tileUrlFunction
:
function
(
coordinate
)
{
var
zoom
=
coordinate
[
0
];
// we have 1 tile on self.getConfiguration().MIN_ZOOM and
// therefore must limit tails according to this
/* jshint bitwise: false */
var
maxTileRange
=
1
<<
(
zoom
-
self
.
getMinZoom
());
var
maxTileXRange
=
maxTileRange
;
var
maxTileYRange
=
maxTileRange
;
//transform the coordinates to something that was used in google maps
var
x
=
coordinate
[
1
];
var
y
=
-
coordinate
[
2
]
-
1
;
var
width
=
self
.
getWidth
();
var
height
=
self
.
getHeight
();
if
(
width
>
height
)
{
maxTileYRange
=
height
/
width
*
maxTileRange
;
}
else
if
(
width
<
height
)
{
maxTileXRange
=
width
/
height
*
maxTileRange
;
}
if
(
y
<
0
||
y
>=
maxTileYRange
||
x
<
0
||
x
>=
maxTileXRange
)
{
return
null
;
}
return
overlay
.
directory
+
"
/
"
+
zoom
+
"
/
"
+
x
+
"
/
"
+
y
+
"
.PNG
"
;
}
})
});
self
.
_layers
[
overlay
.
id
]
=
layer
;
result
.
push
(
layer
);
});
return
result
;
};
OpenLayerCanvas
.
prototype
.
setOptions
=
function
(
options
)
{
this
.
_options
=
options
;
};
...
...
@@ -107,13 +159,30 @@ OpenLayerCanvas.prototype.setZoom = function (zoom) {
* @returns {string}
*/
OpenLayerCanvas
.
prototype
.
getBackgroundId
=
function
()
{
logger
.
fatal
(
"
Not implemented
"
);
return
this
.
_backgroundId
;
var
layers
=
this
.
_layers
;
for
(
var
id
in
layers
)
{
if
(
layers
.
hasOwnProperty
(
id
))
{
var
layer
=
layers
[
id
];
if
(
layer
.
getVisible
())
{
return
id
;
}
}
}
return
null
;
};
OpenLayerCanvas
.
prototype
.
setBackgroundId
=
function
(
backgroundId
)
{
this
.
_backgroundId
=
backgroundId
;
logger
.
fatal
(
"
Not implemented
"
);
backgroundId
=
parseInt
(
backgroundId
);
console
.
log
(
"
background:
"
,
backgroundId
);
var
layers
=
this
.
_layers
;
for
(
var
id
in
layers
)
{
if
(
layers
.
hasOwnProperty
(
id
))
{
var
layer
=
layers
[
id
];
var
visible
=
(
parseInt
(
id
)
===
backgroundId
);
console
.
log
(
id
,
"
show
"
,
visible
);
layer
.
setVisible
(
visible
);
}
}
};
/**
...
...
@@ -161,8 +230,17 @@ OpenLayerCanvas.prototype.removeSelection = function () {
logger
.
fatal
(
"
Not implemented
"
);
};
Map
Canvas
.
prototype
.
triggerListeners
=
function
(
type
,
data
)
{
OpenLayer
Canvas
.
prototype
.
triggerListeners
=
function
(
type
,
data
)
{
logger
.
fatal
(
"
Not implemented
"
);
};
OpenLayerCanvas
.
prototype
.
fromPointToProjection
=
function
(
point
)
{
var
latLng
=
this
.
pointToLatLng
(
point
);
return
ol
.
proj
.
fromLonLat
([
latLng
[
1
],
latLng
[
0
]]);
};
OpenLayerCanvas
.
prototype
.
fromProjectionToPoint
=
function
(
projection
)
{
var
lngLat
=
ol
.
proj
.
toLonLat
(
projection
);
return
this
.
latLngToPoint
([
lngLat
[
1
],
lngLat
[
0
]]);
};
module
.
exports
=
OpenLayerCanvas
;
frontend-js/src/test/js/google-map-mock.js
View file @
4122293e
...
...
@@ -71,6 +71,7 @@ var google = {
this
.
lng
=
function
()
{
return
this
.
longitude
;
};
return
this
;
},
LatLngBounds
:
function
(
ne
,
sw
)
{
var
data
=
{
...
...
frontend-js/src/test/js/map/canvas/OpenLayers/OpenLayersCanvas-test.js
0 → 100644
View file @
4122293e
"
use strict
"
;
require
(
"
../../../mocha-config
"
);
// noinspection JSUnusedLocalSymbols
var
logger
=
require
(
'
../../../logger
'
);
var
OpenLayerCanvas
=
require
(
'
../../../../../main/js/map/canvas/OpenLayers/OpenLayerCanvas
'
);
var
Point
=
require
(
'
../../../../../main/js/map/canvas/Point
'
);
var
SelectionContextMenu
=
require
(
'
../../../../../main/js/gui/SelectionContextMenu
'
);
var
chai
=
require
(
'
chai
'
);
var
assert
=
chai
.
assert
;
describe
(
'
OpenLayerCanvas
'
,
function
()
{
var
testOptions
=
{
center
:
new
Point
(
0
,
0
),
tileSize
:
256
,
width
:
300
,
height
:
600
,
backgroundOverlays
:
[{
id
:
1
,
name
:
"
overlay
"
,
directory
:
"
overlay_dir
"
}]
};
it
(
"
constructor
"
,
function
()
{
var
canvas
=
new
OpenLayerCanvas
(
testDiv
,
testOptions
);
assert
.
ok
(
canvas
.
pixelOrigin_
);
assert
.
ok
(
canvas
.
pixelsPerLonDegree_
);
assert
.
ok
(
canvas
.
pixelsPerLonRadian_
);
assert
.
ok
(
canvas
.
zoomFactor
);
});
it
(
"
Point - Projection conversion
"
,
function
()
{
var
canvas
=
new
OpenLayerCanvas
(
testDiv
,
testOptions
);
var
x
=
199
;
var
y
=
110
;
var
point
=
new
Point
(
x
,
y
);
var
coordinates
=
canvas
.
fromPointToProjection
(
point
);
var
point2
=
canvas
.
fromProjectionToPoint
(
coordinates
);
assert
.
closeTo
(
point2
.
x
,
point
.
x
,
0.5
,
"
X coordinate is invalid after transformation
"
);
assert
.
closeTo
(
point2
.
y
,
point
.
y
,
0.5
,
"
Y coordinate is invalid after transformation
"
);
});
});
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
.
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment