openlayers加载在线天地图数据

最新推荐文章于 2022-05-28 17:07:51 发布
最新推荐文章于 2022-05-28 17:07:51 发布
阅读量518 收藏
点赞数
分类专栏： openlayers 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhu_zhu_xia/article/details/108601227
版权

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>tianditu</title>

    <link rel="stylesheet" href="./css/ol.css" type="text/css">

    <script src="./build/ol.js"></script>

    <style type="text/css">

        #map {

            position: absolute;

            width: 100%;

            height: 100%;

            overflow: hidden;

            left: 0;

            top: 0;

        }

    </style>

</head>

 

<body>

    <div id="map" class="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({

                        name: "中国矢量1-14级",

                        url: "http://t{0-6}.tianditu.com/vec_c/wmts?tk=you token",

                        layer: "vec",

                        style: "default",

                        matrixSet: "c",

                        format: "tiles",

                        wrapX: true,

                        tileGrid: new ol.tilegrid.WMTS({

                            origin: ol.extent.getTopLeft(projectionExtent),

                            //resolutions: res.slice(0, 15),

                            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-14级",

                        url: "http://t{0-6}.tianditu.com/cva_c/wmts?tk=you token",

                        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: [118.236, 28.365],

                projection: projection,

                zoom: 3,

                maxZoom: 19,

                minZoom: 1

            })

        });

    </script>

</body>

</html>

 

提示：在线天地图数据调用需申请个人token。

zhu_zhu_xia
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
OpenLayers 6加载各种地图源的方法(天地图、百度、高德、ArcGIS、Bing、OSM、Google等)
liu2004051957的博客
11-18 1万+
OpenLayers是一个用于开发WebGIS客户端的JavaScript包。OpenLayers 支持多种常用的地图来源，包括天地图、百度地图、高德地图、ArcGIS地图、Bing地图、OSM地图、Google地图等。
天地图配置参数（北京）
01-05
天地图配置参数 分辨率Resolution 每个级别的比例尺（scale）和分辨率（resolution） 切图原点 切图范围
天地图影像地图服务
leileitime的博客
01-18 6989
全球影像 http://t0.tianditu.cn/img_w/wmts?service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={z}&TileRow={y}&TileCol={x}&style=default&format=tiles 全球中文注记 http://...
瓦片检索小项目总结
高端客户
09-06 477
1、项目框架 前端框架：Openlayers 后台框架：SpringMVC 其他技术：WebSocket、并发 2、瓦片 坐标系（EPSG:3857，EPSG:4326，EPSG:4490） 原点 origin(均范围为左上角) 墨卡托： [-20037508.342789244, 20037508....
echarts地图和百度车牌api
gys9895的博客
08-25 396
echarts地图
openlayers 加载天地图示例
02-24
在"Openlayers 加载天地图示例"中，`Openlayers-tianditu.html`很可能是主HTML文件，它会引入OpenLayers库以及我们自定义的`tiandituLayers.js`脚本来实现天地图的加载。在HTML文件中，我们可能会看到一个`<div>`...
openlayers加载在线天地图.zip
最新发布
06-19
4. 数据叠加：除了加载天地图，你还可以叠加其他数据源，如GeoJSON、KML等，实现数据的可视化展示。 通过以上步骤，你已经成功地使用OpenLayers加载了在线天地图。这只是一个基本的示例，OpenLayers提供了更多高级...
openlayers5加载天地图影像.zip
06-23
本文将深入探讨如何使用OpenLayers 5加载天地图影像，这是一个中国本土的、提供丰富地理信息的在线地图服务。 首先，了解基本概念。天地图是中国测绘科学研究院开发的地理信息系统，它提供了多种地图服务，包括影像...
openlayers5加载天地图.zip
06-21
在"openlayers5加载天地图.zip"这个压缩包中，我们可以期待找到一个示例项目，展示了如何利用OpenLayers 5来加载和展示天地图的数据。天地图是中国的一个官方基础地理信息服务平台，提供了丰富的地图服务，包括地形...
openlayers加载WMS服务
05-31
总结来说，OpenLayers加载WMS服务是构建Web地图应用的重要一环。通过理解WMS的工作原理、OpenLayers的API以及如何配置WMS图层，开发者可以创建出包含丰富地理信息的交互式地图。在实际应用中，可以根据需求进行定制...
Openlayers中多边形的聚合
dreamgis的专栏
05-28 1686
关于OpenLayers的Cluster ol.source.Cluster ol利用这个js对象实现对地图上feature进行聚合展示的控制，所有的features需要被放在一个feature数组中作为ol.source.Vector中features属性进行载入。 下面就是官方针对Cluster的API文档： new ol.source.Cluster(options) options: Constructor options. Name Type Description a
openlayers修改样式_OpenLayers教程：多源数据加载之WMTS
weixin_33506900的博客
01-05 1382
一、WMTS简介 WMTS，即Web地图瓦片服务（Web Map Tile Service），由OGC（开放地理信息联盟）制定。根据WMTS标准，可以使我们轻松的访问瓦片数据。 WMTS提供了一种采用预定义地图瓦片发布数字地图服务的标准化解决方案，它最重要的特征是采用瓦片缓存技术缓解WebGIS服务器端数据处理的压力，提高前后端交互响应速度。 WMS（Web地图服务）提供可定制地图的服...
OpenLayer学习之加载天地图在线地图
weixin_45756177的博客
01-17 2076
1.天地图官网 http://www.tianditu.gov.cn/ 2.申请key **注意：**天地图自2019年1月 1日起需获得开发授权，然后在引用的API 地址后增加授权信息即可（&tk=您的密钥），申请地址如下https://console.tianditu.gov.cn/api/key，按照网站提示步骤申请即可。 http://lbs.tianditu.gov.cn/authorization/authorization.html#example 3.调用 4.确定天地图服务 天
openlayers加载天地图WMTS服务
心如止水 宠辱不惊
08-21 2477
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="https://cdn.bootcss.com/openlayers/4.6.5/ol.css" rel...
Openlayers3中实现地图的切割
LZUGIS
07-30 3524
本文讲述如何在Openlayers3中结合canvas实现对地图的切割。
openlayers加载百度地图作为底图坐标偏移的解决办法
热门推荐
u013594477的专栏
11-12 1万+
openlayers加载天地图作为底图，在网上找了公开的服务资源，要做到百度地图与天地图之间切换，同样也从网上找到百度地图的服务资源但是在地图上坐标总是有偏差，最初的代码是这样的： var projection = ol.proj.get(&amp;amp;quot;EPSG:3857&amp;amp;quot;); //加载百度地图采用3857坐标系 var resolutions = []; for(var i=0; i&amp;amp;amp;lt;19...
Openlayers加载在线地图
hjhandhf的专栏
06-12 3264
html代码一map.html： Map html代码二test.html： load map function init(){ var subframe = document.getElementById("subframe"); subframe.contentWindow.initM
使用openlayers 3 在线加载天地图及GeoServer发布的地图
chaoyang89111的博客
09-05 3217
之前试了openlayers2加载天地图，不过公司已经弃用2，所以使用openlayers3来加载天地图卫星图和标注图层，今天又学习了GeoServer发布地图，一并用openlayers测试加载出来，顺便实现了7种地图控件。下面直接贴代码： OpenLayers MapQuest Demo html, body,
Openlayers加载腾讯、高德、天地图
deban8949的博客
11-16 1848
之前加载的百度地图，偏移较大，一直没有再测试，于是将腾讯、高德、天地图的整理一下，方便查看。 腾讯js代码： 1 OpenLayers.Layer.QQ = OpenLayers.Class(OpenLayers.Layer.TileCache, { 2 sateTiles: !1, 3 initialize: function(a, b, c) {...
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加载天地图时，需要注意保护好自己的开发者密钥，在与天地图服务提供商之间的交互中，应该遵守相关协议和政策。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值