-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added mechanism to add overlays as layers to ol-map. Moved overlay-va…
…riable from filterComponent into geoMapModal.
- Loading branch information
1 parent
22188bd
commit 159dc83
Showing
4 changed files
with
55 additions
and
23 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -8,12 +8,12 @@ | |
> | ||
<div class="content"> | ||
<div class="cell cell-map"> | ||
<image-map v-if="images.length" :images="images" :selectable="true" v-on:select="handleSelectedImages" :overlay="overlay"></image-map> | ||
<image-map v-if="images.length" :images="images" :selectable="true" v-on:select="handleSelectedImages" :overlays="overlays"></image-map> | ||
</div> | ||
<div class="cell cell-edit"> | ||
<h4>Geo Overlays</h4> | ||
<p>Select an overlay from the list below to show on map.</p> | ||
<div v-for="overlay in geoOverlays" :key="overlay.id"> | ||
<div v-for="overlay in browsingOverlays" :key="overlay.id"> | ||
<button :id="overlay.id" :class="{active: activeLayerId === overlay.id}" class="list-group-item custom" v-on:click="toggleActive(overlay.id)"> | ||
<span class="ellipsis" v-text="overlay.name"></span> | ||
</button> | ||
|
@@ -36,7 +36,11 @@ | |
import Modal from 'uiv/dist/Modal'; | ||
import ImageMap from '../../geo/components/imageMap'; | ||
import CoordApi from '../api/volumeImageWithCoord'; | ||
import GeoApi from '../api/geoOverlays'; | ||
import ImageLayer from 'ol/layer/Image'; | ||
import ImageStaticSource from 'ol/source/ImageStatic'; | ||
import {LoaderMixin} from '../import'; | ||
import {handleErrorResponse} from '../../geo/import'; | ||
export default { | ||
|
@@ -49,10 +53,6 @@ export default { | |
volumeId: { | ||
type: Number, | ||
required: true, | ||
}, | ||
geoOverlays: { | ||
type: Array, | ||
required: true | ||
} | ||
}, | ||
data() { | ||
|
@@ -63,8 +63,28 @@ export default { | |
imageIds: [], | ||
activeLayerId: null, | ||
overlay: null, | ||
browsingOverlays: [], | ||
overlayUrl: '', | ||
} | ||
}, | ||
computed: { | ||
overlays() { | ||
return this.browsingOverlays.map((overlay) => { | ||
return new ImageLayer({ | ||
source: new ImageStaticSource({ | ||
This comment has been minimized.
Sorry, something went wrong.
This comment has been minimized.
Sorry, something went wrong.
mzur
Member
|
||
url: this.overlayUrl.replace(':id', overlay.id), | ||
imageExtent: [ | ||
overlay.top_left_lng, | ||
overlay.bottom_right_lat, | ||
overlay.bottom_right_lng, | ||
overlay.top_left_lat, | ||
], | ||
projection: 'EPSG:4326', | ||
}), | ||
}); | ||
}); | ||
}, | ||
}, | ||
methods: { | ||
callback(msg) { | ||
if (msg === "ok") { | ||
|
@@ -97,7 +117,7 @@ export default { | |
if(id === null) { | ||
this.overlay = null; | ||
} else { | ||
this.overlay = this.geoOverlays.find(x => x.id === id); | ||
this.overlay = this.browsingOverlays.find(x => x.id === id); | ||
} | ||
} | ||
}, | ||
|
@@ -109,6 +129,18 @@ export default { | |
CoordApi.get({id: this.volumeId}) | ||
.then(response => this.images = response.body, this.handleErrorResponse) | ||
.finally(this.finishLoading); | ||
// make overlay-url variable accessible | ||
this.overlayUrl = biigle.$require('geo.overlayUrl'); | ||
// retrieve the geo-overlays for browsing layer | ||
GeoApi.get({id: this.volumeId, layer_type: 'browsing_layer'}) | ||
.then((response) => { | ||
if(response.status == 200) { | ||
this.browsingOverlays = response.body; | ||
} | ||
}) | ||
.catch(handleErrorResponse); | ||
}, | ||
} | ||
</script> | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,6 @@ | ||
@if ($volume->isImageVolume() && $volume->hasGeoInfo()) | ||
<script type="text/javascript"> | ||
biigle.$declare('geo.overlayUrl', '{!! url('api/v1/geo-overlays/:id/file') !!}'); | ||
</script> | ||
<script src="{{ cachebust_asset('vendor/geo/scripts/volumes.js') }}"></script> | ||
@endif |
Hi @mzur,
the
ImageStatic
layer-source is probably not the way to go any more. Since I'm dealing with tiled image-files after processing the geoTIFF's within TileSingleOverlay.php, I had a look at how you dealt with Tiled Images and OpenLayers in biigle/core. Could I now use the same layer-source that you utilized there (Zoomify
)? And in that case, would I require the image width/height of the overlay in pixels?