-
Bhabesh Bhabani Mukhopadhyay authoredIterate through existing map layers to get old vector sources and remove those to hold one only with required marker
Bhabesh Bhabani Mukhopadhyay authoredIterate through existing map layers to get old vector sources and remove those to hold one only with required marker
MapObservation.vue 16.46 KiB
<template>
<div>
<div id='map-observation'>
<div v-if="isMyMapPanelVisible"><router-link id='btnBack' :to="{name: 'Observation'}" class="btn btn-success ">Back</router-link></div>
</div>
<div id="ObservationMapPanel" v-if="isMyMapPanelVisible" ref='ObservationMapPanel'>
<div>
<!-- <input value="" placeholder="name">
<br> -->
<select v-model="poi.pointOfInterestId" v-on:change="selectPOI($event)" ref="dropDownPOI">
<option v-for="poi in lstPOI" v-bind:value="poi.pointOfInterestId" >{{poi.name}}</option>
</select>
<div id="poiMarker">
<img src="@/assets/map_icon.png">
</div>
<!-- <br>
<select>
<option>Select test 2</option>
</select> -->
</div>
</div>
<div v-else >
<div id='divPrivacy' ref='divPrivacy'>
<select >
<option>Select</option>
<option>some text</option>
</select>
</div>
</div>
</div>
</template>
<script>
import CommonUtil from '@/components/CommonUtil'
import 'ol/ol.css';
import Map from 'ol/Map';
import OSM from 'ol/source/OSM';
import TileLayer from 'ol/layer/Tile';
import View from 'ol/View';
import WMTS, {optionsFromCapabilities} from 'ol/source/WMTS';
import WMTSCapabilities from 'ol/format/WMTSCapabilities';
import {Vector as VectorSource} from 'ol/source';
import {Vector as VectorLayer} from 'ol/layer';
import Collection from 'ol/Collection';
import {fromLonLat} from 'ol/proj';
import Circle from 'ol/geom/Circle';
import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style';
import Feature from 'ol/Feature';
import GeoJSON from 'ol/format/GeoJSON';
import {toStringXY} from 'ol/coordinate';
import {transform} from 'ol/proj';
import Point from 'ol/geom/Point';
import {Modify} from 'ol/interaction';
import Draw from 'ol/interaction/Draw';
import Overlay from 'ol/Overlay';
import Geolocation from 'ol/Geolocation';
let parser = new WMTSCapabilities();
export default {
name : 'MapObservation',
props : ['geoinfo','isMapPanelVisible','locationPointOfInterestId'],
data(){
return {
isMyMapPanelVisible : '',
myGeoInfo : '',
latitude : 0,
longitude : 0,
mapZoom : 0,
mapInteractions : '',
lstPOI : [],
poi : {pointOfInterestId:'undefined',name:'Select POI'},
myMap : '',
}
},
methods : {
initMap(myLatitude,myLongitude){
//let thisMap = this.myMap;
let pointOfInterestId = this.poi.pointOfInterestId;
let This = this;
let urlMap = CommonUtil.CONST_GPS_URL_NORWAY_MAP;
let myGeoInfo = this.myGeoInfo;
let latitude = myLatitude;//this.latitude;
let longitude = myLongitude;//this.longitude;
let mapZoom = this.mapZoom;
let image = this.myImage();
let vectorSource = this.myVectorGeoSource();
let vectorGeoLayer = this.myVectorGeoLayer(vectorSource,image);
let mapInteractions = this.myInteractions(this.mapInteractions);
let mapView = this.myView(latitude,longitude,mapZoom);
let localIsMyMapPanelVisible = this.isMyMapPanelVisible;
let coordinate = [latitude,longitude];
let pointMarker = this.myOverLay (coordinate);
let pointMarkerCoord = this.myOverLayCoord(latitude,longitude);
fetch(urlMap)
.then(function (response){
return response.text();
})
.then(function(text){
let parser = new WMTSCapabilities();
let result = parser.read(text);
let options = optionsFromCapabilities(result, {
layer : 'topo4',
matrixSet: 'EPSG:3857',
});
This.myMap = new Map({
layers: [
new TileLayer({
opacity : 1,
source : new WMTS(options),
}),
vectorGeoLayer
],
controls: [],
interactions : mapInteractions,
target: 'map-observation',
view : mapView,
overlays: [pointMarkerCoord],
renderer: 'canvas',
});
This.myMap.on(['singleclick'],function(event){
if(localIsMyMapPanelVisible)
{
This.poi.pointOfInterestId='undefined';
let transFormCord = transform(event.coordinate,'EPSG:3857','EPSG:4326');
This.latitude=transFormCord[0];
This.longitude=transFormCord[1];
let mapNewCord = toStringXY(transform(event.coordinate,'EPSG:3857','EPSG:4326'),4);
//console.log (mapNewCord);
/*
let point = new Point([mapNewCord]);
console.log(point);
let locationFeatures = vectorGeoLayer.getSource().getFeatures()[0];
locationFeatures.setGeometry(point);
console.log(locationFeatures);
let geoGSON = new GeoJSON();
console.log(geoGSON);
let result = geoGSON.writeFeatures(locationFeatures, {
dataProjection: 'EPSG:4326',
featureProjection: 'EPSG:3857' //thisMap.getView().getProjection().getCode()
})
console.log (geoGSON);
*/
//console.result(result);
/** Below code for image marker */
/*
This.myMap.addOverlay(pointMarker);
pointMarker.setPosition(fromLonLat(transFormCord));
let view = new View ({
center:fromLonLat(transFormCord),
zoom : mapZoom
})
This.myMap.setView(view);
vectorSource.clear();
*/
This.myMap.getView().setCenter(fromLonLat(transFormCord));
/******* Below code for vector marker positioning */
var iconFeature = new Feature({
geometry: new Point(fromLonLat(transFormCord))
});
This.clearMapLayers();
vectorSource.addFeature(iconFeature);
var vectorLayer = new VectorLayer({
source: vectorSource,
style: new Style({
image: image,
}),
});
This.myMap.addLayer(vectorLayer);
}
});
})
},
myVectorGeoSource(){
if(this.myGeoInfo)
{
return new VectorSource({
features : new GeoJSON({dataProjection:"EPSG:4326",
featureProjection:"EPSG:3857"}).readFeatures(this.myGeoInfo),
})
}
},
myVectorGeoLayer(vectorSource,image){
return new VectorLayer({
source : vectorSource,
style : new Style({
image: image,
}),
})
},
myView(latitude,longitude,mapZoom){
return new View ({
center:fromLonLat([latitude, longitude]),
zoom : mapZoom
})
},
myImage()
{
var fill = new Fill({
color: '#FF0000' //[180, 0, 0, 0.3]
});
return new CircleStyle({
radius: 5,
fill: fill,
stroke: new Stroke({color: 'red', width: 4}),
});
},
myOverLay(coordinates){
return new Overlay({
position : fromLonLat(coordinates) ,
positioning: 'bottom-center',
element: document.getElementById('poiMarker'),
stopEvent: false
});
},
myOverLayCoord(latitude,longitude)
{
let coordinate = [latitude,longitude];
return this.myOverLay(coordinate);
},
myStyleFunction(styles,feature)
{
return styles[feature.getGeometry().getType()];
},
myInteractions(mapInteractions)
{
return (mapInteractions) ? [] : '';
},
getMyPointOfInterst(lstPOI)
{
let userUUID = localStorage.getItem(CommonUtil.CONST_STORAGE_UUID);
let jsonHeader = { Authorization: userUUID };
lstPOI.push({pointOfInterestId:'undefined',name:'No POI Selected'});
fetch(CommonUtil.CONST_URL_DOMAIN +CommonUtil.CONST_URL_USER_POI,
{
method: "GET",
headers: jsonHeader,
}).then((response) => {
if(response.status == 200)
{
return response.json()
}
})
.then((jsonLstPOI) => {
$.each(jsonLstPOI, function(index, poi){
let myPOI = poi;//{'pointOfInterestId':poi.pointOfInterestId,'name':poi.name,'longitude':poi.longitude, 'latitude':poi.latitude};
lstPOI.push(myPOI);
})
})
},
clearMapLayers()
{
let myLayers = this.myMap.getLayers();
this.myMap.getLayers().forEach(function (layer){
let source = layer.get('source');
source.clear();
})
},
selectPOI(event)
{
let myPOI = this.poi;
if(event.target.value != 0)
{
$.each(this.lstPOI, function(index, poi){
if ( poi.pointOfInterestId === JSON.parse(event.target.value))
{
myPOI=poi;
return false;
}
})
this.myGeoInfo = JSON.parse(myPOI.geoJSON);
let coordinate = this.myGeoInfo.features[0].geometry.coordinates;
this.latitude = coordinate[0];
this.longitude = coordinate[1];
let myImage = this.myImage();
let transFormCord = [this.latitude,this.longitude];
//let vectorSource = this.myVectorGeoSource();
let vectorSource = new VectorSource({});
var iconFeature = new Feature({
geometry: new Point(fromLonLat(transFormCord))
});
//vectorSource.clear();
vectorSource.addFeature(iconFeature);
var vectorLayer = new VectorLayer({
source: vectorSource,
style: new Style({
image: myImage,
}),
});
this.clearMapLayers();
this.myMap.addLayer(vectorLayer);
this.myMap.getView().setCenter(fromLonLat(coordinate));
}
}
},
mounted() {
this.latitude = CommonUtil.CONST_GPS_DEFAULT_LATITUDE_NORWAY;
this.longitude = CommonUtil.CONST_GPS_DEFAULT_LONGITUDE_NORWAY;
let routeParam=this.$route.params;
// This ensures that the map fills the entire viewport
var mapDiv = document.getElementById("map-observation");
var navDiv = document.getElementById("vipsobsappmenu");
var appDiv = document.getElementById("app");
var panelObDiv = document.getElementById("ObservationMapPanel");
var divPrivacy = document.getElementById("divPrivacy");
if(routeParam.isMapPanelVisible)
{
this.isMyMapPanelVisible = routeParam.isMapPanelVisible;
}
if(this.isMapPanelVisible)
{
this.isMyMapPanelVisible = this.isMapPanelVisible;
}
if(this.isMyMapPanelVisible)
{
mapDiv.style.height = (screen.height - navDiv.offsetHeight) + "px";
this.mapInteractions='';
appDiv.style.marginTop="0";
appDiv.style.paddingRight="0";
appDiv.style.paddingLeft="0";
this.getMyPointOfInterst(this.lstPOI);
}
else
{
mapDiv.style.height = 300 +"px";
this.mapInteractions='interactions:[]';
}
if(routeParam.geoinfo)
{
this.myGeoInfo = routeParam.geoinfo;
}
if(this.geoinfo)
{
this.myGeoInfo = this.geoinfo;
}
if(this.myGeoInfo)
{
this.latitude = this.myGeoInfo.features[0].geometry.coordinates[0];
this.longitude = this.myGeoInfo.features[0].geometry.coordinates[1];
this.mapZoom = CommonUtil.CONST_GPS_OBSERVATION_ZOOM;
}
else
{
this.mapZoom = CommonUtil.CONST_GPS_DEFAULT_ZOOM;
}
if(routeParam.locationPointOfInterestId)
{
this.poi.pointOfInterestId = routeParam.locationPointOfInterestId;
}
this.$nextTick(function () {
this.initMap(this.latitude, this.longitude);
});
},
beforeDestroy() {
// This resets the container layout when leaving the router page
var appDiv = document.getElementById("app");
appDiv.style.marginTop="60px";
appDiv.style.paddingRight="15px";
appDiv.style.paddingLeft="15px";
},
}
</script>
<style>
html, body, #map-observation {
margin: 0;
width: 100%;
}
#ObservationMapPanel {
position: absolute;
bottom: 0;
left: 0;
}
#btnBack{
position: fixed;
z-index: 2000;
}
</style>