add layer management in url
parent
1e7f6df1ec
commit
b6b4a309d8
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
63
src/app.js
63
src/app.js
|
@ -134,8 +134,8 @@ var vectorSource = new VectorSource({
|
|||
attributions: '©<a href="https://git.milliways.info/Milliways/cccamp19-map">Milliways</a>',
|
||||
});
|
||||
|
||||
var tileLayer = new TileLayer({
|
||||
title: 'Photos',
|
||||
var orthoLayer = new TileLayer({
|
||||
title: 'Ortho Imagery',
|
||||
type: 'base',
|
||||
source: new XYZ({
|
||||
url: 'https://cdn.eventphone.de/maps/ziegeleipark/{z}/{x}/{y}.jpg',
|
||||
|
@ -190,7 +190,7 @@ var map = new MapClass({
|
|||
new LayerGroup({
|
||||
title: 'Base Layers',
|
||||
layers: [
|
||||
tileLayer,
|
||||
orthoLayer,
|
||||
osmLayer
|
||||
]
|
||||
}),
|
||||
|
@ -221,7 +221,14 @@ function parseURL(url) {
|
|||
queries = parser.search.replace(/^\?/, '').split('&');
|
||||
for( i = 0; i < queries.length; i++ ) {
|
||||
split = queries[i].split('=');
|
||||
searchObject[split[0]] = split[1];
|
||||
if(searchObject[split[0]]) {
|
||||
if(!Array.isArray(searchObject[split[0]])) {
|
||||
searchObject[split[0]] = [searchObject[split[0]]];
|
||||
}
|
||||
searchObject[split[0]].push(decodeURI(split[1]));
|
||||
} else {
|
||||
searchObject[split[0]] = decodeURI(split[1]);
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
|
@ -238,27 +245,46 @@ function generateHash(info) {
|
|||
var params=[]
|
||||
for( var param in info.searchObject) {
|
||||
if(param!='') {
|
||||
params.push(`${param}=${info.searchObject[param]}`);
|
||||
if(Array.isArray(info.searchObject[param])){
|
||||
info.searchObject[param].map(function(value) {
|
||||
params.push(`${encodeURI(param)}=${encodeURI(value)}`);
|
||||
});
|
||||
} else {
|
||||
params.push(`${encodeURI(param)}=${encodeURI(info.searchObject[param])}`);
|
||||
}
|
||||
}
|
||||
}
|
||||
return `#${info.pathname}?${params.join('&')}`;
|
||||
}
|
||||
|
||||
var layers = [orthoLayer, osmLayer, vectorLayer];
|
||||
var hash_info;
|
||||
|
||||
var coordinate_parser = /^(\d+)\/(-?\d*\.?\d*)\/(-?\d*\.?\d*)/;
|
||||
|
||||
function setCoordinate() {
|
||||
function parseHash() {
|
||||
hash_info=parseURL(location.hash.substr(1))
|
||||
if( hash_info.searchObject['map'] && coordinate_parser.test(hash_info.searchObject['map'])){
|
||||
var map_info = coordinate_parser.exec(hash_info.searchObject['map']);
|
||||
map.getView().setCenter(fromLonLat([Number(map_info[3]), Number(map_info[2])]));
|
||||
map.getView().setZoom(map_info[1]);
|
||||
}
|
||||
if( hash_info.searchObject['layer']) {
|
||||
var _layers = hash_info.searchObject['layer'];
|
||||
if(!Array.isArray(_layers)) {
|
||||
_layers = [_layers];
|
||||
}
|
||||
layers.map(function(layer){
|
||||
layer.setVisible(
|
||||
_layers.indexOf(layer.get('title')) >=0
|
||||
);
|
||||
});
|
||||
}
|
||||
}
|
||||
setCoordinate();
|
||||
|
||||
parseHash();
|
||||
window.onhashchange = function() {
|
||||
setCoordinate()
|
||||
parseHash()
|
||||
};
|
||||
|
||||
map.on("moveend", function(evt){
|
||||
|
@ -268,10 +294,23 @@ map.on("moveend", function(evt){
|
|||
hash_info.searchObject['map'] = `${zoom}/${lat}/${lon}`;
|
||||
location.hash = generateHash(hash_info);
|
||||
});
|
||||
|
||||
// map types
|
||||
layers.map(function(layer){
|
||||
layer.addEventListener('change:visible',function(e){
|
||||
hash_info=parseURL(location.hash.substr(1));
|
||||
var _layers = [];
|
||||
layers.map(function(layer) {
|
||||
if(layer.getVisible()){
|
||||
_layers.push(layer.get('title'));
|
||||
}
|
||||
});
|
||||
hash_info.searchObject['layer'] = _layers;
|
||||
location.hash = generateHash(hash_info);
|
||||
});
|
||||
});
|
||||
|
||||
// end coordinate parser ]]]
|
||||
|
||||
document.map = map;
|
||||
document.Map = map;
|
||||
|
||||
module.export= {
|
||||
mapa: map
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue