Draw Tissot's indicatrices on maps.
Example of Tissot indicatrix maps. The map on the top is an EPSG:4326
map. The one on the bottom is EPSG:3857
.
import Feature from 'ol/Feature.js';
import Map from 'ol/Map.js';
import TileWMS from 'ol/source/TileWMS.js';
import VectorSource from 'ol/source/Vector.js';
import View from 'ol/View.js';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer.js';
import {circular as circularPolygon} from 'ol/geom/Polygon.js';
const vectorLayer4326 = new VectorLayer({
source: new VectorSource(),
});
const vectorLayer3857 = new VectorLayer({
source: new VectorSource(),
});
const map4326 = new Map({
layers: [
new TileLayer({
source: new TileWMS({
url: 'https://ahocevar.com/geoserver/wms',
params: {
'LAYERS': 'ne:NE1_HR_LC_SR_W_DR',
'TILED': true,
},
}),
}),
vectorLayer4326,
],
target: 'map4326',
view: new View({
projection: 'EPSG:4326',
center: [0, 0],
zoom: 2,
}),
});
const map3857 = new Map({
layers: [
new TileLayer({
source: new TileWMS({
url: 'https://ahocevar.com/geoserver/wms',
params: {
'LAYERS': 'ne:NE1_HR_LC_SR_W_DR',
'TILED': true,
},
}),
}),
vectorLayer3857,
],
target: 'map3857',
view: new View({
center: [0, 0],
zoom: 2,
}),
});
const radius = 800000;
let x, y;
for (x = -180; x < 180; x += 30) {
for (y = -90; y <= 90; y += 30) {
const circle4326 = circularPolygon([x, y], radius, 64);
const circle3857 = circle4326.clone().transform('EPSG:4326', 'EPSG:3857');
vectorLayer4326.getSource().addFeature(new Feature(circle4326));
vectorLayer3857.getSource().addFeature(new Feature(circle3857));
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tissot Indicatrix</title>
<link rel="stylesheet" href="node_modules/ol/ol.css">
<style>
.map {
width: 100%;
height: 400px;
}
</style>
</head>
<body>
<h4>EPSG:4326</h4>
<div id="map4326" class="map"></div>
<h4>EPSG:3857</h4>
<div id="map3857" class="map"></div>
<script type="module" src="main.js"></script>
</body>
</html>
{
"name": "tissot",
"dependencies": {
"ol": "9.1.0"
},
"devDependencies": {
"vite": "^3.2.3"
},
"scripts": {
"start": "vite",
"build": "vite build"
}
}