OpenLayers之OGC服务加载
一、实验内容
- 手动构造 GetCapabilities、GetMap 的操作链接，并在浏览器里发送HTTP 请求；利用 OpenLayers 进行 WMS 服务加载；
- 手动构造 GetCapabilities、GetTile 的操作链接，并在浏览器里发送HTTP 请求；利用 OpenLayers 进行 WMTS 服务加载；
- 手动构造 GetCapabilities、DescribeFeatureType、GetFeature 的操作链接，并在浏览器里发送 HTTP 请求；利用 OpenLayers 进行 WFS 服务加载以及
加载时添加过滤条件。
二、实验步骤
2.1 利用TileWMS加载WMS
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./v6.5.0-dist/ol.css">
<script src="./v6.5.0-dist/ol.js"></script>
<style>
html,
body {
height: 100%;
width: 100%;
}
#map {
height: 100%;
width: 100%;
margin: 0%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var projection = ol.proj.get('EPSG:4326');//地图投影坐标系
var map = new ol.Map({
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2,
}),
layers: [
new ol.layer.Tile({ source: new ol.source.OSM() })]
});
var wmsLayer = new ol.layer.Tile({
source: new ol.source.TileWMS({
url: 'https://ahocevar.com/geoserver/wms',
params: { 'LAYERS': 'topp:states' }
})
});
map.addLayer(wmsLayer)
var mousePositionControl = new ol.control.MousePosition({ projection: 'EPS6:4326' });
map.addControl(mousePositionControl);
</script>
</body>
</html>
2.2 利用ImageWMS加载WMS
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./v6.5.0-dist/ol.css">
<script src="./v6.5.0-dist/ol.js"></script>
<style>
html,
body {
height: 100%;
width: 100%;
}
#map {
height: 100%;
width: 100%;
margin: 0%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var projection = ol.proj.get('EPSG:4326');//地图投影坐标系
var map = new ol.Map({
target: 'map',
view: new ol.View({
center: [0, 0],
zoom: 2,
}),
layers: [
new ol.layer.Tile({ source: new ol.source.OSM() })]
});
var wmsLayer = new ol.layer.Image({
source: new ol.source.ImageWMS({
url: 'https://ahocevar.com/geoserver/wms', params: { 'LAYERS': 'usa:states' }
})
});
map.addLayer(wmsLayer)
var mousePositionControl = new ol.control.MousePosition({ projection: 'EPS6:4326' });
map.addControl(mousePositionControl);
</script>
</body>
</html>
2.3 加载WMTS
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./v6.5.0-dist/ol.css">
<script src="./v6.5.0-dist/ol.js"></script>
<style>
html,
body,
div {
height: 100%;
width: 100%;
margin: 0%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var projection = ol.proj.get("EPSG:4326"); var projectionExtent = projection.getExtent();
var size = ol.extent.getWidth(projectionExtent) / 256; var resolutions = [];
for (var z = 2; z < 19; ++z) {
resolutions[z] = size / Math.pow(2, z);
}
var map = new ol.Map({
layers: [
new ol.layer.Tile({
source: new ol.source.WMTS({
url: "http://t{0-6}.tianditu.gov.cn/vec_c/wmts?tk=1d109683f4d84198e37a38c442d68311",
name: "中国矢量1-4级",
layer: "vec",
style: "default",
matrixSet: "c",
format: "tiles",
wrapX: true,
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent), resolutions: resolutions,
matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
})
}),
}),
new ol.layer.Tile({
source: new ol.source.WMTS({
name: "中国矢量注记1-4级",
url: "http://t{0-6}.tianditu.gov.cn/cva_c/wmts?tk=1d109683f4d84198e37a38c442d68311",
layer: "cva",
style: "default",
matrixSet: "c",
format: "tiles",
wrapX: true,
tileGrid: new ol.tilegrid.WMTS({
origin: ol.extent.getTopLeft(projectionExtent), resolutions: resolutions,
matrixIds: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14]
})
}),
})
],
target: "map",
view: new ol.View({
center: [120.14805, 30.26971], projection: projection,
zoom: 3,
maxZoom: 17, minZoom: 1
})
});
</script>
</body>
</html>
2.4 利用其它格式加载WFS
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./v6.5.0-dist/ol.css">
<script src="./v6.5.0-dist/ol.js"></script>
<style>
html,
body {
height: 100%;
width: 100%;
}
#map {
height: 100%;
width: 100%;
margin: 0%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var projection = ol.proj.get('EPSG:3857');//地图投影坐标系
var map = new ol.Map({
target: 'map',
view: new ol.View({
center: [-8908887.277395891, 5381918.072437216],
zoom: 12,
}),
layers: [
new ol.layer.Tile({ source: new ol.source.OSM() })]
});
var vectorSource = new ol.source.Vector();
var vector = new ol.layer.Vector({
source: vectorSource,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(0，0，255,1.0)',
width: 2,
}),
}),
});
var vectorSource = new ol.source.Vector({
format: new ol.format.GeoJSON(),
url: function (extent) {
return (
"https://ahocevar.com/geoserver/wfs?service=WFS&" +
"version=1.1.0&request=GetFeature&typename=osm:water_areas&" +
"outputFormat=application/json&srsname=EPSG:3857&" +
"bbox=" +
extent.join(',') + ',EPSG:3857'
);
},
strategy: ol.loadingstrategy.bboxStrategy,
});
var vector = new ol.layer.Vector({
source: vectorSource,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(0, 0，255,1.0)', width: 2,
}),
}),
});
map.addLayer(vector)
var mousePositionControl = new ol.control.MousePosition({ projection: 'EPS6:4326' });
map.addControl(mousePositionControl);
</script>
</body>
</html>
2.5 利用ol.format.WFS加载WFS
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./v6.5.0-dist/ol.css">
<script src="./v6.5.0-dist/ol.js"></script>
<style>
html,
body {
height: 100%;
width: 100%;
}
#map {
height: 100%;
width: 100%;
margin: 0%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
var projection = ol.proj.get('EPSG:3857');//地图投影坐标系
var map = new ol.Map({
target: 'map',
view: new ol.View({
center: [-8908887.277395891, 5381918.072437216],
zoom: 12,
}),
layers: [
new ol.layer.Tile({ source: new ol.source.OSM() })]
});
var vectorSource = new ol.source.Vector();
var vector = new ol.layer.Vector({
source: vectorSource,
style: new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'rgba(0，0，255,1.0)',
width: 2,
}),
}),
});
// generate a GetFeature request
var featureRequest = new ol.format.WFS().writeGetFeature({
srsName: 'EPSG:3857',
featureNS: 'http://openstreemap.org',
featurePrefix: 'osm',
featureTypes: ['water_areas'],
outputFormat: 'application/json',
filter: ol.format.filter.and(
ol.format.filter.like('name', 'Mississippi*'),
ol.format.filter.equalTo('waterway', 'riverbank')),
});
// then post the request and add the received features to a layer
fetch(' https://ahocevar.com/geoserver/wfs', {
method: 'POST',
body: new XMLSerializer().serializeToString(featureRequest),
})
.then(function (response) { return response.json(); })
.then(function (json) {
var features = new ol.format.GeoJSON().readFeatures(json);
vectorSource.addFeatures(features);
map.getView().fit(vectorSource.getExtent());
});
map.addLayer(vector)
var mousePositionControl = new ol.control.MousePosition({ projection: 'EPS6:4326' });
map.addControl(mousePositionControl);
</script>
</body>
</html>
OpenLayers之OGC服务加载的更多相关文章
- Android 三级联动选择城市＋后台服务加载数据库
技术渣,大家将就着看 首先我们需要一个xml数据保存到数据库,这里我从QQ下面找到一个loclist.xml文件 <CountryRegion Name="中国" Code= ...
- ArcGIS API for Silverlight 调用GP服务加载等值线图层
原文:ArcGIS API for Silverlight 调用GP服务加载等值线图层 第二篇.Silverlight客户端调用GP服务 利用ArcGIS API for Silverlight实现G ...
- Openstack本学习笔记——Neutron-server服务加载和启动源代码分析（三）
本文是在学习Openstack过程中整理和总结.因为时间和个人能力有限.错误之处在所难免,欢迎指正! 在Neutron-server服务载入与启动源代码分析(二)中搞定模块功能的扩展和载入.我们就回到 ...
- 影像服务——加载CESIUM自带的影像服务
1.加载arcgis数据——ArcGisMapServerImageryProvider var viewer = new Cesium.Viewer("cesiumDiv",{ ...
- openlayers的loaders方式加载
openlayers loaders方式加载 let layerVector = new ol.layer.Vector({ source : new ol.source.Vector({ loade ...
- 使用第三方CDN加速服务加载js/css
ASP.NET MVC 3.0 http://ajax.aspnetcdn.com/ajax/mvc/3.0/jquery.unobtrusive-ajax.js http://ajax.aspnet ...
- 如何让aspnet服务加载静态资源html（我的动态网页静态化） 转
我们知道,IIS自身是不能处理像ASPX扩展名这样的页面,只能直接请求像HTML这样的静态文件. 当客户端请求一个服务器资源时,这个HTTP请求会被inetinfo.exe进程截获(www服务),然后 ...
- 记录一次win2003服务器的IIS服务加载.flv后缀的资源报错404的处理方法
问题:访问某个域名下的xxxx.flv资源,页面报错404. 解决思路: 1.权限是否给足 user权限给完全控制咯 如果你访问该域名下的其他资源无问题的话就不是介个原因了 2.MIME类型是否少了 ...
- Arcgis for Js之加载wms服务
概述:本节讲述Arcgis for Js加载ArcgisServer和GeoServer发布的wms服务. 1.定义resourceInfo var resourceInfo = { extent: ...
- openlayers 加载瓦片详解 一
在这先说点题外话,本人在研究webgl 三维球过程中惊人发现,openlayers 的开发人员也在研究webgl并经证实他们也正在研发基于 webgl的三维gis开源平台,这可能是首个开源的三维平台, ...
随机推荐
- 【Java SE进阶】Day10 缓冲流、转换流、序列化流 、打印流
一.缓冲流 1.概述 比普通流更强大的IO流,可以增加读写的效率 组成 缓冲输入流:BufferedInputStream.BufferedReader 缓冲输出流:BufferedOutputStr ...
- 【面试题总结】JVM01-组成及垃圾回收
一.概念 1.JVM组成及作用 (1)组成:类加载器.运行时数据区(Java内存模型).执行引擎.本地库接口 (2)作用: 类加载器(ClassLoader)把class文件转换成字节码: 运行时数据 ...
- 【JVM调优】Day03：GC参数、OOM出现方式、调优实战
一.常用GC参数(20个左右即可) 1.各种垃圾回收器的参数 PS + PO 常用的只有几十个 CMS的比较多,不建议使用 G1的常用参数简单 ZGC只有三个参数 二.OOM出现的方式 1.写一个让内 ...
- day35-JSON&Ajax03
JSON&Ajax03 4.jQuery的Ajax请求 原生Ajax请求问题分析: 编写原生的Ajax要写很多的代码,还要考虑浏览器兼容问题,使用不方便 在实际工作中,一般使用JavaScri ...
- CVE-2020-1938与CVE-2020-13935漏洞复现
前言 最近在腾讯云上买了个服务器,准备用来学习.在安装了7.0.76的tomcat后,腾讯云提醒我存在两个漏洞,分别是CVE-2020-1938和CVE-2020-13935,在修复完漏洞后,准备复现 ...
- 2022年7月14日，第四组 周鹏，认识JAVA的第二天(；´д｀)ゞ(；д；)
那天,我遇到了JAVA 然后,我失去了头发 无论我用了多少办法 还是放不下那个它 我哭的像个傻瓜 但也没能留住它 如果再有一次从来 我愿为它披上薄纱 愿它安稳有个家 可我终究还是失去了它 失去了原本为 ...
- shell端口监听异常邮箱告警
业务场景:应用发布监听服务是否正常启动,因为服务器资源不够上不了prometheus.grafana,所以写的shell脚本监听.此脚本适用于初创公司及小微企业使用. 准备工作 除了shell脚本这里 ...
- Web初级——数组对象常用api
js数组常用api 连接函数:join("连接符") var array = [1,2,3,4,5] console.log(array.join("+")) ...
- [C++]const_cast,dynamic_cast,reinterpret_cast,static_cast转型
C++四种新式转型: const_cast(expression) dynamic_cast(expression) reinterpret_cast(expression) static_cast( ...
- 使用SQL4Automation让CodeSYS连接数据库
摘要:本文旨在说明面向CodeSYS的数据库连接方案SQL4Automation的使用方法. 1.SQL4Automation简介 1.1.什么是SQL4Automation SQL4Auto ...