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开源平台,这可能是首个开源的三维平台, ...
随机推荐
- 前端内容(HTML CSS javaScript)
前端内容 前端基础之HTML 前端基础之HTML HTML标签使用 HTML之form表单 前端基础之CSS 前端基础之CSS CSS字体颜色 背景 盒子模型 CSS浮动 溢出 头像框 CSS定位 i ...
- 聚焦技术，锐意创新，GaussDB给世界一个更优选择
摘要:从整个行业应用层面来看,现在,数据库的国产化时代已经到来. 本文分享自华为云社区<聚焦技术,锐意创新,GaussDB给世界一个更优选择>,作者: GaussDB数据库. 今天,以&q ...
- django.core.exceptions.ImproperlyConfigured: Field name `tester_id` is not valid for model `WebCase`.
代码: class WebCase(models.Model): id = models.AutoField(primary_key=True) casename = models.CharField ...
- 获取VIP歌曲
""" 分析需求 1,确定目标网址 2,获取目标网址的所有数据 3,筛选我们想要的数据 4,下载歌曲保存 """ import os imp ...
- 2022年7月15日，第四组，周鹏，JAVA认识的第三天，算法的第一天(╥╯^╰╥)(╥╯^╰╥)
算了,已经没有力气去创作些什么了, 8种排序方法我只会4种,剩下的以后再补. 发一个逻辑题吧: 一个村落,有50户人,在这些人中存在着n个红眼病. 在保证每人每天最少见一面的情况下,有如下规则: 1, ...
- sqlSession封装以及CRUD的实现
sqlSession封装以及CRUD的实现 封装MyBatisUtil dao 定义方法 映射文件写sql语句 daoimpl实现类 实现方法 test类测试方法 整体结构
- java中String类型的相关知识的简单总结
java中String类型的相关知识总结 一.常用方法: 1.构造方法: byte数组 可指定offset和length 可指定charset char数组 可指定offset和count 字符序列 ...
- （11）go-micro微服务雪花算法
目录 一 雪花算法介绍 二 雪花算法优缺点 三 雪花算法实现 四 最后 一 雪花算法介绍 雪花算法是推特开源的分布式ID生成算法,用于在不同的机器上生成唯一的ID的算法. 该算法生成一个64bit的数 ...
- MySQL 判断语句 条件函数 case when、if、ifnull
在MySQL中,需要用到条件判断函数,例如 case when.if.ifnull. 一.方法分类 二.具体方法 (1)if if(expr,result_true,result_false) 注意: ...
- VS Code離線安裝插件報錯Unable to install extension 'dart-code.flutter' as it is not compatible with VS Code '1.51.1'.
VS Code離線安裝插件報錯Unable to install extension 'dart-code.flutter' as it is not compatible with VS Code ...