介绍

地图已经从纸质小册子中走了很长一段路，你会放在手套箱里，为公路旅行做准备。如今，地图程序为我们喜爱的许多应用程序提供支持，并使导航或跟踪服务提供商在前往某个位置的途中成为可能。

但是创建自定义地图程序可能具有挑战性，尤其是在需要覆盖大面积区域的情况下。您必须生成大量可靠的地理位置数据，以确保您的程序准确并能够响应消费者的需求。

因此，许多开发人员使用地图API来完成繁重的工作，以便他们可以专注于使其项目独特的核心编程。

背景

地图API和SDK可帮助开发人员创建功能强大的地图项目，而无需从头开始编写所有代码。您可以使用地图API 构建具有该领域专家精心开发的各种直观功能的自定义地图，而不是收集无穷无尽的地理位置数据。

您可以依靠一套工具和模板来使您的地图程序更具交互性和吸引力，从而使您能够专注于使其与众不同的其他功能，而不是重新发明轮子。

虽然您可能认为此过程听起来很复杂，但实际上它比您想象的要简单。例如，您可以使用几行简单的代码在地图图像上创建基本叠加层。叠加允许您在地图上添加自定义图层，例如导航栏和数据可视化图层。这会将图像从静态2D地图转换为可用于许多不同场景的动态交互式程序。这是如何做到的。

技术

首先，您需要选择要用于创建叠加的区域或地点的图像。图片可以是你喜欢的任何地点或地理位置，但必须具有有效的URL。您可以使用必应搜索功能查找要在叠加中使用的公共映像。

接下来，您将转到必应地图V 8交互式SDK，了解如何轻松创建地图视图。iSDK是一个功能强大的Web地图SDK，允许您使用JavaScript、HTML或Typescript开发交互式Bing地图。在这里，您将找到可编辑的代码示例，这些示例可以帮助您使用Bing地图提供的各种功能。

您可以使用左侧面板搜索不同的代码示例。选择示例时，代码编辑器中会弹出相应的代码。然后，您可以调整该代码以适应您正在处理的任何项目。然后，完成编辑后，您可以单击代码编辑器右上角的绿色播放按钮，查看地图的栩栩如生。

如果需要将代码重置回原始示例，可以按播放按钮左侧的按钮，该按钮看起来像形成一个圆圈的两个箭头。或者，如果要下载代码以粘贴到另一个程序中，可以单击中间的复制按钮。

因此，要使用iSDK创建地图叠加，请按照以下简单步骤操作：

在Web上搜索场地地图并找到带有URL的图像。
选择图像，然后单击左键并选择“复制图像地址”。
打开iSDK。
选择接地覆盖。
在地图上找到要放置新图像的区域。
在JavaScript代码编辑器中粘贴显示“imageUrl：”的图像地址。
按播放按钮。

然后，您将看到图像出现在地图上。您可能需要使用地图坐标和图像不透明度，才能使其很好地位于必应地图的顶部。但这就是你在地图上放置一个简单的叠加层所要做的一切。

使用代码

让我们用一个例子来确切地了解这个过程有多简单。微软总部位于西雅图，因此在本例中，我们将使用离家较近的场地——西雅图海鹰队的主场Lumen field。

首先，我们需要使用必应搜索找到体育场的座位图。我们将获取第一个结果之一并复制图像URL。接下来，打开iSDK并选择SimpleGround覆盖。然后，将下面的代码复制并粘贴到文本编辑器中，然后按右上角的绿色播放按钮。

JavaScript：

var map = new Microsoft.Maps.Map(document.getElementById('myMap'), {/* No need to set credentials if already passed in URL */center: new Microsoft.Maps.Location(47.595, -122.3315),
zoom: 17
});var overlay = new Microsoft.Maps.GroundOverlay({
bounds: Microsoft.Maps.LocationRect.fromEdges(47.596356, -122.333221, 47.594003, -122.330027),
imageUrl: 'https://seatingchartview.com/wp-content/uploads/2013/08/CenturyLink-Field-Football-Seating-Chart.gif',
opacity: 0.4
});map.layers.insert(overlay);

如果您正确执行了这些步骤，您应该会看到西雅图弹出窗口的地图，其中包含我们发现的座位表直接位于Lumen Field上方。

叠加可以增加地图的深度和细节，使其更加有用和互动。您可以按照上述步骤将所需的任何图像粘贴到地图上，只需调整代码即可使其适合。

https://www.codeproject.com/Tips/5334018/How-to-Create-an-Overlay-on-a-Bing-Map

如何在必应地图上创建叠加相关推荐

在地图上创建热力图的方法
热力图,是以特殊高亮的形式显示在地理区域的图示.通过颜色变化程度,可以直观反应出热点分布,区域聚集等数据信息.地图中的热力图就是把地图和热力图进行结合,实现在地图中进行热力图的显示. 热力图分析的本质 ...
MapXtreme 2005 学习心得在地图上创建点/线并显示标注(五)
新建示例 1:新建项目新建一个网站,选择MapXtreme 6.7.1 Web Application 在App_Code中,我们新建一个类,起名叫:LayerManager.cs 2:把上节函数放 ...
Bing必应地图中国API - 在地图上画圆
Bing必应地图中国API - 在地图上画圆 2011-05-24 14:49:37| 分类: Bing&Google|字号订阅 <变形金刚2>上映4日国内票房过亿,基本上我只 ...
在Arcgis地图上绘制Echarts热力图(Heatmap)
在Arcgis地图上绘制Echarts热力图(Heatmap) 2018-08-30 10:18 [原创]本文地址:https://www.cnblogs.com/qiaoge0923/p/95623 ...
Bing必应地图中国API-画线与添加多边形
Bing必应地图中国API-画线与添加多边形 2011-05-24 14:31:20| 分类: Bing&Google|字号订阅在必应地图上画线的功能应用也很广泛:显示从出发地到目的地的行 ...
OpenLayers入门，使用OpenLayers叠加多边形、圆形、线段和点要素到地图上
专栏目录: OpenLayers入门教程汇总目录前言本章详细介绍一下如何使用OpenLayers叠加多边形.圆形.线段和点要素到地图上,并设置样式. 要叠加这些元素到地图上,首先要理解OpenLa ...
【MAPBOX基础功能】16、mapbox叠加图片图层到地图上
前言官网指引,生成accesstoken,下载相关依赖请翻阅[https://blog.csdn.net/weixin_44402694/article/details/125414381?spm= ...
android对图片拉线测量,如何在谷歌地图上绘制线条叠加Android
我想在我的地图项目上绘制一条线,但无法绘制线条.我在哪里以及如何声明覆盖图?我尝试了各种方法,但无法让它工作.即代码只是在Eclipse中显示错误.我不想做的是画一条从A到B的路线,而是在我移动时绘制 ...
Mars3D中无人机航拍的数据想叠加到三维地图上，实现的流程和方法
1. 3DTiles介绍 2016年,Cesium 团队借鉴传统2DGIS的地图规范:WMTS,借鉴图形学中的层次细节模型,打造出大规模的三维数据标准:3d-Tiles,中文译名:三维瓦片. 它在模型 ...

如何在必应地图上创建叠加

介绍

背景

技术

使用代码

如何在必应地图上创建叠加相关推荐

最新文章

热门文章