openlayers
This commit is contained in:
parent
2c3c02bd29
commit
2b44e5deae
|
@ -1,17 +1,54 @@
|
||||||
import 'ol/ol.css';
|
import 'ol/ol.css';
|
||||||
import {Map, View} from 'ol';
|
import Map from 'ol/Map';
|
||||||
import TileLayer from 'ol/layer/Tile';
|
import View from 'ol/View';
|
||||||
import OSM from 'ol/source/OSM';
|
import {getCenter} from 'ol/extent';
|
||||||
|
import ImageLayer from 'ol/layer/Image';
|
||||||
|
import Projection from 'ol/proj/Projection';
|
||||||
|
import Static from 'ol/source/ImageStatic';
|
||||||
|
|
||||||
const map = new Map({
|
import {Vector as VectorLayer} from 'ol/layer';
|
||||||
target: 'map',
|
import VectorSource from 'ol/source/Vector';
|
||||||
|
|
||||||
|
import Feature from 'ol/Feature';
|
||||||
|
import Point from 'ol/geom/Point';
|
||||||
|
|
||||||
|
var testMarker = new Feature({
|
||||||
|
type: 'icon',
|
||||||
|
geometry: new Point([7000.0, 9000.0])
|
||||||
|
});
|
||||||
|
|
||||||
|
var vectorLayer = new VectorLayer({
|
||||||
|
source: new VectorSource({
|
||||||
|
features: [testMarker]
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
var extent = [0, 0, 15360, 15359];
|
||||||
|
var projection = new Projection({
|
||||||
|
code: 'xkcd-image',
|
||||||
|
units: 'pixels',
|
||||||
|
extent: extent
|
||||||
|
});
|
||||||
|
|
||||||
|
var map = new Map({
|
||||||
layers: [
|
layers: [
|
||||||
new TileLayer({
|
new ImageLayer({
|
||||||
source: new OSM()
|
source: new Static({
|
||||||
})
|
attributions: '© <a href="http://xkcd.com/license.html">xkcd</a>',
|
||||||
|
url: './maps/Tanoa.png',
|
||||||
|
projection: projection,
|
||||||
|
imageExtent: extent
|
||||||
|
})
|
||||||
|
}),
|
||||||
|
vectorLayer
|
||||||
],
|
],
|
||||||
|
target: 'map',
|
||||||
view: new View({
|
view: new View({
|
||||||
center: [0, 0],
|
projection: projection,
|
||||||
zoom: 0
|
center: getCenter(extent),
|
||||||
|
zoom: 2,
|
||||||
|
maxZoom: 8
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// icon and text
|
||||||
|
|
11
server.lisp
11
server.lisp
|
@ -90,8 +90,9 @@
|
||||||
(funcall route-function env)))))
|
(funcall route-function env)))))
|
||||||
:name "webserver"))
|
:name "webserver"))
|
||||||
|
|
||||||
(defparameter *web* (car (sb-thread:list-all-threads)))
|
(sb-thread:list-all-threads)
|
||||||
(list *web*)
|
(mapcar #'sb-thread:terminate-thread
|
||||||
(sb-thread:terminate-thread *web*)
|
(remove-if-not
|
||||||
|
(lambda (thread)
|
||||||
|
(string= "webserver" (sb-thread:thread-name thread)))
|
||||||
|
(sb-thread:list-all-threads)))
|
||||||
|
|
|
@ -2,16 +2,19 @@
|
||||||
<html>
|
<html>
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<title>Using Parcel with OpenLayers</title>
|
<title>leoservermod</title>
|
||||||
<style>
|
<style>
|
||||||
#map {
|
.map {
|
||||||
width: 400px;
|
position: absolute;
|
||||||
height: 250px;
|
left: 0px;
|
||||||
|
top: 0px;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div id="map"></div>
|
<div id="map" class="map"></div>
|
||||||
<script src="./index.js"></script>
|
<script src="./index.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
Loading…
Reference in New Issue