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 '93b46c619c'
${ noResults }
SubmarineMonitoring/common/plugin/map/ol/v6.5.0/examples/wms-tiled.html

338 lines
17 KiB
HTML
Raw Normal View History Unescape Escape

海底监测与灾害预警系统管理平台界面
2 weeks ago
<!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,URL,TextDecoder"></script>
<title>Tiled WMS</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.5.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">Tiled WMS</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 active&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;./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 active&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;./wms-custom-tilegrid-512x256.html&quot;&gt;WMS 512x256 Tiles&lt;/a&gt;"
tabindex="0"
>8</a>
</span>
<span class="badge-group">
<a
href="./index.html?q=tilelayer" class="badge badge-info">tilelayer</a
><a
class="badge badge-info tag-modal-toggle text-white"
data-toggle="modal"
data-target="#tag-example-list"
data-title="tilelayer"
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;./arcgis-tiled.html&quot;&gt;Tiled ArcGIS MapServer&lt;/a&gt;
&lt;a class=&quot;list-group-item list-group-item-action active&quot; href=&quot;./wms-tiled.html&quot;&gt;Tiled WMS&lt;/a&gt;"
tabindex="0"
>3</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 tiled WMS layer.</p>
<div id="docs"><p>WMS can be used as a Tile layer, as shown here, or as an Image layer, as shown in the <a href="wms-image.html">Single Image WMS example</a> example. Tiles can be cached, so the browser will not re-fetch data for areas that were viewed already. But there may be problems with repeated labels for WMS servers that are not aware of tiles, in which case single image WMS will produce better cartography.</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 TileLayer from &#x27;ol/layer/Tile&#x27;;
import TileWMS from &#x27;ol/source/TileWMS&#x27;;
import View from &#x27;ol/View&#x27;;
var layers &#x3D; [
new TileLayer({
source: new OSM(),
}),
new TileLayer({
extent: [-13884991, 2870341, -7455066, 6338219],
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;,
// Countries have transparency, so do not fade tiles:
transition: 0,
}),
}) ];
var 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;Tiled WMS&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;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-tiled&quot;,
&quot;dependencies&quot;: {
&quot;ol&quot;: &quot;6.5.0&quot;
},
&quot;devDependencies&quot;: {
&quot;parcel&quot;: &quot;^2.0.0-beta.1&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-tiled.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.5.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>