OpenLayers3-5-Bing Maps
来源:互联网 发布:网络信息安全资质 编辑:程序博客网 时间:2024/06/05 19:02
原文地址:http://openlayers.org/en/v3.12.1/examples/bing-maps.html
When the Bing Maps tile service doesn’t have tiles for a given resolution and region it returns “placeholder” tiles indicating that. Zoom the map beyond level 19 to see the “placeholder” tiles. If you want OpenLayers to display stretched tiles in place of “placeholder” tiles beyond zoom level 19 then set maxZoom to 19 in the options passed to ol.source.BingMaps.
Related API documentation: ol.Map,ol.View,ol.layer.Tile,ol.source.BingMaps
翻译:
当Bing地图切片服务没有给定的相关区域的切片的时候,它会返回“placeholder”切片来表示。缩放到19级以上的时候,你就会看到“placeholder”。如果你想OpenLayers在19级以上的时候展现额外的切片地图来替代“placeholder”切片,那么,设置ol.source.BingMaps的maxZoom的属性为19,以便缩放到19级以上的时候跳过Bing地图切片服务。
相关的api文档包括:
ol.Map,ol.View,ol.layer.Tile,ol.source.BingMaps
<!DOCTYPE html><html> <head> <title>Bing Maps</title> <link rel="stylesheet" href="http://openlayers.org/en/v3.12.1/css/ol.css" type="text/css"> <script src="http://openlayers.org/en/v3.12.1/build/ol.js"></script> </head> <body> <div id="map" class="map"></div> <select id="layer-select"> <option value="Aerial">Aerial</option> <option value="AerialWithLabels" selected>Aerial with labels</option> <option value="Road">Road</option> <option value="collinsBart">Collins Bart</option> <option value="ordnanceSurvey">Ordnance Survey</option> </select> <script> //bing 自带的各种样式 var styles = [ 'Road', 'Aerial', 'AerialWithLabels', 'collinsBart', 'ordnanceSurvey' ]; var layers = []; var i, ii; for (i = 0, ii = styles.length; i < ii; ++i) { layers.push(new ol.layer.Tile({ visible: false, preload: Infinity, source: new ol.source.BingMaps({ key: 'Your Bing Maps Key from http://bingmapsportal.com/ here', imagerySet: styles[i] // use maxZoom 19 to see stretched tiles instead of the BingMaps // "no photos at this zoom level" tiles // maxZoom: 19 }) })); } var map = new ol.Map({ layers: layers, // Improve user experience by loading tiles while dragging/zooming. Will make // zooming choppy on mobile or slow devices. loadTilesWhileInteracting: true, target: 'map', view: new ol.View({ center: [-6655.5402445057125, 6709968.258934638], zoom: 13 }) }); var select = document.getElementById('layer-select'); function onChange() { var style = select.value; for (var i = 0, ii = layers.length; i < ii; ++i) { layers[i].setVisible(styles[i] === style); } } select.addEventListener('change', onChange); onChange(); </script> </body></html>
- OpenLayers3-5-Bing Maps
- Bing Maps Tile System
- Bing Maps Tile System
- Bing Maps-----微软
- Bing Maps进阶系列一:初识Bing Maps地图服务
- Bing Maps & Bing Maps Silverlight Control中访问WMS笔记
- Bing Maps进阶系列一:初识Bing Maps地图服务
- Bing Maps 开发随笔一
- Bing Maps Gets Transit Directions
- Windows Phone 7中的Bing Maps
- 【Silverlight】Bing Maps系列文章目录
- 组合云: SQL Azure + Bing Maps
- Draggable Pushpins using Bing Maps Silverlight Control
- 【Silverlight】Bing Maps系列文章目录
- Bing Maps Silverlight Control离线开发
- 【Silverlight】Bing Maps系列文章汇总
- Win8.1应用开发之Bing Maps
- Bing Maps——必应地图
- 在 Visual Studio 中使用正则表达式
- [Windows Store App] Visual State 整理
- ARM与X86 CPU架构对比区别
- Android编程规范与常用技巧
- C#程序值类型与数据库值类型对应关系
- OpenLayers3-5-Bing Maps
- 利用iframe实现ajax跨域请求,抓取网页中ajax数据
- Hbase 布隆过滤器BloomFilter介绍
- 你发现什么了吗
- 初学Shiro 0:Shiro简介
- C#判断文件是复制还是剪切
- centos install php5.6
- [从头学数学] 第47节 总复习
- 应用Docker+Jupyter快速搭建数据科研环境