Commit 003fadab authored by Jacob's avatar Jacob

mapmarker + original osm map bg

parent bc6bfcff
......@@ -17,7 +17,7 @@ import OlVectorLayer from 'ol/layer/vector';
import { fromLonLat } from 'ol/proj';
import { transformExtent } from 'ol/proj';
import OlPoint from 'ol/geom/Point';
import OlLineString from 'ol/geom/LineString';
import OlLineString from 'ol/geom/LineString';
import { LogService } from './log.service';
import { OsmNode } from '../models/OsmNode';
import { defaults as OlDefaultControls } from 'ol/control.js';
......@@ -58,7 +58,7 @@ constructor(
this.coordinates = [7.147,51.26];
this.changeText();
this.zoom = 12;
this.iconLayer = new OlVectorLayer({
style: function(feature) {
......@@ -66,7 +66,7 @@ constructor(
},
source: new OlVectorSource({features: this.icons})
});
this.connectionLayer = new OlVectorLayer({
style: function(feature) {
return feature.get('style');
......@@ -75,8 +75,12 @@ constructor(
});
this.source = new OlXYZ({
//url: 'http://tile.osm.org/{z}/{x}/{y}.png'
url:'https://tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png'
url: 'http://tile.osm.org/{z}/{x}/{y}.png'
//url:'https://tiles.wmflabs.org/bw-mapnik/{z}/{x}/{y}.png'
//url:'https://stamen-tiles.a.ssl.fastly.net/{z}/{x}/{y}.png'
//url: 'http://tile.stamen.com/terrain/{z}/{x}/{y}.png'
//url:'https://maps.wikimedia.org/osm-intl/${z}/${x}/${y}.png'
//url: 'http://tile.thunderforest.com/landscape/${z}/${x}/${y}.png'
});
this.mapLayer = new OlTileLayer({
......@@ -88,8 +92,8 @@ constructor(
zoom: this.zoom
});
}
createElement(coords,node){
if(node.mapId== -1){
node.mapId = parseInt(node.osmId)+""+(Math.floor(Math.random()*100000)+1);
......@@ -127,14 +131,14 @@ constructor(
}))
});
}
fitView(){
this.map.getView().fit(this.iconLayer.getSource().getExtent());
this.coordinates = this.getCenter();
this.zoom = this.map.getView().getZoom();
if(this.zoom > 18){
this.zoom = 18;
}
......@@ -145,8 +149,8 @@ constructor(
zoom: this.zoom
}));
}
addNode(node:OsmNode){
this.icons.push(this.createElement([(node.lon),(node.lat)],node));
this.map.removeLayer(this.iconLayer);
......@@ -156,11 +160,11 @@ constructor(
},
source: new OlVectorSource({features: this.icons})
});
this.map.addLayer(this.iconLayer);
this.currentNodeSet.push(node);
}
showConnections(){
this.connections.length = 0;
for( let node of this.currentNodeSet){
......@@ -171,12 +175,12 @@ constructor(
}
}
}
this.map.removeLayer(this.connectionLayer);
this.connectionLayer = new OlVectorLayer({
source: new OlVectorSource({features: this.connections}),
});
this.map.addLayer(this.connectionLayer);
}
showNodes(nodes: Array<OsmNode>){
......@@ -203,13 +207,13 @@ constructor(
nodeCount++;
}
}
center.lon=center.lon/nodeCount;
center.lat=center.lat/nodeCount;
this.view = new OlView({
center: fromLonLat([(center.lon),(center.lat)]),
});
this.map.setView(this.view);
this.icons = new Array<OlFeature>();
for(let node of nodes){
......@@ -232,7 +236,7 @@ constructor(
show(node: OsmNode){
this.currentNodeSet=new Array<OsmNode>();
this.currentNodeSet.push(node);
this.view = new OlView({
center: fromLonLat([(node.lon),(node.lat)]),
zoom: 14
......@@ -249,12 +253,12 @@ constructor(
source: new OlVectorSource({features: this.icons})
});
this.map.addLayer(this.iconLayer);
this.logger.debug("Fitting view to fit"+this.icons.length+ " elements");
this.logger.debug("Fitting view to fit"+this.icons.length+ " elements");
this.fitView();
this.showConnections();
}
removeConnection(lhs:OsmNode,rhs:OsmNode){
}
removeNode(node:OsmNode){
......@@ -263,7 +267,7 @@ constructor(
if(idx == -1){
return;
}else{
this.currentNodeSet.splice(idx,1);
this.currentNodeSet.splice(idx,1);
}
this.showNodes(this.currentNodeSet);
this.showConnections();
......@@ -271,7 +275,7 @@ constructor(
}
togglePeerVisibility(parent: OsmNode,peer: OsmNode){
if(peer.mapId == -1){
this.addNode(peer);
this.showConnections();
......@@ -313,13 +317,13 @@ constructor(
stroke: new OlStroke({color: '#cdcdcd',width: 3})
});
}
createLine(lhs: OsmNode, rhs:OsmNode){
let lhsCoords = fromLonLat( [lhs.lon,lhs.lat] );
let rhsCoords = fromLonLat( [rhs.lon,rhs.lat] );
let lineString = new OlLineString([lhsCoords,rhsCoords]);
let feature = new OlFeature( {geometry: lineString});
feature.set('style',this.createLineStyle());
......@@ -327,8 +331,8 @@ constructor(
//;
//feature.set('style', this.createStyle('assets/img/map-marker.png', undefined));
//feature.set('style', this.createLineStyle());
}
showLine(lhs: OsmNode, rhs:OsmNode){
let feature = this.createLine(lhs,rhs);
......@@ -337,7 +341,7 @@ constructor(
this.connectionLayer = new OlVectorLayer({
source: new OlVectorSource({features: this.connections}),
});
this.map.addLayer(this.connectionLayer);
}
initMap(){
......@@ -350,20 +354,20 @@ constructor(
view: this.view,
controls:null
});
let handler = this.clickHandler;
this.map.on('click', this.clickHandler);
}
hasNode(node:OsmNode){
for(let feature of this.icons){
if(feature.getId() == node.mapId){
return true;
}
}
}
return false;
}
internalClickHandler(ev: OlMapBrowserEvent){
console.log(this.router.url);
......@@ -381,9 +385,9 @@ constructor(
let map=this.map;
let pixel = ev.pixel;
let features = map.getFeaturesAtPixel(pixel);
let data=features;
if(data && data.length > 0){
for(let dataItem of data){
if(dataItem.getId() != undefined){
......@@ -400,7 +404,7 @@ constructor(
}
getCenter(){
let bbox=new Rectangle(this.getBoundingBox(null));
return [ 0.5*(bbox.minX+bbox.maxX) , 0.5*(bbox.minY+bbox.maxY)]
}
clickHandler(ev: OlMapBrowserEvent){
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment