popup.autoSize = true;设置popup大小总不对,没找到原因,
解决办法:
将背景色设为透明:popup.setBackgroundColor("transparent");
使用天地图不知道为什么空白区域会出现没有图片的红叉?
暂时解决办法:
注释掉OpenLayers-2.12/OpenLayers.js里 this.onImageLoad()
红叉可以去掉了,不过底图空白区域还是会有白色,待完善
天地图:
var map;
var markers;
var option = {
controls: [new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanZoomBar()
],
numZoomLevels: 19
};
map = new OpenLayers.Map('map', option);
map.addControl(new OpenLayers.Control.LayerSwitcher());
var tdt1 = new OpenLayers.Layer.WMTS({
name: "中国底图(矢量)",
url: "http://t0.tianditu.com/vec_c/wmts", //中国底图
layer: "vec",
style: "default",
matrixSet: "c",
format: "tiles",
isBaseLayer: true
});
var tdt2 = new OpenLayers.Layer.WMTS({
name: "中国底图注记",
url: "http://t0.tianditu.com/cva_c/wmts", //中国底图注记
layer: "cva",
style: "default",
matrixSet: "c",
format: "tiles",
isBaseLayer: false
});
map.addLayers([tdt1, tdt2]);
map.setCenter(new OpenLayers.LonLat(115.86, 34.4), 12);
map.addControl(new OpenLayers.Control.MousePosition());
- 大小: 4 KB
分享到:
相关推荐
本话题聚焦于如何在OpenLayers中扩展功能,添加天地图作为背景地图组件。天地图是由中国国家测绘局提供的官方地理信息服务平台,提供了丰富的地理数据资源。 首先,了解OpenLayers的基本概念是必要的。OpenLayers是...
注意,你需要替换`url`中的服务地址为实际的天地图影像服务URL,并根据天地图的文档配置`resolutions`和`matrixIds`。 4. **可选:自定义交互和样式**:你可以根据需求添加更多的交互功能,比如缩放控件、定位控件...
本示例将详细讲解如何使用OpenLayers来加载并操作天地图。 首先,我们需要理解OpenLayers的基本结构。一个OpenLayers地图应用通常由以下几个主要部分组成:地图容器、投影、图层和控制。地图容器是地图显示的地方,...
在本文中,我们将探讨如何利用OpenLayers库来调用天地图的在线服务数据。天地图是由国家测绘局推出的中国地理信息公共服务平台,提供丰富的地图、地形等基础地理信息服务。其公开的服务接口允许开发者无需授权即可...
在这个例子中,我们将讨论如何利用OpenLayers将本地图片作为地图背景,并添加marker标记。 首先,为了将本地图片用作背景,我们需要创建一个OpenLayers的图层实例。这通常通过`ol.source.ImageStatic`类来实现。你...
在"openlayers5加载天地图.zip"这个压缩包中,我们可以期待找到一个示例项目,展示了如何利用OpenLayers 5来加载和展示天地图的数据。天地图是中国的一个官方基础地理信息服务平台,提供了丰富的地图服务,包括地形...
本教程将详细介绍如何使用OpenLayers加载在线天地图。 一、OpenLayers基础知识 OpenLayers 提供了一套完整的API,用于构建动态地图应用程序。它支持多种地图操作,如缩放、平移、图层控制等。同时,OpenLayers 支持...
本教程将详细介绍如何使用OpenLayers加载静态图片地图,并探讨其流畅操作、可控显示范围和等级设置。 首先,为了加载静态图片,我们需要准备好图片资源。这些图片通常是一系列按照特定比例尺分块的图像,每一块对应...
在OpenLayers中调用百度地图是一项常见的需求,特别是在构建Web GIS应用时,用户可能希望结合OpenLayers的强大功能和百度地图的丰富数据。OpenLayers是一个开源JavaScript库,用于创建交互式的地图应用,而百度地图...
在IT行业中,前端开发是构建Web应用程序的关键部分,而OpenLayers是一个流行的JavaScript库,用于创建交互式的、基于Web的地图应用。本实例将详细介绍如何利用OpenLayers加载离线地图,并通过mui将其打包成移动应用...
通过这个DEMO,开发者可以学习到如何使用OpenLayers来创建和展示离线地图,这对于在没有网络连接或者网络不稳定的情况下仍然需要地图服务的场景非常有用。同时,这也是对OpenLayers API的一个基础实践,为进一步开发...
在OpenLayers 3及以上版本中,地图右键功能的实现是一项关键操作,它允许用户与地图交互并执行特定任务,如获取地图上的坐标、测量距离、添加标记等。本篇文章将详细探讨如何在OpenLayers中自定义地图右键菜单,以...
OpenLayers 是一个强大的开源JavaScript库,用于在Web浏览器中创建交互式地图应用。它支持多种数据源,包括瓦片地图,使得开发者可以轻松地将地理信息集成到网站中。本教程将详细介绍如何使用OpenLayers加载瓦片地图...
这个示例将展示如何在OpenLayers中实现地图遮罩功能,以便在地图上显示半透明覆盖层,从而突出显示特定区域或进行其他视觉效果。 首先,确保你已经安装了Node.js环境,因为我们将使用npm(Node包管理器)来管理项目...
在WebGIS开发中,OpenLayers 3 是一个强大的开源JavaScript库,用于在网页上创建交互式的地图应用。这个库提供了丰富的功能,使开发者能够轻松地整合多种地图服务,包括百度地图、天地图、高德地图以及Google地图。...
这个DEMO中包含的部分地区街道地图瓦片数据,就是按照OpenLayers可识别的格式预先存储好的,可以在没有网络的情况下展示地图。 总结来说,这个"openlayers发布离线地图DEMO"展示了如何使用OpenLayers库加载本地存储...
这需要对地图瓦片的组织结构有深入理解,通常地图瓦片会被按照特定的坐标系和分辨率划分,以便在需要时快速加载和显示。 为了实现这一功能,开发者可能采用了以下技术: 1. **瓦片管理**:使用OpenLayers 3的...
在这个例子中,我们可能会看到如何使用OpenLayers加载一个来自GeoServer的地图服务,展示在网页上。通过`ol.Map`对象,我们可以设置地图的基本属性,如中心点、比例尺等。`ol.View`用来控制地图的视图,而`ol.layer....
3. **加载百度地图图层**:在OpenLayers 5中创建一个TileLayer实例,并设置其URL为百度地图的瓦片服务地址。这通常是带有缩放级别、经度和纬度参数的动态URL。 4. **视图设置**:设置地图的初始视图,包括中心位置...
OpenLayers 3 地图框选 Draw 画多边形 Polygon 获取坐标