Skip to content
GitLab
Explore
Sign in
Register
Primary navigation
Search or go to…
Project
V
VIPSLogic
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Wiki
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Build
Pipelines
Jobs
Pipeline schedules
Artifacts
Deploy
Releases
Container registry
Model registry
Operate
Environments
Monitor
Incidents
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
Community forum
Contribute to GitLab
Provide feedback
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
VIPS
VIPSLogic
Commits
a71b8d9a
Commit
a71b8d9a
authored
9 years ago
by
vil
Browse files
Options
Downloads
Patches
Plain Diff
Changes from last commit, upgrade to openlayers 3.11.2
parent
9b0cc020
No related branches found
No related tags found
No related merge requests found
Changes
1
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
src/main/webapp/js/observationFormMap.js
+149
-128
149 additions, 128 deletions
src/main/webapp/js/observationFormMap.js
with
149 additions
and
128 deletions
src/main/webapp/js/observationFormMap.js
+
149
−
128
View file @
a71b8d9a
...
...
@@ -32,62 +32,64 @@
function
initMap
(
center
,
zoomLevel
,
displayMarker
)
{
var
osm
=
new
ol
.
layer
.
Tile
({
'
title
'
:
'
OSM
'
,
type
:
'
base
'
,
visible
:
true
,
source
:
new
ol
.
source
.
OSM
({
attributions
:
[
new
ol
.
Attribution
({
html
:
mapConstants
.
MAP_ATTRIBUTION
})
]
})
});
var
osm
=
new
ol
.
layer
.
Tile
({
'
title
'
:
'
OSM
'
,
type
:
'
base
'
,
visible
:
true
,
source
:
new
ol
.
source
.
OSM
({
attributions
:
[
new
ol
.
Attribution
({
html
:
mapConstants
.
MAP_ATTRIBUTION
})
]
})
});
var
bingArial
=
new
ol
.
layer
.
Tile
({
title
:
'
Bing Arial
'
,
type
:
'
base
'
,
visible
:
false
,
source
:
new
ol
.
source
.
BingMaps
({
imagerySet
:
'
Aerial
'
,
key
:
'
Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3
'
})
});
var
bingArial
=
new
ol
.
layer
.
Tile
({
title
:
'
Bing Arial
'
,
type
:
'
base
'
,
visible
:
false
,
source
:
new
ol
.
source
.
BingMaps
({
imagerySet
:
'
Aerial
'
,
key
:
'
Ak-dzM4wZjSqTlzveKz5u0d4IQ4bRzVI309GxmkgSVr1ewS6iPSrOvOKhA-CJlm3
'
})
});
var
fylke_layer
=
new
ol
.
layer
.
Vector
({
title
:
'
Fylkesgrenser
'
,
type
:
'
overlay
'
,
visible
:
false
,
source
:
new
ol
.
source
.
GeoJSON
({
projection
:
'
EPSG:3857
'
,
url
:
'
/geoserver/ows?srsname=EPSG:3857&format_options=decimals:0&service=WFS&version=1.0.0&outputFormat=json&request=GetFeature&typeName=sl:n5_forv_fylke_mv&
'
}),
style
:
new
ol
.
style
.
Style
({
stroke
:
new
ol
.
style
.
Stroke
({
color
:
'
rgba(0, 0, 255, 1.0)
'
,
width
:
3
})
})
});
var
kommune_layer
=
new
ol
.
layer
.
Vector
({
title
:
'
Kommunegrenser
'
,
type
:
'
overlay
'
,
visible
:
false
,
source
:
new
ol
.
source
.
GeoJSON
({
projection
:
'
EPSG:3857
'
,
url
:
'
/geoserver/ows?srsname=EPSG:3857&format_options=decimals:0&service=WFS&version=1.0.0&outputFormat=json&request=GetFeature&typeName=sl:n2000_komm_flate&
'
}),
style
:
new
ol
.
style
.
Style
({
stroke
:
new
ol
.
style
.
Stroke
({
color
:
'
rgba(255, 0, 0, 1.0)
'
,
width
:
1
})
})
});
var
fylke_layer
=
new
ol
.
layer
.
Vector
({
title
:
'
Fylkesgrenser
'
,
type
:
'
overlay
'
,
visible
:
false
,
source
:
new
ol
.
source
.
Vector
({
projection
:
'
EPSG:3857
'
,
format
:
new
ol
.
format
.
GeoJSON
(),
url
:
'
/geoserver/ows?srsname=EPSG:3857&format_options=decimals:0&service=WFS&version=1.0.0&outputFormat=json&request=GetFeature&typeName=sl:n5_forv_fylke_mv&
'
}),
style
:
new
ol
.
style
.
Style
({
stroke
:
new
ol
.
style
.
Stroke
({
color
:
'
rgba(0, 0, 255, 1.0)
'
,
width
:
3
})
})
});
var
kommune_layer
=
new
ol
.
layer
.
Vector
({
title
:
'
Kommunegrenser
'
,
type
:
'
overlay
'
,
visible
:
false
,
source
:
new
ol
.
source
.
Vector
({
projection
:
'
EPSG:3857
'
,
format
:
new
ol
.
format
.
GeoJSON
(),
url
:
'
/geoserver/ows?srsname=EPSG:3857&format_options=decimals:0&service=WFS&version=1.0.0&outputFormat=json&request=GetFeature&typeName=sl:n2000_komm_flate&
'
}),
style
:
new
ol
.
style
.
Style
({
stroke
:
new
ol
.
style
.
Stroke
({
color
:
'
rgba(255, 0, 0, 1.0)
'
,
width
:
1
})
})
});
/* var vector_layer = new ol.layer.Vector({
/* var vector_layer = new ol.layer.Vector({
title: 'Tegnelayer',
type: 'overlay',
visible: true,
...
...
@@ -194,7 +196,7 @@ function initMap(center, zoomLevel, displayMarker) {
var
map
=
new
ol
.
Map
({
target
:
'
observationFormMap
'
,
//layers: layers,
layers
:
[
osm
,
bingArial
,
fylke_layer
,
kommune_layer
],
layers
:
[
osm
,
bingArial
,
fylke_layer
,
kommune_layer
],
renderer
:
'
canvas
'
});
...
...
@@ -240,74 +242,83 @@ function initMap(center, zoomLevel, displayMarker) {
//###################### DRAWING ########################################
// make interactions global so they can later be removed
// The features are not added to a regular vector layer/source,
// but to a feature overlay which holds a collection of features.
// This collection is passed to the modify and also the draw
// interaction, so that both can add or modify features.
var
feature
Overlay
=
new
ol
.
FeatureOverlay
({
style
:
new
ol
.
style
.
Style
({
fill
:
new
ol
.
s
tyle
.
Fill
({
color
:
'
rgba(255, 0, 255, 0.2)
'
// but to a feature overlay which holds a collection of features.
// This collection is passed to the modify and also the draw
// interaction, so that both can add or modify features.
var
feature
s
=
new
ol
.
Collection
();
var
featureOverlay
=
new
ol
.
layer
.
Vector
({
source
:
new
ol
.
s
ource
.
Vector
({
features
:
features
}),
stroke
:
new
ol
.
style
.
Stroke
({
color
:
'
#ff00ff
'
,
width
:
2
}),
image
:
new
ol
.
style
.
Circle
({
radius
:
7
,
style
:
new
ol
.
style
.
Style
({
fill
:
new
ol
.
style
.
Fill
({
color
:
'
#ff00ff
'
color
:
'
rgba(255, 0, 255, 0.2)
'
}),
stroke
:
new
ol
.
style
.
Stroke
({
color
:
'
#ff00ff
'
,
width
:
2
}),
image
:
new
ol
.
style
.
Circle
({
radius
:
7
,
fill
:
new
ol
.
style
.
Fill
({
color
:
'
#ff00ff
'
})
})
})
})
});
featureOverlay
.
setMap
(
map
);
var
modify
=
new
ol
.
interaction
.
Modify
({
features
:
featureOverlay
.
getFeatures
(),
// the SHIFT key must be pressed to delete vertices, so
// that new vertices can be drawn at the same position
// of existing vertices
deleteCondition
:
function
(
event
)
{
return
ol
.
events
.
condition
.
shiftKeyOnly
(
event
)
&&
});
featureOverlay
.
setMap
(
map
);
var
modify
=
new
ol
.
interaction
.
Modify
({
features
:
features
,
// the SHIFT key must be pressed to delete vertices, so
// that new vertices can be drawn at the same position
// of existing vertices
deleteCondition
:
function
(
event
)
{
return
ol
.
events
.
condition
.
shiftKeyOnly
(
event
)
&&
ol
.
events
.
condition
.
singleClick
(
event
);
}
});
map
.
addInteraction
(
modify
);
var
draw
;
// global so we can remove it later
function
addInteraction
()
{
draw
=
new
ol
.
interaction
.
Draw
({
features
:
featureOverlay
.
getFeatures
(),
type
:
/** @type {ol.geom.GeometryType} */
(
typeSelect
.
value
)
}
});
map
.
addInteraction
(
draw
);
}
map
.
addInteraction
(
modify
);
var
typeSelect
=
document
.
getElementById
(
'
type
'
);
var
draw
;
// global so we can remove it later
function
addInteraction
()
{
draw
=
new
ol
.
interaction
.
Draw
({
features
:
features
,
type
:
/** @type {ol.geom.GeometryType} */
(
typeSelect
.
value
)
});
map
.
addInteraction
(
draw
);
}
var
typeSelect
=
document
.
getElementById
(
'
type
'
);
/**
* Let user change the geometry type.
* @param {Event} e Change event.
*/
typeSelect
.
onchange
=
function
(
e
)
{
map
.
removeInteraction
(
draw
);
addInteraction
();
};
addInteraction
();
/**
* Let user change the geometry type.
* @param {Event} e Change event.
*/
typeSelect
.
onchange
=
function
(
e
)
{
map
.
removeInteraction
(
draw
);
addInteraction
();
};
addInteraction
();
$
(
'
#save-button
'
).
click
(
function
()
{
$
(
'
#save-button
'
).
click
(
function
()
{
// get the features drawn on the map
var
features
=
featureOverlay
.
get
Features
().
getArray
();
var
features
=
featureOverlay
.
get
Source
().
getFeatures
();
// create an object to write features on a output KML file
var
format
=
new
ol
.
format
.
GeoJSON
(
/*{
var
format
=
new
ol
.
format
.
GeoJSON
(
/*{
defaultDataProjection: 'EPSG:3857'
}*/
);
}*/
);
// write features to GeoJSON format using projection EPSG:4326
var
result
=
format
.
writeFeatures
(
features
,
{
featureProjection
:
'
EPSG:4326
'
});
var
result
=
format
.
writeFeatures
(
features
,
{
featureProjection
:
'
EPSG:4326
'
});
/*var desimalDegrees = format.readFeatures(result, {
dataProjection: 'EPSG:3857',
...
...
@@ -320,12 +331,12 @@ $('#save-button').click(function() {
//var str = (new XMLSerializer).serializeToString(kml);
//var blob = new Blob([str], {type: "text/plain;charset=utf-8;"});
//saveAs(blob, "NovaCamada.kml");
});
});
// clear map when user clicks on 'Delete all features'
$
(
"
#delete
"
).
click
(
function
()
{
clearMap
();
...
...
@@ -333,7 +344,7 @@ $('#save-button').click(function() {
// clears the map and the output of the data
function
clearMap
()
{
featureOverlay
.
get
Features
().
clear
();
featureOverlay
.
get
Source
().
clear
(
true
);
}
// creates unique id's
...
...
@@ -347,35 +358,42 @@ $('#save-button').click(function() {
}
}
//######################## GEOLOCATION #############
//######################## GEOLOCATION #############
var
geolocation
=
new
ol
.
Geolocation
({
projection
:
view
.
getProjection
()
});
var
track
=
new
ol
.
dom
.
Input
(
document
.
getElementById
(
'
track
'
));
track
.
bindTo
(
'
checked
'
,
geolocation
,
'
tracking
'
);
function
el
(
id
)
{
return
document
.
getElementById
(
id
);
}
el
(
'
track
'
).
addEventListener
(
'
change
'
,
function
()
{
geolocation
.
setTracking
(
this
.
checked
);
});
// update the HTML page when the position changes.
geolocation
.
on
(
'
change
'
,
function
()
{
console
.
log
(
'
Geolocation change
'
);
$
(
'
#accuracy
'
).
text
(
geolocation
.
getAccuracy
()
+
'
[m]
'
);
$
(
'
#altitude
'
).
text
(
geolocation
.
getAltitude
()
+
'
[m]
'
);
$
(
'
#altitudeAccuracy
'
).
text
(
geolocation
.
getAltitudeAccuracy
()
+
'
[m]
'
);
$
(
'
#heading
'
).
text
(
geolocation
.
getHeading
()
+
'
[rad]
'
);
$
(
'
#speed
'
).
text
(
geolocation
.
getSpeed
()
+
'
[m/s]
'
);
/*el('accuracy').innerText = geolocation.getAccuracy() + ' [m]';
el('altitude').innerText = geolocation.getAltitude() + ' [m]';
el('altitudeAccuracy').innerText = geolocation.getAltitudeAccuracy() + ' [m]';
el('heading').innerText = geolocation.getHeading() + ' [rad]';
el('speed').innerText = geolocation.getSpeed() + ' [m/s]';*/
});
// handle geolocation error.
geolocation
.
on
(
'
error
'
,
function
(
error
)
{
var
info
=
document
.
getElementById
(
'
info
'
);
info
.
innerHTML
=
error
.
message
;
info
.
style
.
display
=
''
;
alert
(
error
.
message
);
/*var info = document.getElementById('info');
info.innerHTML = error.message;
info.style.display = '';*/
});
var
accuracyFeature
=
new
ol
.
Feature
();
accuracyFeature
.
bindTo
(
'
geometry
'
,
geolocation
,
'
accuracyGeometry
'
);
geolocation
.
on
(
'
change:accuracyGeometry
'
,
function
()
{
accuracyFeature
.
setGeometry
(
geolocation
.
getAccuracyGeometry
());
});
var
positionFeature
=
new
ol
.
Feature
();
positionFeature
.
setStyle
(
new
ol
.
style
.
Style
({
...
...
@@ -391,21 +409,24 @@ $('#save-button').click(function() {
})
}));
geolocation
.
on
(
'
change:position
'
,
function
()
{
var
coordinates
=
geolocation
.
getPosition
();
updateLocationPosition
(
coordinates
);
positionFeature
.
setGeometry
(
coordinates
?
new
ol
.
geom
.
Point
(
coordinates
)
:
null
);
});
positionFeature
.
bindTo
(
'
geometry
'
,
geolocation
,
'
position
'
)
.
transform
(
function
()
{},
function
(
coordinates
)
{
updateLocationPosition
(
coordinates
);
return
coordinates
?
new
ol
.
geom
.
Point
(
coordinates
)
:
null
;
});
var
featuresOverlay
=
new
ol
.
FeatureOverlay
({
var
featuresOverlay
=
new
ol
.
layer
.
Vector
({
map
:
map
,
features
:
[
accuracyFeature
,
positionFeature
]
source
:
new
ol
.
source
.
Vector
({
features
:
[
accuracyFeature
,
positionFeature
]
})
});
function
updateLocationPosition
(
coordinate
)
{
var
locationPosition
=
ol
.
coordinate
.
toStringXY
(
ol
.
proj
.
transform
(
coordinate
,
'
EPSG:3857
'
,
'
EPSG:4326
'
),
8
);
// Set/move location pin
...
...
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment