add layer management in url
This commit is contained in:
parent
1e7f6df1ec
commit
b6b4a309d8
65842
dist/main.js
vendored
65842
dist/main.js
vendored
File diff suppressed because one or more lines are too long
2
dist/main.js.map
vendored
2
dist/main.js.map
vendored
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 a new issue