OpenLayers6入门，OpenLayers加载必应地图（BingMap），需要申请api key

最新推荐文章于 2024-11-25 18:18:55 发布
原创 最新推荐文章于 2024-11-25 18:18:55 发布 · 639 阅读 · 1 ·
CC 4.0 BY-SA版权
本博客所有文章、代码和作品版权归博主eguid所有，未经博主允许不得私自改编和转载，侵权必究。关注博主微信公众号：eguid
文章标签：

#vue.js #前端 #OpenLayers #必应地图

本文介绍了如何在OpenLayers6中加载必应地图，首先需要在必应开发者中心申请API Key。接着，详细讲解了在Vue项目中使用OpenLayers的步骤，并提供了代码示例展示如何实现这一功能。通过简单几步，即可成功将必应地图集成到地图应用中。

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

前言

本章讲解OpenLayers如何加载必应地图（BingMap）到地图上。
需要提前到必应开发者中心申请对应的地图访问api key才可以加载地图。
openlayers

二、依赖和使用

"ol": "^6.15.1"
  1. 使用npm安装依赖
npm install ol@6.15.1
  1. 使用Yarn安装依赖

                

                
                
        

         

    



  


        

                

                  

                  

                  了解本专栏
                  
                  
                    
                  订阅专栏 解锁全文
                   
                

        


    



                



	

		

			

				
					
049：vue+openlayers 鼠标pointermove显示城市名片

				
			

			

				

					大剑师兰特的GIS世界
				

				

					08-14
					
					2706
					
				

			

		

		

			
				
本示例的目的是介绍演示如何在vue+openlayers中采用overlay实现城市名片的效果，移动鼠标到相应的位置点，出现城市的信息。

			
		

	



                

            
              



	

		

			

				
					
Vue+OpenLayers7入门到实战：OpenLayers加载必应地图（BingMap）

				
			

			

				

					GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
				

				

					03-14
					
					517
					
				

			

		

		

			
				
本章介绍如何使用OpenLayers7在地图上如何加载必应地图（BingMap）。需要提前到必应开发者中心申请对应的地图访问api key才可以加载地图。

			
		

	



              


  
              

                


	

		

			

				
					
Cesium无需KEY调用Bing地图

				
			

			

				

					ONEGISER的博客
				

				

					11-10
					
					3058
					
				

			

		

		

			
				
前言
虽然Cesium默认已经实现了Bing地图的调用，但需要申请key。如何不用key就可调用？抱着好奇的心态去看了下他的源代码。通过分析源代码，最终完成了调用，记录如下：
关键源码
BingMapsImageryProvider.tileXYToQuadKey = function (x, y, level) {
  var quadkey = "";
  for (var i = level; i >= 0; --i) {
    var bitmask = 1 << i;
    

			
		

	





	

		

			

				
					
bing 地图api使用

				
			

			

				

					rgbaflf的专栏
				

				

					02-18
					
					5629
					
				

			

		

		

			
				
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/htm

			
		

	



		

			
		



	

		

			

				
					
bingMap的使用小结

					
热门推荐

				
			

			

				

					gagaprince的代码世界
				

				

					01-17
					
					1万+
					
				

			

		

		

			
				
这两天研究了一下必应地图,并且按照官方文档编写封装成地图工具类，此过程中也遇到一些问题，在这里记录一下。

1.为什么要用bing地图

其实在国外有google，在国内有百度，怎么着应该都轮不到研究bing地图，但是现在的问题是，我需要在国内使用世界地图，如果要用google地图，就必须翻墙使用，这就造成了访问瓶颈，而百度地图又不提供世界地图。所以bing就变成了最好的选择。

2.

			
		

	





	

		

			

				
					
Bing Maps  Key

				
			

			

				

					weixin_30617561的博客
				

				

					10-16
					
					1287
					
				

			

		

		

			
				
Application nameKey / URLUpdate Key

BingMapWeb
Amabn8REcQp90xASYaBuM7u7bffgNd5nkYV-VEhOCJpTgwgt_ZTLWStzrgrMI9c3
Update





Trial / Public website




转载于:https://www.cnblogs.c...

			
		

	





	

		

			

				
					
BingMap key终是开始限制严格了

				
			

			

				

					jcx5083761的专栏
				

				

					10-16
					
					7971
					
				

			

		

		

			
				
2015年十一，BingMap终是修改了BingMap key的授权，开始进行严格的限制了，之前的有关key的文档也说过key的限制问题，不过数量上的限制始终没有真正的实施，之前的策略是申请了BingMap的Public website类型的key，只是时间上有一年的限制，实际数量上没有严格的限制，但是今年的十一之后数量上的限制严格了。
      目前Public website类型的key的

			
		

	





	

		

			

				
					
011：vue+openlayers加载引用bing地图（多种形式）

				
			

			

				

					大剑师兰特的GIS世界
				

				

					08-09
					
					1099
					
				

			

		

		

			
				
本示例的目的是介绍演示如何在vue+openlayers中添加bing地图，并含多种的表现形式。

			
		

	





	

		

			

				
					
Vue+OpenLayers6从入门到实战进阶案例汇总目录，Vue+OpenLayers6地图整合教程，OpenLayers6中文文档，OpenLayers6中文手册

				
			

			

				

					GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
				

				

					10-31
					
					4931
					
				

			

		

		

			
				
本篇作为《Vue+OpenLayers入门教程》和《Vue+OpenLayers实战进阶案例》所有文章的二合一汇总目录，方便查找。

> 本专栏源码是由OpenLayers结合Vue框架编写。
> 本专栏从Vue搭建脚手架到如何引入OpenLayers依赖的每一步详细新手教程，再到通过各种入门案例和综合性的实战案例，带领大家快速上手Vue+OpenLayers开发。

			
		

	





	

		

			

				
					
Vue+OpenLayers6一本通，OpenLayers6完整教程大全，OpenLayers6全知全解，OpenLayers6入门、实战、扩展进阶三合一专栏目录汇总

				
			

			

				

					GIS技术方向，GIS地图技术分享(GIS入门、Openlayers教程、Leaflet教程)，做最好的GIS地图开发教程。关注博主公众号：eguid
				

				

					05-29
					
					1835
					
				

			

		

		

			
				
Gis开发入门，OpenLayers、Leaflet、Maplibre-gl和Cesiumjs地图引擎介绍以及几种地图服务vms、vmts介绍OpenLayers介绍，相比较其他地图引擎有什么优点OpenLayers7.x版本和6.x版本有什么区别，是否需要升级到OpenLayers7版本？OpenLayers6实战：OpenLayers创建自定义控件，以创建一个地图复位控件为例OpenLayers6实战，OpenLayers创建自定义鹰眼控件，自定义鹰眼控件样式，调整鹰眼控件位置、大小、文字和按钮等样式。

			
		

	





	

		

			

				
					
创建bing API key

					
最新发布

				
			

			

				

					qq_40713201的博客
				

				

					11-25
					
					4949
					
				

			

		

		

			
				
我们返回home点击bing  resources，就会看见新增一条。点击新创建的名字，黄色框内是endpoint地址以及key。填写相关内容，名字随便起，价格选择F开头（free）点击链接可以看到有两条key。核对一下没问题点击创建。登录账号之后新创资源。

			
		

	





	

		

			

				
					
Cesium：采用自己的bingMap Key以及隐藏Cesium图标

				
			

			

				

					weixin_34087307的博客
				

				

					02-28
					
					3425
					
				

			

		

		

			
				
2019独角兽企业重金招聘Python工程师标准>>>   
                                        
         ...

			
		

	





	

		

			

				
					
八、openlayers官网示例Bing Maps解析——加载Bing地图

				
			

			

				

					aaa_div的博客
				

				

					05-11
					
					985
					
				

			

		

		

			
				
this.styles装了几个样式，这里循环把每个样式的图层都加载到地图上了，都设置了图层不显示visible: false，并且给每一个图层设置了一个name，方便后面切换。接下来来看一下如何加载BingMaps，首先需要去申请一个key，我申请了一下，流程不难，这里贴一个别人写的申请流程。如果在加载地图时设置placeholderTiles为false那地图就会拉伸图片来替代默认图片。加一个下拉框绑定事件，选择某一个样式时把其他图层隐藏，只显示当前这一个。Bing Maps地图使用。

			
		

	





	

		

			

				
					
BingMap

				
			

			

				

					weixin_30493321的博客
				

				

					11-27
					
					173
					
				

			

		

		

			
				
Application nameKey details



BngMapTest


Key:25nTPiuDe0kxITMR1ymE~j5IlskEImiwGsGmAnsCftQ~Ap0HigfJujLqYts8v6L75GnW5eanTPrMILHKLQPhzr_MefVpc62i8yfYC2h_ql1lApplication Url:Key type:Bas...

			
		

	





	

		

			

				
					
在vue中打开bingmap

				
			

			

				

					weixin_44293625的博客
				

				

					10-06
					
					1529
					
				

			

		

		

			
				
使用bingMap需要使用一个key
注册BingMapkey
下面是我注册的
At0AC5clqqASpeFYI62kMtfRYAlAWKodmuMnyQj9ZzR-F_qHEMeIQALDng0tH7ML

核心代码：
    import bingMap from 'ol/source/BingMaps'


  const bingMapKey = "At0AC5clqqASpeFYI62...

			
		

	





	

		

			

				
					
如何获取Bing站长工具API密钥

				
			

			

				

					T19900的博客
				

				

					08-18
					
					1764
					
				

			

		

		

			
				
如果你是新注册的Bing站长工具账号，注册登录成功后，即提示你添加网站，如果您在使用谷歌的站长工具可以直接导入数据，非常方便；API密钥是为Bing站长账户而非网站生成的，因此用户可以在Bing网站管理员工具上为其所有经过验证的网站使用相同的API密钥。如果您是第一次使用Bing站长工具的API Access，你还需要“生成API密钥”，如下图所示。如果你已经有Bing站长工具，你也可以点击左上角的网站列表，重新添加未添加的网站地址。本文将详细介绍如何通过Bing站长工具生成用于网站链接推送的API密钥。

			
		

	





	

		

			

				
					
代码整理-网站集成必应地图

				
			

			

				

					csdn_yasin的博客
				

				

					10-20
					
					735
					
				

			

		

		

			
				
网站集成必应地图

			
		

	





	

		

			

				
					
openlayers3加载OSM、BingMaps、百度地图、天地图、wfs图层

				
			

			

				

					傲骨雄风的博客
				

				

					10-30
					
					3987
					
				

			

		

		

			
				

&lt;html&gt;
&lt;head&gt;
    &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
    &lt;title&gt;加载图层控件（自定义）&lt;/title&gt;
    &lt;link rel="stylesheet" ty

			
		

	





	

		

			

				
					
 OpenLayers 加载bing地图

				
			

			

				

					09-23
				

			

		

		

			
				
OpenLayers可以通过使用OpenLayers的API和相应的图层来加载Bing地图。可以按照以下步骤进行操作：

1. 首先，确保你已经引入了OpenLayers的JavaScript库文件。可以通过在HTML文件的`<head>`标签中添加以下代码来实现：
```
<script src="https://openlayers.org/en/latest/build/ol.js"></script>
```

2. 然后，创建一个地图容器元素，可以是一个`div`或者其他的HTML元素。例如：
```
<div id="map" style="width: 600px; height: 400px;"></div>
```

3. 接下来，使用以下代码创建一个OpenLayers的地图实例，并指定Bing地图作为图层：
```
var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({
      source: new ol.source.BingMaps({
        key: 'Your_Bing_Maps_API_Key',
        imagerySet: 'Aerial' // 可选的图像类型，可以是Aerial、AerialWithLabels等
      })
    })
  ],
  view: new ol.View({
    center: ol.proj.fromLonLat([0, 0]), // 地图中心点的经纬度坐标
    zoom: 10 // 初始缩放级别
  })
});
```
请注意，上述代码中的`Your_Bing_Maps_API_Key`需要替换为你自己的Bing地图API密钥。

4. 最后，你可以根据需要自定义地图的样式和功能，例如添加控件、设置地图交互等。



			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

  

	
    

      

      

      

        
        

          
          

            

              成就一亿技术人!
            

            

              拼手气红包6.0元
            

          

        

        

          

            还能输入1000个字符
             | 博主筛选后可见
          

          

             
          

          

            

              红包
              添加红包
            

            

              表情包
              插入表情
              

                

              

            

            

              表情包
              代码片
              

                
              

            

            

              
              
              
              
              
              
              
            

          

        

      

    

		

			

			

			

					 条评论被折叠 查看
			

			

				
			

		

	

	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
汤姆猫不是猫

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

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

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

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值