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开源平台,这可能是首个开源的三维平台, ...
随机推荐
- JS中BOM与DOM操作
BOM操作 window对象 是与浏览器窗口做交互的语言 BOM = Browser Object Model 是指浏览器对象模型,它可以使Javascript 有能力和浏览器进行对话 window. ...
- C#从实习到搬砖
日常唠唠 没事就聊聊我在c#上踩过的那些坑,和一些笔记 少点比较,多些谦虚 会者不难 原博:轩先生大冒险 2022.4.19 datagridview 修改表头 dataGridView1.Colum ...
- 想做长期的 AB 实验？快来看看这些坑你踩了没
作者:江颢 1.什么是长期的 AB 实验 大部分情况下,我们做的 AB 实验都是短期的,一到两周或者一个月之内的,通过分析这段时期内测得的实验效应得出实验结论,并最终进行推广. 长期实验即运行时间达数 ...
- 教你铁威马NAS中如何进行阵列升级
磁盘阵列 (RAID) 是磁盘阵列的管理工具.当TNAS 中安装的硬盘多于1个时,组建适当的磁盘阵列能提高硬盘的存储效率,提高数据的安全性. 磁盘阵列升级,比如,将原来是RAID 0 或者RAID 1 ...
- 分布式注册服务中心etcd在云原生引擎中的实践
作者:王雷 etcd是什么 etcd是云原生架构中重要的基础组件,由CNCF孵化托管.ETCD是用于共享配置和服务发现的分布式,一致性的KV存储系统,是CoreOS公司发起的一个开源项目,授权协议为A ...
- 开源库libcli的安装与使用
源码:https://github.com/dparrish/libcli 环境 Ubuntu 20.04.2 LTS 编译libcli 参考:README.md 按照libcli中的 README ...
- vs code .net core Linux下离线安装Nuget包
本人第一次使用 vs code在linux下开发.net core项目,由于处于内网,无法通过在线安装,所以在遇见离线安装Nuget包时,耗费了一番功夫,网上也没有相关的,最后还是多个思路结合才解决的 ...
- 8. 字符串转整数 (atoi)
题目 代码 class Solution { public: int myAtoi(string str) { int res=0,sign=1; int i=str.find_first_not_o ...
- Java学习笔记：2022年1月9日(其一)
Java学习笔记:2022年1月9日(其一) 摘要:这篇笔记主要记录了Java运行时中的两种变量.以及参数的两种传递方式. 目录 Java学习笔记:2022年1月9日(其一) 1.不同变量的详细探讨 ...
- ABC193F Engines
简要题意 给出 \(n\) 个向量,求其子集的和的最大模长. \(1 \leq n \leq 100\) 思路 先说结论:选出的几个向量,一定是极角排序后的某一段(环形)区间. 这个不难感性理解,比如 ...