Openlayers在线调用天地图服务

最新推荐文章于 2024-02-04 16:46:06 发布
最新推荐文章于 2024-02-04 16:46:06 发布
阅读量1.2k 收藏 7
点赞数
分类专栏： GIS 文章标签： javascript html openlayers 天地图
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42276781/article/details/121380342
版权

在联网的情况下，前端的地图展示如果需要底图，首先考虑的肯定是在线地图。

在线地图中优先级最高的当属无偏移的天地图。

 现给出天地图的调用示例tianditu.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>test </title>
  <link rel="stylesheet" href="ol.css" type="text/css">
  <style>
    .map {
      width: 100%;
      height: 750px;
    }
  </style>
</head>
<body>
  <div id="map" class="map"></div>
  <script src='ol.js'></script>
  <script>
   var basemap = new ol.Map({
		layers: [
			new ol.layer.Tile({
				source: new ol.source.XYZ({
					url: 'http://t0.tianditu.gov.cn/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=134e6b671b2b1f64c383628fbe12b4d1'
				}),
				name: 'basemap'
			}),
			new ol.layer.Tile({
				source: new ol.source.XYZ({
					url: 'http://t0.tianditu.gov.cn/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=134e6b671b2b1f64c383628fbe12b4d1'
				}),
				name: 'basemap'
			}),
		],
		target: 'map',
		view: new ol.View({
			projection: "EPSG:3857",
			center: [12690421.950433187, 3796171.9350186167],
			zoom: 9,
			minZoom: 9,
			maxZoom: 12,
			extent:[12245143.987260092, 3503549.8435043739, 13135699.91360628, 4096139.0404472323],
			constrainResolution: true,
		})
	})
  </script>
</body>
</html>

上述代码的目录下需包含ol.js和ol.css，其下载链接如下下载链接https://github.com/openlayers/openlayers/releases/download/v6.9.0/v6.9.0-dist.ziphttps://github.com/openlayers/openlayers/releases/download/v6.9.0/v6.9.0-dist.zip

也可以直接下载 在线调用天地图.zip 里面包含ol.css、ol.js、tianditu.html

下面是效果图

后台看到很多人下载我在CSDN上传的  在线调用天地图.zip ，发现他们都消耗了积分。我一开始上传这个资源的时候设置的是不允许自动调分，且需要积分设置成了0。当有人下载后，CSDN自动调整了这个资源的积分，我又将其更改为0且设置不允许自动调分，结果后续有人下载又花费了积分。

如果没有积分的小伙伴想要这份资源，可以关注下方公众号，回复“在线调用”即可获得资源

Toblerone_Wind
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
openlayer3 热力图
12-18
基于openlayers3 heatmap.js 写的一个 实例 可以直接运行 包含了实例数据
Openlayers绘制地图标注
10-14
主要为大家详细介绍了Openlayers绘制地图标注，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
openlayers加载天地图
最新发布
m0_51431448的博客
02-04 878
vue集成openlayers，加载天地图
在线调用天地图.zip
10-10
在线调用天地图.zip
读天地图影像地形－使用Openlayers调用天地图在线服务数据
07-19
接天地图影像、地形等基础地理信息服务；各类数据的服务器地址，瓦片下载url拼接方法等等
openlayers5加载点要素.rar
06-27
此代码为调用天地图，在天地图上画了一个点，然后显示在地图上。
OpenLayers6 裁切地图(Layer Clipping)
pro_tian的专栏
07-20 1123
在地图上挖一个洞对地图进行显示 下载svg文件，在线转换为Converter 在线转换地址：http://demo.qunee.com/svg2canvas/ map.vue <template> <div> <div id="map" class="map"></div> </div> </template> <script> import 'ol/ol.css' import Map ...
OpenLayers加载不同类类型的天地图(矢量图、影像图、地形图)并实现动态切换效果
liu2004051957的博客
11-22 3720
OpenLayers开发库如何实现加载不同类类型的天地图(矢量图、影像图、地形图)并实现动态切换效果。
vue框架用OpenLayers实现地图裁剪，定位
qq_35371821的博客
07-24 2451
由于做大屏，公司想简单的做一个地图显示只想显示湖北省的地图 于是就有了下面的骚操作 个人记录 html <!-- 地图显示容器--> <div id="map" class="amap-page-container"></div> <!-- maker点击显示坐标信息--> <div id="makerAlert" class="makerAlert"> <div class="maker-t"> &
OpenLayers 6实现底图裁剪效果,只显示指定城市或区域范围内的地图
liu2004051957的博客
11-22 2296
本源代码基于OpenLayers 6开发库实现底图的区域裁剪显示效果，比如只显示某城市或指定边界范围内的地图。
2. Openlayers加载天地图、百度、高德、ArcGIS、Bing、OSM、Google地图 （结合Vue 详细教程）
全栈三维GIS开发工程师，擅长Cesium、OpenLayers、Three.js、WebGL、Vue、Django、GDAL和QGIS技术。在这个博客里，我将分享我的开发经验、技术心得和项目案例，希望能为GIS爱好者和开发者提供有价值的参考。
06-11 1万+
本文介绍了如何在 OpenLayers 中加载不同类型的地图数据源，包括天地图、百度地图、高德地图、ArcGIS、Bing Maps、OpenStreetMap (OSM) 和 Google 地图。针对每种数据源，本文提供了相应的示例代码，展示了如何使用专用加载器或通用加载器实现底图加载。通过遵循本文的示例和指南，您可以轻松地将各种地图数据源添加到您的 OpenLayers 项目中，并根据自己的需求进行修改和调整。
自定义地图示例：天地图（二）
mapdigit
07-06 3128
有了天地图地图图片的URL生成规则，就可以开始实行对自定义地图类型天地图的支持。 引路蜂地图包中类MapType，接口ICustomMapType主要用来支持自定义地图。在类MapType中定义了 GENERIC_MAPTYPE_1 ，GENERIC_MAPTYPE_2 … GENERIC_MAPTYPE_7 用于支持自定义地图，其中类型 GENERIC_MAPTYPE_7 由两层组成（GENE...
openlayers切换加载天地图和高德地图
ssy001128的博客
06-09 999
openlayers切换加载天地图和高德地图
ES6 环境下 Openlayers 集成使用 ol-ext 以及在线示例
linzi19900517的博客
02-01 3229
ES6 环境下 Openlayers 集成使用 ol-ext 以及在线示例。
天地图卫星地图在OpenLayers中的应用示例源码
02-27 2651
天地图卫星地图在OpenLayers中的应用示例源码 一、准备工作 1、 到OpenLayers的官方网站下载压缩包，如下图所示。 img1.png (103.14 KB, 下载次数: 0) 下载附件  保存到相册 2014-2-27 12:57 上传 2、到水经注软件官方网站下载《水经注万能地图下载器》或《天地图卫星地图下载器》均可。
ol xyz 加载天地图_OpenLayer学习之加载天地图
weixin_39581716的博客
12-20 724
一、OpenLayers 3 中有一个对应的数据源(ol.source)类 – ol.source.TileImage，但是天地图的切片方式和google地图的切片的方式一样，OpenLayer定义一个类专门门加载此类地图- ol.source.XYZ，这个类是 ol.source.TileImage 的一个特例，继承了 ol.source.TileImage，其中 XYZ 分别对应切片所在的 x...
Open Layer学习之路（Ⅰ） 在线显示一个简单的地图
weixin_43395693的博客
04-16 251
本文向您展示如何在网页上放置一个简单的地图。 对于生产，我们强烈建议将应用程序及其依赖项捆绑在一起，如构建OpenLayers应用程序教程中所述。 要将地图包括在网页中，您将需要三件事： 包括OpenLayers <div>地图容器 用JavaScript创建一个简单的地图 1. 包括OpenLayers <script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.5.0/b
OpenLayers6入门，OpenLayers加载天地图
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
11-10 503
本章讲解如何使用OpenLayers加载天地图，需要先到天地图申请key。本文使用xyz方式加载天地图，并且介绍如何加载xyz格式天地图url，包括天地图纯底图（无标记）、卫星影像图和纯标记图（不含底图）
OpenLayers加载天地图方法——WMTS和XYZ
热门推荐
顽劣的石头——www.gisgogo.cn
05-19 2万+
1、ol.layer.Tile及数据源类结构openlayers中，图层(layer)不可缺少的组成部分是数据源(source)，天地图是切片的数据服务，对应的图层是ol.layer.Tile，下图是其数据源对应的类结构图，红色部分是重点内容。从图可以看到，加载天地图的数据源，可以是ol.source.WMTS（简称WMTS） 和 ol.source.XYZ（简称XYZ）。下面首先以实际的代码对分...
vue openlayers加载天地图
06-28
### 回答1： 要在Vue中加载天地图，需要先安装OpenLayers和天地图的相关库。可以通过npm安装： ``` npm install ol @supermap/iclient-ol6 --save ``` 然后在Vue组件中引入OpenLayers和天地图的相关库： ```javascript import ol from 'ol'; import { Tianditu } from '@supermap/iclient-ol6'; ``` 接着，在Vue组件的mounted生命周期中，创建地图并添加天地图图层： ```javascript mounted() { // 创建地图容器 const mapContainer = document.getElementById('map'); // 创建地图对象 const map = new ol.Map({ target: mapContainer, view: new ol.View({ center: [, ], zoom: 2 }) }); // 创建天地图图层 const tiandituLayer = new Tianditu({ layerType: 'vec', key: 'your-tianditu-key' }); // 添加天地图图层到地图中 map.addLayer(tiandituLayer); } ``` 其中，`your-tianditu-key`需要替换成你自己的天地图开发者密钥。如果没有密钥，可以在天地图开发者平台申请。 ### 回答2： Vue 是一种流行的前端框架，能够帮助开发者构建高效的用户界面。而 OpenLayers 则是一种流行的前端地图库，它提供了许多强大的地图功能，包括地图渲染、矢量数据展示、标注等等。 天地图是一种常用的在线地图服务，提供了丰富的地图数据资源，包括卫星影像、地形数据、街景图等等。 为了加载天地图，并在 Vue 中使用 OpenLayers 进行地图展示，我们需要采取以下步骤： 1. 获取天地图的 API 密钥 天地图需要注册开发者账号，并获得一个 API 密钥，才能进行在线地图服务的调用。获取密钥后，我们可以在 OpenLayers 中调用天地图的 WMTS 服务，加载所需的瓦片数据。 2. 安装必要的依赖库 在 Vue 项目中使用 OpenLayers，需要先安装相关的依赖库。具体来说，我们需要安装三个库：ol、proj4 和 proj4leaflet。其中，ol 是 OpenLayers 的核心库，proj4 和 proj4leaflet 则是用于地图坐标转换的工具库。 可以使用 npm install 命令来安装这些库。 3. 在 Vue 模板中添加地图容器 在 Vue 的模板中，我们可以添加一个 div 元素，用于承载 OpenLayers 的地图容器。这个容器需要设置样式来确定它所占据的位置和大小。 4. 在 Vue 中引入 OpenLayers 和天地图的配置 为了在 Vue 中加载 OpenLayers 和天地图服务，我们需要新建一个 .js 文件，用于配置这些服务的相关信息。在这个文件中，我们需要引入 OpenLayers 和 proj4 库，以及天地图的 API 密钥。 5. 在 Vue 中引入地图组件 最后，在 Vue 的组件中，我们需要引入地图组件，并在其 mounted 生命周期中，调用我们定义好的配置文件，来加载天地图服务和 OpenLayers 的地图显示。 通过以上步骤，我们就可以在 Vue 中，轻松地加载和显示天地图，并使用 OpenLayers 进行地图展示和交互。 ### 回答3： Vue是一种流行的JavaScript框架，它提供了一种开发Web应用程序的方法，使您可以使用组件，指令和状态来轻松构建丰富的用户界面。而OpenLayers是一个功能强大的JavaScript库，它可以帮助您在Web应用程序中实现各种地图和空间分析功能。 天地图是一种广泛使用的中国地图服务，它提供了各种地图数据，如道路，建筑物和地形，以及各种功能，如地理编码和路径规划。对于Vue开发人员来说，整合天地图和OpenLayers可以为他们的Web应用程序提供丰富的地图功能。 要加载天地图，需要使用OpenLayers的TileLayer组件。在Vue应用程序中，您可以使用Vue-OpenLayers，这是一个Vue组件库，为OpenLayers提供了Vue绑定。下面是一些步骤，可以帮助您在Vue中加载天地图： 步骤一：安装Vue-OpenLayers组件库 您可以使用npm安装Vue-OpenLayers： npm install vue-openlayers 步骤二：导入Vue-OpenLayers组件 您需要在Vue组件中导入Vue-OpenLayers组件： import { Map, TileLayer } from 'vue-openlayers'; 步骤三：创建地图容器 您需要在模板中添加一个地图容器： <template> <div> <Map ref="map"> <TileLayer type="XYZ" url="http://t{0-7}.tianditu.gov.cn/DataServer?T=vec_w&X={x}&Y={y}&L={z}" attributions="&copy;2018 TDT&nbsp;|&nbsp;http://www.tianditu.gov.cn/" /> </Map> </div> </template> 步骤四：配置天地图数据 您需要在TileLayer组件中配置天地图数据。此处的URL应该是天地图服务提供商提供的。 步骤五：运行应用程序 您可以运行Vue应用程序，并在浏览器中查看地图。现在，您应该能够看到一个包含天地图数据的地图！您可以尝试通过添加更多图层来定制地图，或者使用OpenLayers的各种功能来实现空间分析。 在使用Vue-OpenLayers加载天地图时，需要注意保护好自己的开发者密钥，在与天地图服务提供商之间的交互中，应该遵守相关协议和政策。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Toblerone_Wind

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值