WMS 示範_20201027

Leaflet is an an open-source JavaScript library for mobile-friendly interactive maps http://leafletjs.com/ Here data is provided by OpenStreetMap

by kikkoma

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.css">
<div id="map"></div>

CSS

#map {
  height: 500px;
}

JavaScript

var center = [24.038160, 121.472157];
var map = L.map('map').setView(center, 7);

L.tileLayer(
  'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 18
  }).addTo(map);


var wmsOptions2 = {
  layers: 'eez',
  transparent: true,
  //opacity: 0.5,
  format: 'image/png',
  crs: L.CRS.EPSG4326
}

var wmsLayer2 = L.tileLayer.wms('http://geo.vliz.be/geoserver/MarineRegions/ows?', wmsOptions2).addTo(map);

var wmsOptions = {
  layers: '1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20',
  transparent: true,
  //opacity: 0.5,
  format: 'image/png',
}
//https://gis3.nve.no/map/services/Nettanlegg1/MapServer/WmsServer?request=GetCapabilities&service=WMS
var wmsLayer = L.tileLayer.wms('http://idpgis.ncep.noaa.gov/arcgis/services/NWS_Forecasts_Guidance_Warnings/natl_fcst_wx_chart/MapServer/WmsServer?', wmsOptions).addTo(map);