yanyl
/
SubmarineMonitoring
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '5e83112728'
${ noResults }
SubmarineMonitoring/common/plugin/map/ol/v6.12.0/examples/wms-custom-tilegrid-512x256...

374 lines
19 KiB
HTML
Raw Blame History Unescape Escape

This file contains invisible Unicode characters!

This file contains invisible Unicode characters that may be processed differently from what appears below. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to reveal hidden characters.

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
<script>
var gaProperty = 'UA-2577926-1';
// Disable tracking if the opt-out cookie exists.
var disableStr = 'ga-disable-' + gaProperty;
if (document.cookie.indexOf(disableStr + '=true') > -1) {
window[disableStr] = true;
}
function gaOptout() {
document.cookie = disableStr + '=true; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
window[disableStr] = true;
}
function gaOptoutRevoke() {
document.cookie = disableStr + '=false; expires=Thu, 31 Dec 2099 23:59:59 UTC; path=/';
window[disableStr] = false;
}
</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-2577926-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-2577926-1', { 'anonymize_ip': true });
</script>
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.1.0/cookieconsent.min.js"></script>
<script src="https://unpkg.com/lz-string@1.4.4/libs/lz-string.min.js"></script>
<script>
window.addEventListener("load", function() {
window.cookieconsent.initialise({
'palette': {
'popup': {
'background': '#eaf7f7',
'text': '#5c7291'
},
'button': {
'background': '#56cbdb',
'text': '#ffffff'
}
},
'theme': 'edgeless',
'type': 'opt-out',
'onInitialise': function (status) {
if (!this.hasConsented()) {
gaOptout()
}
},
'onStatusChange': function(status, chosenBefore) {
if (!this.hasConsented()) {
gaOptout()
}
},
'onRevokeChoice': function() {
gaOptoutRevoke()
}
})
});
</script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" type="text/css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" type="text/css">
<link rel="stylesheet" href="./resources/prism/prism-1.20.0.css" type="text/css">
<link rel="stylesheet" href="./css/ol.css" type="text/css">
<link rel="stylesheet" href="./resources/layout.css" type="text/css">
<script src="https://unpkg.com/elm-pep"></script>
<script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,TextDecoder"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/3.18.3/minified.js"></script>
<title>WMS 512x256 Tiles</title>
</head>
<body>
<header class="navbar navbar-expand-sm navbar-dark mb-3 py-0" role="navigation">
<a class="navbar-brand" href="https://openlayers.org/"><img src="./resources/logo-70x70.png" alt="">&nbsp;OpenLayers</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#olmenu" aria-controls="olmenu" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<!-- menu items that get hidden below 768px width -->
<nav class="collapse navbar-collapse" id="olmenu">
<ul class="nav navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="docdropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Docs</a>
<div class="dropdown-menu dropdown-menu-right mb-3" aria-labelledby="docdropdown">
<a class="dropdown-item" href="../doc/">Docs</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="../doc/quickstart.html"><i class="fa fa-check fa-fw mr-2 fa-lg"></i>Quick Start</a>
<a class="dropdown-item" href="../doc/faq.html"><i class="fa fa-question fa-fw mr-2 fa-lg"></i>FAQ</a>
<a class="dropdown-item" href="../doc/tutorials/"><i class="fa fa-book fa-fw mr-2 fa-lg"></i>Tutorials</a>
<a class="dropdown-item" href="/workshop/"><i class="fa fa-graduation-cap fa-fw mr-2 fa-lg"></i>Workshop</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="https://stackoverflow.com/questions/tagged/openlayers"><i class="fa fa-stack-overflow fa-fw mr-2"></i>Ask a Question</a>
</div>
</li>
<li class="nav-item active"><a class="nav-link" href="../examples/">Examples</a></li>
<li class="nav-item"><a class="nav-link" href="../apidoc/"><i class="fa fa-sitemap mr-1"></i>API</a></li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="codedropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Code</a>
<div class="dropdown-menu dropdown-menu-right mb-3" aria-labelledby="codedropdown">
<a class="dropdown-item" href="https://github.com/openlayers/openlayers"><i class="fa fa-github fa-fw mr-2 fa-lg"></i>Repository</a>
<a class="dropdown-item" href="/download/"><i class="fa fa-download fa-fw mr-2 fa-lg"></i>Download</a>
</div>
</li>
</ul>
</nav>
</header>
<div class="container-fluid line-numbers">
<div id="latest-check" class="alert alert-warning alert-dismissible" role="alert" style="display:none">
<button id="latest-dismiss" type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
This example uses OpenLayers v<span>6.12.0</span>. The <a id="latest-link" href="#" class="alert-link">latest</a> is v<span id="latest-version"></span>.
</div>
<div class="row-fluid">
<a href="#" id="codepen-button" class="btn btn-link float-right">
<i class="fa fa-codepen fa-lg"></i> Edit
</a>
<div class="span12">
<h4 id="title">WMS 512x256 Tiles</h4>
<p class="tags">
<span class="badge-group">
<a
href="./index.html?q=wms" class="badge badge-info">wms</a
><a
class="badge badge-info tag-modal-toggle text-white"
data-toggle="modal"
data-target="#tag-example-list"
data-title="wms"
data-content="
&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./wms-custom-proj.html&quot;&gt;Custom Tiled WMS&lt;/a&gt;
&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./reprojection.html&quot;&gt;Raster Reprojection&lt;/a&gt;
&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./wms-image.html&quot;&gt;Single Image WMS&lt;/a&gt;
&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./wms-image-custom-proj.html&quot;&gt;Single Image WMS with Proj4js&lt;/a&gt;
&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./wms-tiled.html&quot;&gt;Tiled WMS&lt;/a&gt;
&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./wms-tiled-wrap-180.html&quot;&gt;Tiled WMS Wrapping&lt;/a&gt;
&lt;a class=&quot;list-group-item list-group-item-action active&quot; href=&quot;./wms-custom-tilegrid-512x256.html&quot;&gt;WMS 512x256 Tiles&lt;/a&gt;
&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./wms-capabilities.html&quot;&gt;WMS Capabilities Parsing&lt;/a&gt;
&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./wms-getlegendgraphic.html&quot;&gt;WMS GetLegendGraphic&lt;/a&gt;
&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./wms-time.html&quot;&gt;WMS Time&lt;/a&gt;
&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./wms-no-proj.html&quot;&gt;WMS without Projection&lt;/a&gt;"
tabindex="0"
>11</a>
</span>
<span class="badge-group">
<a
href="./index.html?q=tile" class="badge badge-info">tile</a
><a
class="badge badge-info tag-modal-toggle text-white"
data-toggle="modal"
data-target="#tag-example-list"
data-title="tile"
data-content="
&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./wms-custom-proj.html&quot;&gt;Custom Tiled WMS&lt;/a&gt;
&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./reprojection-wgs84.html&quot;&gt;OpenStreetMap Reprojection&lt;/a&gt;
&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./scaleline-indiana-east.html&quot;&gt;OpenStreetMap Reprojection with ScaleLine Control&lt;/a&gt;
&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./tile-load-events.html&quot;&gt;Tile Load Events&lt;/a&gt;
&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./arcgis-tiled.html&quot;&gt;Tiled ArcGIS MapServer&lt;/a&gt;
&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./wms-tiled.html&quot;&gt;Tiled WMS&lt;/a&gt;
&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./wms-tiled-wrap-180.html&quot;&gt;Tiled WMS Wrapping&lt;/a&gt;
&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./vector-wfs-geographic.html&quot;&gt;WFS with geographic coordinates&lt;/a&gt;
&lt;a class=&quot;list-group-item list-group-item-action active&quot; href=&quot;./wms-custom-tilegrid-512x256.html&quot;&gt;WMS 512x256 Tiles&lt;/a&gt;"
tabindex="0"
>9</a>
</span>
<span class="badge-group">
<a
href="./index.html?q=non-square" class="badge badge-info">non-square</a
><a
class="badge badge-info tag-modal-toggle text-white"
data-toggle="modal"
data-target="#tag-example-list"
data-title="non-square"
data-content="
&lt;a class=&quot;list-group-item list-group-item-action active&quot; href=&quot;./wms-custom-tilegrid-512x256.html&quot;&gt;WMS 512x256 Tiles&lt;/a&gt;"
tabindex="0"
>1</a>
</span>
<span class="badge-group">
<a
href="./index.html?q=grid" class="badge badge-info">grid</a
><a
class="badge badge-info tag-modal-toggle text-white"
data-toggle="modal"
data-target="#tag-example-list"
data-title="grid"
data-content="
&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./mapbox-vector-tiles-advanced.html&quot;&gt;Advanced Mapbox Vector Tiles&lt;/a&gt;
&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./wmts-ign.html&quot;&gt;IGN WMTS&lt;/a&gt;
&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./print-to-scale.html&quot;&gt;Print to scale example&lt;/a&gt;
&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./reprojection.html&quot;&gt;Raster Reprojection&lt;/a&gt;
&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./vector-tiles-4326.html&quot;&gt;Vector tiles in EPSG:4326&lt;/a&gt;
&lt;a class=&quot;list-group-item list-group-item-action active&quot; href=&quot;./wms-custom-tilegrid-512x256.html&quot;&gt;WMS 512x256 Tiles&lt;/a&gt;
&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./wmts.html&quot;&gt;WMTS&lt;/a&gt;
&lt;a class=&quot;list-group-item list-group-item-action&quot; href=&quot;./wmts-dimensions.html&quot;&gt;WMTS Tile Transitions&lt;/a&gt;"
tabindex="0"
>8</a>
</span>
</p>
<div class="modal modal-tag-example" id="tag-example-list" tabindex="-1" role="dialog" aria-labelledby="tag-example-title" aria-hidden="true">
<div class="modal-dialog modal-dialog-scrollable" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="tag-example-title"></h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<div class="list-group"></div>
</div>
</div>
</div>
</div>
<div id="map" class="map"></div>
</div>
<form method="POST" id="codepen-form" target="_blank" action="https://codesandbox.io/api/v1/sandboxes/define">
<input id="codesandbox-params" type="hidden" name="parameters">
</form>
</div>
<div class="row-fluid">
<div class="span12">
<p id="shortdesc">Example of a WMS layer with a custom grid with 512x256px tiles.</p>
<div id="docs"><p>WMS can serve arbitrary tile sizes. This example uses a custom tile grid with non-square tiles.</p>
</div>
</div>
</div>
<div class="row-fluid">
<h5 class="source-heading">main.js</h5>
<pre><code id="example-js-source" class="language-js">import 'ol/ol.css';
import Map from &#x27;ol/Map&#x27;;
import OSM from &#x27;ol/source/OSM&#x27;;
import TileGrid from &#x27;ol/tilegrid/TileGrid&#x27;;
import TileLayer from &#x27;ol/layer/Tile&#x27;;
import TileWMS from &#x27;ol/source/TileWMS&#x27;;
import View from &#x27;ol/View&#x27;;
import {get as getProjection} from &#x27;ol/proj&#x27;;
import {getWidth} from &#x27;ol/extent&#x27;;
const projExtent &#x3D; getProjection(&#x27;EPSG:3857&#x27;).getExtent();
const startResolution &#x3D; getWidth(projExtent) / 256;
const resolutions &#x3D; new Array(22);
for (let i &#x3D; 0, ii &#x3D; resolutions.length; i &lt; ii; ++i) {
resolutions[i] &#x3D; startResolution / Math.pow(2, i);
}
const tileGrid &#x3D; new TileGrid({
extent: [-13884991, 2870341, -7455066, 6338219],
resolutions: resolutions,
tileSize: [512, 256],
});
const layers &#x3D; [
new TileLayer({
source: new OSM(),
}),
new TileLayer({
source: new TileWMS({
url: &#x27;https://ahocevar.com/geoserver/wms&#x27;,
params: {&#x27;LAYERS&#x27;: &#x27;topp:states&#x27;, &#x27;TILED&#x27;: true},
serverType: &#x27;geoserver&#x27;,
tileGrid: tileGrid,
}),
}),
];
const map &#x3D; new Map({
layers: layers,
target: &#x27;map&#x27;,
view: new View({
center: [-10997148, 4569099],
zoom: 4,
}),
});
</code></pre>
</div>
<div class="row-fluid">
<h5 class="source-heading">index.html</h5>
<pre><code id="example-html-source" class="language-markup">&lt;!DOCTYPE html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="UTF-8"&gt;
&lt;title&gt;WMS 512x256 Tiles&lt;/title&gt;
&lt;!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer --&gt;
&lt;script src="https://unpkg.com/elm-pep"&gt;&lt;/script&gt;
&lt;!-- The lines below are only needed for old environments like Internet Explorer and Android 4.x --&gt;
&lt;script src="https://cdn.polyfill.io/v3/polyfill.min.js?features=fetch,requestAnimationFrame,Element.prototype.classList,TextDecoder"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/3.18.3/minified.js"&gt;&lt;/script&gt;
&lt;style&gt;
.map {
width: 100%;
height:400px;
}
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id&#x3D;&quot;map&quot; class&#x3D;&quot;map&quot;&gt;&lt;/div&gt;
&lt;script src="main.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;</code></pre>
</div>
<div class="row-fluid">
<h5 class="source-heading">package.json</h5>
<pre><code id="example-pkg-source" class="language-json">{
&quot;name&quot;: &quot;wms-custom-tilegrid-512x256&quot;,
&quot;dependencies&quot;: {
&quot;ol&quot;: &quot;6.12.0&quot;
},
&quot;devDependencies&quot;: {
&quot;parcel&quot;: &quot;^2.0.0&quot;
},
&quot;scripts&quot;: {
&quot;start&quot;: &quot;parcel index.html&quot;,
&quot;build&quot;: &quot;parcel build --public-url . index.html&quot;
}
}</code></pre>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.bundle.min.js"></script>
<script src="./resources/prism/prism-1.20.0.min.js"></script>
<script src="./resources/common.js"></script>
<script src="common.js"></script>
<script src="wms-custom-tilegrid-512x256.js"></script>
<script>
$('#tag-example-list').on('show.bs.modal', function (event) {
const button = $(event.relatedTarget); // Button that triggered the modal
const title = button.data('title');
const content = button.data('content');
const modal = $(this)
modal.find('.modal-title').text(title);
modal.find('.modal-body').html(content);
});
var packageUrl = 'https://raw.githubusercontent.com/openlayers/openlayers.github.io/build/package.json';
fetch(packageUrl).then(function(response) {
return response.json();
}).then(function(json) {
var latestVersion = json.version;
document.getElementById('latest-version').innerHTML = latestVersion;
var url = window.location.href;
var branchSearch = url.match(/\/([^\/]*)\/examples\//);
var cookieText = 'dismissed=-' + latestVersion + '-';
var dismissed = document.cookie.indexOf(cookieText) != -1;
if (branchSearch && !dismissed && /^v[0-9\.]*$/.test(branchSearch[1]) && '6.12.0' != latestVersion) {
var link = url.replace(branchSearch[0], '/latest/examples/');
fetch(link, {method: 'head'}).then(function(response) {
var a = document.getElementById('latest-link');
a.href = response.status == 200 ? link : '../../latest/examples/';
});
var latestCheck = document.getElementById('latest-check');
latestCheck.style.display = '';
document.getElementById('latest-dismiss').onclick = function() {
latestCheck.style.display = 'none';
document.cookie = cookieText;
}
}
});
</script>
</body>
</html>
Reference in New Issue View Git Blame Copy Permalink