openlayers

This commit is contained in:
SongWei 2020-02-16 11:14:59 +11:00
parent 2c3c02bd29
commit 2b44e5deae
3 changed files with 61 additions and 20 deletions

View File

@ -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

View File

@ -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)))

View File

@ -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>