OL4叠加显示天地图地图服务之WMTS实例

最新推荐文章于 2024-03-28 11:45:04 发布
原创 最新推荐文章于 2024-03-28 11:45:04 发布 · 1.2k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#OL4 #OpenLayers4 叠加WMTS格式

本文介绍了如何在OpenLayers 4（OL4）中叠加显示WMTS（Web Map Tile Service）格式的天地图服务。通过创建XYZ数据源并配置URL，可以加载天地图的墨卡托切片地形图。同时，提供了天地图地形图的WMTS服务地址，并说明了如何获取和配置图层服务参数来实现叠加显示。

OL4叠加显示wmts地图服务可通过XYZ数据源格式进行加载

如：

  var tianditu4 = new ol.layer.Tile({
                title: "天地图墨卡托切片地形",
                source: new ol.source.XYZ({
                    url: 'http://t0.tianditu.com/ter_c/wmts?service

最低0.47元/天 解锁文章
012：vue+openlayers 加载Stamen地图（3种形式）
大剑师兰特的GIS世界
08-09 1073
本示例的目的是介绍演示如何在vue+openlayers中添加Stamen地图，并含多种的表现形式。
046：mapboxGL加载天地图路网图+标记（wmts方式）
大剑师兰特的GIS世界
10-14 1739
本示例的目的是介绍演示如何在vue+mapbox中加载天地图路网图+标记（wmts方式）。瓦片中的url地址引用的是天地图的wmts的形式。
Leaflet.js加载天地图的WMTS服务（EPSG4326类型）
02-18
通过修改Leaflet扩展插件leaflet-tilelayer-wmts.js加载天地图的wmts服务（epsg4326类型）。具体介绍见：http://blog.youkuaiyun.com/dahongdahong/article/details/49685653 补充： 对于新版本的leaflet不建议使用插件方式，其本身已经支持4326坐标系了
如何在ArcGIS中加载云南天地图WMTS服务？
heroyuan2011的博客
06-08 2562
一、打开云南省地理信息公共服务平台二、找到开发资源——本地服务资源三、主题分类包括，影像地图、电子地图、行政驻地、POI服务、矢量服务、注记服务等，时效性上影像最近更新到2023年3月 四、查看服务详情，打开服务URL五、打开WMTS链接六、找打下面的网址，就是ARCGIS中构建WMTS服务的网址七、在 ARCGIS中构建WMTS服务
geoserver wmts服务叠加
369540808
08-01 363
由于项目需求，在发布的地图服务的基础上，在其上面叠加一层路网数据，类似arcgis的服务叠加。简单介绍一下geoserver wtms服务叠加。 geoserver 发布两个地图切片服务分别为test1:test1_linegroup和test1:test1_pointgroup。 test1:是工作空间 test1_linegroup：图层组 test1_pointgroup：图层组 ...
cesium vue 天地图 WMTS图层数据 绘制点、线、面 测距、测面积
前端-舟遥遥的博客
03-29 1722
cesium vue 天地图 WMTS图层数据 绘制点、线、面 测距、测面积
底层开发js工具库调用天地图WMTS服务
04-13
总结来说，本文介绍了使用JavaScript工具库（如OpenLayers、Leaflet）调用天地图WMTS服务的基础知识，包括创建地图实例、设置WMTS图层以及叠加自定义瓦片图层的方法。开发者可以根据具体需求，灵活运用这些技术来...
如果使用 ol v10+ 加载天地图 http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS
11-20
天地图WMTS服务的URL模板为：http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS 我们需要了解WMTS服务的必要参数：图层名称（layer）、样式（style）、图块矩阵集（TileMatrixSet）、格式（format）等。 对于天...
openlayers加载在线天地图.zip
06-19
4. 加载天地图图层：根据天地图的WMS或WMTS服务配置图层。这里以WMS为例： ```javascript var tdtLayer = new ol.layer.Tile({ source: new ol.source.TileWMS({ url: 'http://wms.tianditu.gov.cn/wms_c/wms', /...
使用 ol v10.6.1 加载天地图 http://t0.tianditu.gov.cn/img_w/wmts?SERVICE=WMTS 写一段示例代码
最新发布
11-20
注意：天地图WMTS服务使用EPSG:3857坐标系，提供影像图层（img_w）、矢量图层（vec_w）和标注图层（cia_w）等。 本例以影像图层（img_w）为例。 步骤： 1. 引入OpenLayers的CSS和JS文件（这里使用CDN方式）。 ...
Cesium for Unreal 插件编译打包 - UE 加载 WMTS 天地图
毛阿姨的博客
11-23 2327
Cesium for unreal是基于Cesium Native的，打包插件需要事先编译Cesium for unreal
REST地图与天地图叠加
12-14
本例演示了在Flex客户端下，REST地图如何与天地图叠加。
GIS初学者，最新OpenLayers WMTS 天地图，OpenLayers加载天地图、调用天地图WMTS示例、tianditu、EPSG:3857、EPSG:4326
热门推荐
EnVon的专栏
09-14 1万+
2018最新OpenLayers天地图加载可行方案，天地图WMTS调用，OpenLayers 天地图 WMTS GetCapabilities GetTile 最近要了解Web GIS方面的知识，对我这些外行人来说比较吃力，用OpenLayers加载天地图也遇到了小打击，一番折腾，终于做到仅仅显示了，把过程简单记录下： 首先是百度一轮，看了不少博客，感觉差不多后，自己动手就是不成功，继续摸...
高德地图api使用天地图图层wmts
a1511884894的博客
10-13 2778
vue3项目中，高德地图使用天地图图层
leaflet加载天地图、叠加2000坐标wmts服务
weixin_38738760的博客
10-25 3066
Leaflet加载天地图、叠加2000坐标的wmts服务
ArcGIS API for JavaScript 加载天地图WMTS图层
huangli
04-30 3510
原文地址：ArcGIS API for JavaScript 加载天地图WMTS图层 本文介绍了ArcGIS API for JavaScript如何加载天地图WMTS图层，包括地理坐标系、投影坐标系下的矢量和影像地图。读完本文可以使用同样方法加载高德、百度等地图服务。 预览 在线预览：http://giser.xyz/demo/TianDiTu/index.html ...
天地图常用WMTS配置参数
weixin_30950607的博客
01-19 1503
wmts常用参数 var matrixIds = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19','20'];var resolutions = [0.703125, 0.3515625,0.17578125,0.087890...
天地图引擎加载自定义WMTS图层
Aurora_1970s的博客
09-22 4016
天地图引擎加载自定义WMTS图层 问题描述 最近在开发过程中碰到在天地图引擎中叠加自定义的WMTS图层，天地图官网API：天地图JavaScript API 4.0 在代码示例中添加自定义图层只有一行代码： var imageURL = "http://t0.tianditu.gov.cn/img_w/wmts?" + "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TIL
web端实现高德地图加载天地图作为底图（使用WMTS）
03-28 2202
我们在做卫星影像地图开发时，在偏远地区，高德地图的清晰度不够，因此需要使用天地图，但是高德地图的API更有利于开发者进行功能开发，因此，我们想到使用高德地图添加天地图作为底图来进行使用。废话不多说，直接上代码，该示例代码除了使用天地图作为底图外，还添加了多边形编辑功能。代码中的key替换为高德地图和天地图的key即可。
天地图叠加wms图层
01-18
### 如何在天地图中添加并配置WMS图层 #### 配置参数说明 为了成功叠加WMS图层至天地图，需确保`config`对象中的各项属性设置无误。具体来说： - `version`: 定义所使用的WMS协议版本号[^2]。 - `layers`: 列举要显示的一个或多个图层的名字，通过逗号分隔[^4]。 - `transparent`: 设置为`true`表示输出的地图图像具有透明背景；反之则否。 - `styles`: 描述样式的字符串，默认为空串意味着采用默认样式。 - `srs`: 坐标参照系(Spatial Reference System)，通常设为`EPSG:4326`以匹配地理坐标系统。 - `format`: 输出图形文件格式，如`image/png`用于PNG格式的图片。 #### 实现代码示例 下面给出一段基于OpenLayers框架实现天地图上叠加WMS图层的例子： ```javascript import 'ol/ol.css'; import Map from 'ol/Map'; import View from 'ol/View'; import TileLayer from 'ol/layer/Tile'; import OSM from 'ol/source/OSM'; import ImageWMS from 'ol/source/ImageWMS'; const map = new Map({ target: 'map', layers: [ new TileLayer({ source: new OSM() }), new TileLayer({ source: new ImageWMS({ url: 'http://t0.tianditu.gov.cn/cia_w/wmts?service=wms&request=GetMap', // 替换为实际WMS服务器地址 params: { LAYERS: 'topp:states', // 对应于所需的WMS图层名 VERSION: "1.1.1", STYLES: '', FORMAT: 'image/png', TRANSPARENT: !0, SRS: 'EPSG:4326' }, serverType: 'geoserver' // 如果是GeoServer作为后台，则指定此选项 }) }) ], view: new View({ center: [0, 0], zoom: 2 }) }); ``` 上述脚本创建了一个包含基础底图（来自开放街道地图(OSM)）和自定义WMS覆盖物的新地图实例。注意这里的URL应当替换为目标WMS服务的真实路径，并调整相应的参数来适应特定需求。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值