Milliways/cccamp19-map
4
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

switch to WEBGL and add coordinate to url and parse it

Browse source
This commit is contained in:
TuxCoder 2019-07-14 20:05:23 +02:00
parent 601f254c53
commit 8a7a5a5972
4 changed files with 24076 additions and 14765 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
dist/index.html vendored
View file

@ -2,7 +2,7 @@
<html>
<head>
<meta charset="utf-8">
<title>Using OpenLayers with Webpack</title>
<title>CCCamp19 map of milliways</title>
<link rel="stylesheet" href="./main.css" type="text/css">
<style>
</style>

38760
dist/main.js vendored
View file

File diff suppressed because one or more lines are too long

2
dist/main.js.map vendored
View file

File diff suppressed because one or more lines are too long

77
src/app.js
View file

@ -1,4 +1,7 @@
"use strict";
import Map from 'ol/Map.js';
import WebGLMap from 'ol/WebGLMap.js';
import {WEBGL} from 'ol/has.js'
import View from 'ol/View.js';
import {defaults as defaultControls, Attribution as AttributionControl} from 'ol/control.js';
import {all as allStrategy} from 'ol/loadingstrategy';
@ -6,7 +9,7 @@ import {bbox as bboxStrategy} from 'ol/loadingstrategy.js';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM.js';
import XYZ from 'ol/source/XYZ';
import {fromLonLat} from 'ol/proj.js';
import {fromLonLat, toLonLat} from 'ol/proj.js';
import VectorLayer from 'ol/layer/Vector.js';
import VectorSource from 'ol/source/Vector.js';
import VectorTileLayer from 'ol/layer/VectorTile.js';
@ -17,6 +20,13 @@ import {Circle as CircleStyle, Fill, Stroke, Style, Text} from 'ol/style.js';
const coordinate_cccamp19 = fromLonLat([13.30735, 53.03127]);
var MapClass;
if (WEBGL) {
MapClass = WebGLMap;
} else {
MapClass = Map;
}
var styles = {
'amenity': {
@ -120,7 +130,7 @@ var vectorSource = new VectorSource({
strategy: allStrategy
})
var map = new Map({
var map = new MapClass({
target: 'map',
controls: defaultControls().extend([
]),
@ -132,6 +142,8 @@ var map = new Map({
}),
new VectorLayer({
source: vectorSource,
attributions: '&#169;<a href="https://git.milliways.info/Milliways/cccamp19-map">Milliways</a>',
attributionsCollapsible: false,
style: function(feature) {
for (var key in styles) {
var value = feature.get(key);
@ -162,6 +174,67 @@ var map = new Map({
});
function parseURL(url) {
var parser = document.createElement('a'),
searchObject = {},
queries, split, i;
// Let the browser do the work
parser.href = url;
// Convert query string to object
queries = parser.search.replace(/^\?/, '').split('&');
for( i = 0; i < queries.length; i++ ) {
split = queries[i].split('=');
searchObject[split[0]] = split[1];
}
return {
pathname: parser.pathname,
search: parser.search,
searchObject: searchObject,
hash: parser.hash
};
}
// start show coordinate in param and pars it [[[
function generateHash(info) {
var params=[]
for( var param in info.searchObject) {
if(param!='') {
params.push(`${param}=${info.searchObject[param]}`);
}
}
return `#${info.pathname}?${params.join('&')}`;
}
var hash_info;
var coordinate_parser = /^(\d+)\/(-?\d*\.?\d*)\/(-?\d*\.?\d*)/;
function setCoordinate() {
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]);
}
}
setCoordinate();
window.onhashchange = function() {
setCoordinate()
};
map.on("moveend", function(evt){
var map = evt.map;
var [lon, lat] = toLonLat(map.getView().getCenter());
var zoom = map.getView().getZoom();
hash_info.searchObject['map'] = `${zoom}/${lat}/${lon}`;
location.hash = generateHash(hash_info);
});
// end coordinate parser ]]]
document.map = map;