mirror of
https://github.com/Viglino/ol-ext.git
synced 2026-01-25 17:36:21 +00:00
198 lines
8.3 KiB
HTML
198 lines
8.3 KiB
HTML
<!DOCTYPE html>
|
|
<!----------------------------------------------------------
|
|
|
|
Copyright (c) 2017 Jean-Marc VIGLINO,
|
|
released under CeCILL-B (french BSD like) licence: http://www.cecill.info/
|
|
|
|
------------------------------------------------------------>
|
|
<html>
|
|
<head>
|
|
<title>OL3-ext: Graticule control</title>
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
|
|
<link rel="stylesheet" href="style.css" />
|
|
|
|
<!-- jQuery -->
|
|
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
|
|
|
|
<!-- OL3 -->
|
|
<link rel="stylesheet" href="http://openlayers.org/en/master/css/ol.css" />
|
|
<script type="text/javascript" src="http://openlayers.org/en/master/build/ol.js"></script>
|
|
|
|
<!-- Proj4 -->
|
|
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/proj4js/2.3.14/proj4.js"></script>
|
|
|
|
<!-- controls -->
|
|
<script type="text/javascript" src="../control/graticulecontrol.js"></script>
|
|
|
|
|
|
<style>
|
|
#map
|
|
{ background: #fff;
|
|
border:1px solid #000;
|
|
padding:1em;
|
|
}
|
|
.ol-mouse-position
|
|
{ top: auto;
|
|
bottom: 1em;
|
|
left: 50%;
|
|
right:auto;
|
|
position: absolute;
|
|
transform: translateX(-50%);
|
|
background: rgba(255,255,255,0.5);
|
|
font-size: 14px;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body >
|
|
<a href="https://github.com/Viglino/ol3-ext"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
|
|
|
|
<a href="../index.html">
|
|
<h1>OL3-ext: Graticule control</h1>
|
|
</a>
|
|
<div class="info">
|
|
The <i>ol.control.Graticule</i> show a graticule on the map.
|
|
<ul>
|
|
<li>
|
|
TODO: fix border and text when rotating...
|
|
</li>
|
|
<li>
|
|
TODO: handle wrapX
|
|
</li>
|
|
<li>
|
|
TODO: remove artifacts on limits
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<!-- Map div -->
|
|
<div id="map" style="width:600px; height:400px;"></div>
|
|
|
|
<div class="options">
|
|
<h2>Options:</h2>
|
|
<ul>
|
|
<li>
|
|
|
|
Projection:
|
|
<select id="grat" onchange="setGraticule(true)">
|
|
<option value="4326">WGS 84 (EPSG:4326)</option>
|
|
<option value="2154">Lambert-93 (France) EPSG:2154</option>
|
|
<option value="27700">British National Grid (EPSG:27700)</option>
|
|
<option value="54009">Mollweide (ESRI:54009)</option>
|
|
<option value="23032">ED50 / UTM zone 32N (EPSG:23032)</option>
|
|
<option value="2163">US National Atlas Equal Area (EPSG:2163)</option>
|
|
<option value="3413">NSIDC Polar Stereographic North (EPSG:3413)</option>
|
|
<option value="5479">RSRGD2000 / MSLC2000 (EPSG:5479)</option>
|
|
<!--
|
|
<option value="32662">Plate Carree</option>
|
|
-->
|
|
</select>
|
|
</li>
|
|
<li>
|
|
<input id="line" type="checkbox" checked="checked" onchange="setGraticule()" /><label for="line"> draw lines</label>
|
|
</li>
|
|
<li>
|
|
<input id="border" type="checkbox" checked="checked" onchange="setGraticule()" /><label for="border"> draw border</label>
|
|
</li>
|
|
<li>
|
|
<input id="coords" type="checkbox" checked="checked" onchange="setGraticule()" /><label for="coords"> show coords</label>
|
|
</li>
|
|
<li>
|
|
Color:
|
|
<select id="color" onchange="setGraticule(this.value)">
|
|
<option value="black">black</option>
|
|
<option value="red">red</option>
|
|
<option value="green">green</option>
|
|
<option value="blue">blue</option>
|
|
</select>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
// Define proj4 projection
|
|
proj4.defs("EPSG:2154","+proj=lcc +lat_1=49 +lat_2=44 +lat_0=46.5 +lon_0=3 +x_0=700000 +y_0=6600000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs");
|
|
proj4.defs("EPSG:27700","+proj=tmerc +lat_0=49 +lon_0=-2 +k=0.9996012717 +x_0=400000 +y_0=-100000 +ellps=airy +datum=OSGB36 +units=m +no_defs");
|
|
//proj4.defs("EPSG:32662","+proj=eqc +lat_ts=0 +lat_0=0 +lon_0=0 +x_0=0 +y_0=0 +ellps=WGS84 +datum=WGS84 +units=m +no_defs");
|
|
//proj4.defs("EPSG:54024","+proj=bonne +lon_0=0 +lat_1=60 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs ");
|
|
proj4.defs('EPSG:5479', '+proj=lcc +lat_1=-76.66666666666667 +lat_2=-79.33333333333333 +lat_0=-78 +lon_0=163 +x_0=7000000 +y_0=5000000 +ellps=GRS80 +towgs84=0,0,0,0,0,0,0 +units=m +no_defs');
|
|
proj4.defs('EPSG:23032', '+proj=utm +zone=32 +ellps=intl +towgs84=-87,-98,-121,0,0,0,0 +units=m +no_defs');
|
|
proj4.defs('EPSG:21781', '+proj=somerc +lat_0=46.95240555555556 +lon_0=7.439583333333333 +k_0=1 +x_0=600000 +y_0=200000 +ellps=bessel +towgs84=674.4,15.1,405.3,0,0,0,0 +units=m +no_defs');
|
|
proj4.defs('EPSG:3413', '+proj=stere +lat_0=90 +lat_ts=70 +lon_0=-45 +k=1 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs');
|
|
proj4.defs('EPSG:2163', '+proj=laea +lat_0=45 +lon_0=-100 +x_0=0 +y_0=0 +a=6370997 +b=6370997 +units=m +no_defs');
|
|
proj4.defs('ESRI:54009', '+proj=moll +lon_0=0 +x_0=0 +y_0=0 +datum=WGS84 +units=m +no_defs');
|
|
|
|
// Define projection extent
|
|
ol.proj.get('EPSG:2154').setExtent([0, 6000000, 1250000, 7200000]);
|
|
ol.proj.get('EPSG:27700').setExtent([0, 0, 800000, 1400000]);
|
|
ol.proj.get('EPSG:5479').setExtent([6825737.53, 4189159.80, 9633741.96, 5782472.71]);
|
|
ol.proj.get('EPSG:23032').setExtent([-1206118.71, 4021309.92, 1295389.00, 8051813.28]);
|
|
ol.proj.get('EPSG:21781').setExtent([485071.54, 75346.36, 828515.78, 299941.84]);
|
|
ol.proj.get('EPSG:3413').setExtent([-4194304, -4194304, 4194304, 4194304]);
|
|
ol.proj.get('EPSG:2163').setExtent([/*-8040784.5135*/-4000000, -2577524.9210, 3668901.4484, /*4785105.1096*/4450000]);
|
|
ol.proj.get('ESRI:54009').setExtent([-18e6, -9e6, 18e6, 9e6]);
|
|
|
|
// The map
|
|
var map = new ol.Map
|
|
({ target: 'map',
|
|
view: new ol.View
|
|
({ zoom: 6,
|
|
center: [-20094, 6234453]
|
|
}),
|
|
controls: ol.control.defaults({ "attribution": false }),
|
|
layers: [new ol.layer.Tile(
|
|
{ name: "OSM",
|
|
source: new ol.source.OSM(),
|
|
visible: true
|
|
})]
|
|
});
|
|
|
|
var grat=
|
|
{ '4326': new ol.control.Graticule({ step: 0.1, stepCoord: 5, margin:5, projection: 'EPSG:4326', formatCoord:function(c){ return c.toFixed(1)+"°" } }),
|
|
//'32662': new ol.control.Graticule({ step: 1000, stepCoord: 1, projection: 'EPSG:32662' }),
|
|
'5479': new ol.control.Graticule({ step: 1000, stepCoord: 1, projection: 'EPSG:5479' }),
|
|
'23032': new ol.control.Graticule({ step: 1000, stepCoord: 1, projection: 'EPSG:23032' }),
|
|
'21781': new ol.control.Graticule({ step: 1000, stepCoord: 5, projection: 'EPSG:21781' }),
|
|
'3413': new ol.control.Graticule({ step: 1000, stepCoord: 5, projection: 'EPSG:3413' }),
|
|
'2163': new ol.control.Graticule({ step: 1000, stepCoord: 5, projection: 'EPSG:2163' }),
|
|
'54009': new ol.control.Graticule({ step: 1000, stepCoord: 5, projection: 'ESRI:54009' }),
|
|
'2154': new ol.control.Graticule({ step: 1000, stepCoord: 5, projection: 'EPSG:2154' }),
|
|
'27700': new ol.control.Graticule({ step: 1000, stepCoord: 5, projection: 'EPSG:27700' })
|
|
};
|
|
|
|
var g;
|
|
function setGraticule (proj)
|
|
{ if (g) map.removeControl(g);
|
|
g = grat[$("#grat").val()];
|
|
var c = $("#color").val();
|
|
var style = new ol.style.Style();
|
|
if ($("#line").prop('checked')) style.setStroke (new ol.style.Stroke({ color:c, width:1 }));
|
|
if ($("#border").prop('checked')) style.setFill (new ol.style.Fill({ color: $("#line").prop('checked') ? "#fff" : "#000" }));
|
|
if ($("#coords").prop('checked')) style.setText (new ol.style.Text(
|
|
{ stroke: new ol.style.Stroke({ color:"#fff", width:2 }),
|
|
fill: new ol.style.Fill({ color:c }),
|
|
}));
|
|
g.setStyle(style);
|
|
map.addControl(g);
|
|
if (proj && ol.proj.get(g.get('projection')).getExtent())
|
|
{ var ext = ol.proj.get(g.get('projection')).getExtent();
|
|
ext = ol.proj.transformExtent (ext, g.get('projection'), map.getView().getProjection());
|
|
map.getView().fit(ext, ol.proj.get(g.get('projection')).getExtent(), map.getSize());
|
|
map.getView().setZoom(map.getView().getZoom()+1)
|
|
}
|
|
}
|
|
setGraticule();
|
|
|
|
/*
|
|
var mousePositionControl = new ol.control.MousePosition(
|
|
{ coordinateFormat: ol.coordinate.createStringXY(0),
|
|
projection: 'EPSG:2154',
|
|
undefinedHTML: ' '
|
|
});
|
|
map.addControl (mousePositionControl);
|
|
*/
|
|
|
|
</script>
|
|
|
|
</body>
|
|
</html> |