OpenLayers6入门，OpenLayers使用百度地图底图作为图源，不需要地图开放平台token就可以访问

已于 2024-11-03 23:14:03 修改
阅读量1.8k 收藏
点赞数 1
分类专栏： # Vue+OpenLayers6入门 Vue+OpenLayers6入门到实战 OpenLayers6一本通 文章标签： 前端 gis 使用百度地图图源 OpenLayer使用百度地图
于 2023-02-01 16:56:50 首次发布
本博客所有文章、代码和作品版权归eguid所有，未经博主允许不得私自改编和转载，侵权必究。
本文链接：https://blog.csdn.net/eguid/article/details/128836790
版权
本文介绍了如何在Vue项目中使用OpenLayers6，无需百度地图开放平台token，仅通过OpenLayers加载百度地图底图。详细讲解了依赖安装和代码实现过程，展示了如何借助supermap实现简单调用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

专栏目录：
OpenLayers6入门教程汇总目录

前言

一般使用百度地图是需要注册百度地图开放平台并获得对应的访问token才能访问地图的api，我们只使用百度的地图底图作为图层图源，不使用百度地图开放平台的api，使用OpenLayer来实现地图功能。

vue项目中如何使用OpenLayers6

vue项目集成并使用OpenLayers6地图的两种方式

依赖

"ol": "^6.15.1"
"@supermap/iclient-classic": "^11.0.0
了解本专栏 订阅专栏 解锁全文
78.在 Vue3 中使用 OpenLayers 实现地图地点搜索定位功能
小彭的博客
02-08 1277
本文详细介绍了如何在 Vue3 中集成 OpenLayers，实现地图地点搜索和定位功能。Vue3 项目环境的搭建与依赖安装。使用语法实现地图初始化和控件集成。通过 OpenLayers 的 Popup 和 Geocoder 插件，实现地址搜索和定位。希望这篇博文能帮助你快速掌握 Vue3 与 OpenLayers 的集成技术。如果在使用过程中遇到问题，欢迎在评论区留言讨论，或者参考 OpenLayers 官方文档获得更多帮助。注意。
openlayers：实现加载百度地图（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
02-06 1232
openlayers：实现加载百度地图（附完整源码）
Openlayers3结合百度地图API实现定位与展示
weixin_30815469的博客
06-03 701
概述：本文结合Openlayers3和百度地图API实现web上地图的展示，定位与展示功能，并可通过PC或者移动端访问。效果：pc端效果移动端在线预览实现代码：<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"&...
BUG:vite环境用@supermap/iclient-ol报错utils2.inherits is not a function
最新发布
u012804473的博客
03-20 150
我这边版本是 "@supermap/iclient-ol": "11.0.0",超图的包老是报错，之前还报echarts引用的问题。安装两个包（在devDependencies）。vite，开发环境下用超图的包会报错。未知，大概是编译问题。
openlayers 调用百度地图
08-19
openlayers 调用百度地图
OpenLayers 3 之 加载百度地图
热门推荐
研究与专注
10-26 3万+
很多人想使用 OpenLayers 调用百度地图、腾讯地图等国内地图，本文就讨论一下其可能性和实现原理。我们以百度地图为例，分析其地图调用原理，我们都使用过百度地图，在网速不快的情况下，肯定有过感受，地图是一块一块加载的，从这里我们就可以看出，地图是被切成了很多块的小图片，调用时按照一定规则请求需要的“切片”，可视区域以外的“切片”不加载，这样可以减小数据传输数据量，使地图加载更快。
【Openlayers+百度地图】准确加载百度地图
weixin_41027083的博客
09-12 1928
由于ol没有DB09的坐标系，当需要使用openlayers加载百度地图的瓦片资源时，地图的projection最好是DB09，如果使用。也是可以加载出底图的，但会出现点位偏移，位置不准确等问题，点位也会随着zoom变化而移动。的方式加载百度底图，然后再将需要展示的点位数据转为百度墨卡即可。
百度地图和openlayers融合封装(想法)
05-08 694
(openalers地图简称o地图，百度地图简称b地图，wmap地图简称w地图)openlayers逻辑关系： omap -&gt; olayer -&gt; ofeaturebaidu逻辑关系: bmap -&gt; bfeaturewmap（融合地图）, 要考虑对不同类别的feature的控制，所以wmap的逻辑关系： wmap -&gt; wlayer -&gt; wfeature区别：o地...
Vue+OpenLayers6从入门到实战进阶案例汇总目录，Vue+OpenLayers6地图整合教程，OpenLayers6中文文档，OpenLayers6中文手册
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
10-31 4093
本篇作为《Vue+OpenLayers入门教程》和《Vue+OpenLayers实战进阶案例》所有文章的二合一汇总目录，方便查找。 > 本专栏源码是由OpenLayers结合Vue框架编写。 > 本专栏从Vue搭建脚手架到如何引入OpenLayers依赖的每一步详细新手教程，再到通过各种入门案例和综合性的实战案例，带领大家快速上手Vue+OpenLayers开发。
Vue+OpenLayers6一本通，OpenLayers6完整教程大全，OpenLayers6全知全解，OpenLayers6入门、实战、扩展进阶三合一专栏目录汇总
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
05-29 1435
Gis开发入门，OpenLayers、Leaflet、Maplibre-gl和Cesiumjs地图引擎介绍以及几种地图服务vms、vmts介绍OpenLayers介绍，相比较其他地图引擎有什么优点OpenLayers7.x版本和6.x版本有什么区别，是否需要升级到OpenLayers7版本？OpenLayers6实战：OpenLayers创建自定义控件，以创建一个地图复位控件为例OpenLayers6实战，OpenLayers创建自定义鹰眼控件，自定义鹰眼控件样式，调整鹰眼控件位置、大小、文字和按钮等样式。
Vue+OpenLayers6入门教程汇总目录，OpenLayers教程，Vue+OpenLayers中文文档，OpenLayers手册，OpenLayers6文档教程，OpenLayers中文手册
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
05-21 1万+
OpenLayers介绍，相比较其他地图引擎有什么优点四种流行地图引擎比较Gis开发入门，OpenLayers、Leaflet、Maplibre-gl和Cesiumjs地图引擎介绍以及几种地图服务vms、vmts介绍。
openlayers5加载百度地图.zip
06-18
此代码采用了最新的openlayers5，引用了在线的百度地图，可供学习者使用参考，欢迎改进开发。
baiduMap_openlayer(openlayer加载百度地图和高德地图例子)
05-27
1、openlayer加载百度地图高德地图 2、主要js代码 ol.js ol.css 3、web 端 gis 参考学习例子
适合GIS专业学生和前端webgis小白快速上手的Vue+OpenLayers6入门到实战教程，OpenLayers6中文文档手册
GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程
04-23 1737
Gis开发入门，OpenLayers、Leaflet、Maplibre-gl和Cesiumjs地图引擎介绍以及几种地图服务vms、vmts介绍OpenLayers介绍，相比较其他地图引擎有什么优点OpenLayers7.x版本和6.x版本有什么区别，是否需要升级到OpenLayers7版本？OpenLayers6实战：OpenLayers创建自定义控件，以创建一个地图复位控件为例OpenLayers6实战，OpenLayers创建自定义鹰眼控件，自定义鹰眼控件样式，调整鹰眼控件位置、大小、文字和按钮等样式。
openlayers入门添加百度地图绘制点线面
qq_42688511的博客
03-07 1791
1.构建一个地图容器 <div id="map" class="map"></div> 2.创建一个地图 2.1初始化一个openlayersmap对象 var map=new Map({}) 2.2将这个对象添加到div中 var map=new Map({ target:'map' }) 2.3在layers中定义数组中可用的图层 tile是瓦片 layers:[] layers: [ new ol.layer.Tile({ s
openlayers加载百度地图一——定制百度地图
xiaonankeji的博客
11-06 3898
在开发中，我们常常会用到一些炫酷的地图，尤其是一些大屏项目，其实就是自定义地图。 国内的自定义地图服务有 ①高德自定义地图， ②百度自定义地图， ③百度地图个性在线编辑器。 国外的有mapbox的④mapbox-studio， 其中①和②都只能用在自己的平台，④是国外的，地图上会有英文的地名，这里我们重点说下③。 一、编辑百度自定义地图 1、打开百度地图个性在线编辑器 https://developer.baidu.com/map/custom/ 2、根据业务定制你需要的地图（下图是我定制的蓝色风格地图）
使用OpenLayer加载百度地图（无偏移）
weixin_41769441的博客
06-17 6122
本文使用OpenLayers最新版本V5.3.0演示：如何使用OpenLayer完美无偏移加载百度离线瓦片地图。OpenLayers 5.3.0下载地址为：https://github.com/openlayers/openlayers/releases/download/v5.3.0/v5.3.0-dist.zip。 使用OpenLayer加载百度地图离线瓦片地图 任意新建空目录命名为geTileMap；解压v5.3.0-dist.zip并复制其中ol.js、ol.css文件至geTil...
openlayers加载百度地图四——ol6加载百度地图
xiaonankeji的博客
11-09 2544
当把openlayers从5升级到6时，发现加载百度地图就发生瓦片错位的情况。 ol6加载瓦片的方式是从中心点依次向右下角递增，二ol5是从中心点依次向右上角递增，所以，需要把tileUrlFunction中的y坐标改为相反数即可： <template> <div class="box"> <div id="container"></div> </div> </template> <script
openlayers6加载百度在线地图
weixin_44957818的博客
09-15 1140
var projection = new ol.proj.get("EPSG:3857"); var resolutions = []; for (var i =0;i< 19; i++){ resolutions[i] = Math.pow(2,18-i); } var tilegrid = new ol.tilegrid.TileGrid({ origin: [-1657,26456], resolutions...
openlayers百度地图
07-25
OpenLayers 是一个开源的 JavaScript 库，用于在 Web 页面上显示动态地图。它支持多种地图提供商，包括百度地图。 要在 OpenLayers 中使用百度地图，您需要引入 OpenLayers 库和百度地图的 JavaScript API。以下是一个简单示例代码： ```html <!DOCTYPE html> <html> <head> <title>OpenLayers with Baidu Map</title> <style> #map { width: 100%; height: 400px; } </style> <script src="https://cdn.bootcss.com/openlayers/2.13.1/OpenLayers.js"></script> <script src="http://api.map.baidu.com/api?v=2.0&ak=YourBaiduMapAPIKey"></script> </head> <body> <div id="map"></div> <script> var map = new OpenLayers.Map("map"); var baiduLayer = new OpenLayers.Layer.Baidu(); map.addLayer(baiduLayer); var center = new OpenLayers.LonLat(116.404, 39.915).transform( new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject() ); map.setCenter(center, 12); </script> </body> </html> ``` 请将上面代码中的 `YourBaiduMapAPIKey` 替换为您自己的百度地图 API 密钥。这样，您就可以在 OpenLayers 中使用百度地图了。
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

汤姆猫不是猫

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

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

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

打赏作者

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

抵扣说明：

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

余额充值