Openlayers在线调用天地图服务

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

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

现给出天地图的调用示例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且设置不允许自动调分，结果后续有人下载又花费了积分。

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

Openlayers在线调用天地图服务相关推荐

调用天地图服务出现403错误的两种场景
403错误 403 Forbidden 是HTTP协议中的一个状态码(Status Code).可以简单的理解为没有权限访问此站.就是说服务器理解了本次请求但是主动拒绝执行该任务 1 key问题导致 ...
使用leaflet或者openlayers 3 调用MapServer服务最佳实践完整说明
本文系转载,原文链接: https://blog.csdn.net/future_todo/article/details/71187031 最近尝试了很多次,看到网上的很多教程都是版本比较老旧,会出 ...
cesium调用天地图服务
全球矢量地图服务 var viewer = new Cesium.Viewer("cesiumContainer", {animation: false, //是否显示动画控件 b ...
Cesium调用天地图服务【亲测可用】
废话不多说直接上代码 var viewer = new Cesium.Viewer("cesiumContainer", {animation: false, //是否显示动画控件 ...
GIS初学者，最新OpenLayers WMTS 天地图，OpenLayers加载天地图、调用天地图WMTS示例、tianditu、EPSG:3857、EPSG:4326
2018最新OpenLayers天地图加载可行方案,天地图WMTS调用,OpenLayers 天地图 WMTS GetCapabilities GetTile 最近要了解Web GIS方面的知识,对我 ...
《水经注地图服务》发布的卫星影像数据在OpenLayers中调用
(本文首发于"水经注GIS"公号,关注公号免费领取地图数据) OpenLayers是一个用于开发WebGIS客户端的JavaScript包. OpenLayers 支持的地图来源包 ...
在vue中用openlayers调取天地图服务并动态选择各个省份的中心，及行政边界
vue这块我就不说了,直接讲openlayers. 1.openlayers是什么? Openlayers是一个专为Web GIS客户端开发提供的JavaScript类库包,用于实现标准格式发布的地图 ...
SuperMap GIS基础软件天地图服务QA
目录一.天地图有哪些类型? 二.国家天地图提供哪些服务? 三.使用前你应该知道的天地图知识 1.天地图服务协议 2.天地图相关参数 3.如何申请天地图key 4.天地图瓦片预览四.天地图在Supe ...
arcgis加载天地图_ArcGIS Runtime SDK for Android100.5.0端加载天地图服务
点击图片上方蓝色字体GIS点滴即可订阅我们都知道,天地图服务的调用都需要获取授权.在这种模式下,之前通过WebTiledLayer加载的方式在Android端就无法显示了,由下图可知,虽然正确发送了 ...

Openlayers在线调用天地图服务

Openlayers在线调用天地图服务相关推荐

最新文章

热门文章