Vue+OpenLayers7入门到实战：OpenLayers7加载天地图

原创 已于 2024-03-09 21:26:15 修改 · 1k 阅读 · 1 ·
CC 4.0 BY-SA版权
本博客所有文章、代码和作品版权归博主eguid所有，未经博主允许不得私自改编和转载，侵权必究。关注博主微信公众号：eguid
文章标签：

#vue.js #前端 #javascript #OpenLayers #OpenLayers7 #天地图

于 2024-02-02 10:52:00 首次发布
本文详细介绍了如何使用OpenLayers7在Vue项目中加载天地图，包括申请天地图key、xyz瓦片规则及加载不同类型的天地图图层。提供了代码示例，展示了卫星图、普通地图及纯标记图的实现效果。

返回《Vue+OpenLayers7》专栏目录：Vue+OpenLayers7入门到实战

前言

本章介绍如何使用OpenLayers7在地图上加载天地图.

天地图瓦片访问需要先到天地图申请key。天地图官网链接

本文使用xyz方式加载天地图，并且介绍如何加载xyz格式天地图url，包括天地图纯底图（无标记）、卫星影像图和纯标记图（不含底图）

Vue+OpenLayers7入门到实战

二、依赖和使用

"ol": "7.5.2"
  1. 使用npm安装依赖
了解本专栏 订阅专栏 解锁全文
8.在 Vue 3 中使用 OpenLayers 加载天地图示例（多种形式）
小彭的博客
12-04 2733
本文展示了如何在 Vue 3 中使用 OpenLayers 加载天地图，并通过简单的切换逻辑实现多种地图样式的动态加载。结合 Vue 的 Composition API 和 OpenLayers 的强大功能，可以为项目开发提供更灵活和高效的地图功能。🎉。
Openlayers实战：加载天地图
大剑师兰特的GIS世界
07-14 1448
国家地理信息公共服务平台“天地图”（以下简称“天地图“）是国家基础地理信息中心建设的网络化地理信息共享与服务门户。其属于国家队的，有一定的权威性。在Openlayers中如何加载天地图呢，方法很简单，用XYZ的形式。它分为底图和标注，可以灵活的做配合使用。
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 项目中，并根据自己的需求进行修改和调整。
开源GIS（三）——openlayers地图基本框架与天地图加载
xcymorningsun的专栏
09-04 8795
目录 一、引言   二、openlayer中map基本框架   三、加载天地图   四、总结     一、引言   换工作中间耽误了好长时间没有更过blog了，现在终于有时间搞开源webgis了，先从openlayer下手，后面打算在研究geoserver、postgis、geotool等技术和OGC中WMS、WFS、WCS等标准。搞起==     二、openlay...
使用Openlayers调用天地图在线服务数据
iwillsw的专栏
12-06 1万+
使用Openlayers调用天地图在线服务数据
【OpenLayers】天地图——实现弹框功能
最新发布
weixin_41027083的博客
08-22 2174
本文采用天地图的瓦片资源，结合openlayers进行展示。【浏览器端】技术：vue+ol。
vue openlayer加载天地图
qq_46160082的博客
03-04 2018
vue+arcgis api两种环境下加载天地图（1.esri-loader、2.@arcgis/core）_我有柚子茶噢的博客-优快云博客 相比较于arcgis api openlayer加载天地图就很简单了，因为底层的切片方案是一致的 <template> <div id="map"></div> </template> <script> import "ol/ol.css"; import Map from "ol/Map.
Vue中openlayers加载天地图
u011671747的专栏
03-30 1720
<template> <div id="map" ref="rootmap"> <div id="mouse-position"></div> </div> </template> <script> import 'ol/ol.css' import {get as getProjection} f...
vue+openlayers学习：加载天地图
p1758133202的博客
10-19 1725
vue+openlayers学习：加载天地图创建项目1.创建webpack2.安装openlayers的依赖写代码更改App.vue运行 笔者本人是纯新手，学习的过程记录一下，也可以给像我一样学习openlayers的同学一些思路，欢迎各位大佬前来指正 创建项目 在创建项目之前，需安装node js和vue-cli，可以直接百度，上面介绍的安装很细 1.创建webpack 推荐使用vscode 打开vscode，然后【文件】>【打开文件夹】打开需要创建项目的文件夹 打开【终端】，在终端输入界面里
Vue+OpenLayers7入门到实战：OpenLayers7加载离线瓦片xyz地图，vue项目如何使用离线瓦片
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
02-21 576
本章介绍如何使用OpenLayers7在地图上如何使用离线瓦片。以vue项目为例，将已经下载好的xyz离线瓦片放在vue项目中，使用OpenLayers直接加载vue中的瓦片图片，即可进行加载地图。
vue项目中使用天地图
01-08
1.首先打开天地图注册账号 申请自己所用的key 网址：http://lbs.tianditu.gov.cn/home.html 2.创建自己的vue项目，这里就不说了 3.将 引入到你项目中的index.html文件中 4.创建map.vue文件 <!-- 点击画多边形 --> export default { data(){ return{ } }, created(){ }, mounted(){ this.loadmap() },
Vue+OpenLayers7入门到实战：OpenLayers7地图整合到Vue项目中的两种方式
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
01-24 724
OpenLayers本身已经是支持模块化，所以引入vue项目很简单。在vue中使用OpenLayers，最简单的是混合方式。直接在vue项目中和前端代码混在一起写，适合业务简单的项目。另一种是与前端代码分离的方式，前端写前端的代码。GIS写GIS的代码，各写各的，互不影响。最后前端以模块化的方式使用地图功能代码，这样可以实现gis地图功能代码复用，引入其他地方也可以复用。虽然两种方式最终实现功能是一样的，但是当代码越来越多，业务越来越复杂，后面代码分离方式是最优选，可以实现数据和地图功能的解耦。
Vue+OpenLayers7入门到实战：html原生网页如何使用OpenLayers7地图
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
01-24 783
尽管现在大部分网页都是使用Vue或者React开发了，但是还是有不少开发者使用的是网页原生html进行开发，或者是老项目维护的需要，所以为了照顾使用html原生网页的同学们，本章简单讲解一下如何使用原始html网页情况下使用OpenLayers7。《Vue+OpenLayers7：快速搭建Vue+OpenLayers7地图脚手架项目。从零开始构建Vue项目并整合OpenLayers7.5.2》。
Vue+OpenLayers7入门到实战：OpenLayers如何使用全屏控件，来实现地图容器的全屏和退出全屏功能
GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
03-16 397
本章介绍如何使用OpenLayers7在地图上使用地图全屏控件，来控制地图容器的全屏和退出全屏的功能。注意：这里的全屏控件全屏指的是地图容器全屏，并非整个网页全屏。《Vue+OpenLayers7入门到实战：OpenLayers如何实现地图全屏和退出全屏操作，实现指定网页节点全屏和退出全屏》
Vue使用openlayers加载天地图
收集、分享
08-07 169
Vue使用openlayers加载天地图
vue中利用openlayers加载天地图
xuerwang的博客
09-19 1万+
首先在vue中安装openlayes依赖，现在推荐使用ol，ol需要一个一个的引入，我嫌麻烦就直接用的openlayers，我把openlayrs定义为全局变量，下载完openlayers依赖包后，在main.js里面引入， import ol from 'openlayers; 然后设置成全局属性 Vue.prototype.$ol=ol; 使用ol时，只需要使用this.$ol就可以了...
Openlayer - vue中加载天地图（入门篇）
人与人之间最小的差别是智商，最大的差别是坚持。
08-15 682
基于Vue脚手架构建的，按照教程天地图就可以显示出来了。
vue3-openlayers 使用tianditu,wmts和xyz等source加载天地图切片服务
无心使然云中漫步
06-18 929
加载注记图层后，切片虽然显示png，但是好像不是透明的,只能在注记图层增加透明度控制。主要是不同类型source的使用。
Openlayers+天地图在页面上显示（初始化）（使用vue3）
m0_57816620的博客
10-18 2626
使用openlayers+天地图完成初始化页面的显示
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

汤姆猫不是猫

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

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

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

打赏作者

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

抵扣说明：

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

余额充值