1.不能够正常添加标记到地图上,当使用GOOGLE地图时
原因: 添加标记的时候需要加上中扩号-> map.addLayers([markers]);
var lon = 107.5781;
var lat = 36.8796;
var zoom = 2;
var map, layer,gmap,markers;
var objMouse;
var options = {
projection: new OpenLayers.Projection("EPSG:900913"),
displayProjection: new OpenLayers.Projection("EPSG:4326"),
units: "m",
maxResolution: 156543.0339,
numZoomLevels: 10,
maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34,
20037508.34, 20037508.34)
};
map = new OpenLayers.Map('map',options);
createPopup();
function createPopup()
{
markers = new OpenLayers.Layer.Markers( "Markers" );
markers.addMarker(GetMark(lon,lat));
markers.events.register('click', markers, function(){
popup = new OpenLayers.Popup("chicken",
new OpenLayers.LonLat(lon,lat),
new OpenLayers.Size(20,20),
"haha!!!",
true);
popup.autoSize=true;
map.addPopup(popup);
});
map.addLayers([markers]);
map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
}
function GetMark(lo,lat)
{
var size = new OpenLayers.Size(70,30);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('http://www.k1982.com/png/up/200905/20090513082309637.png',size,offset);
return new OpenLayers.Marker(new OpenLayers.LonLat(lon,lat),icon)
}
2.用Google的地图,添加标记时候用的经纬不能准确定位标记
像素值与实际经纬度值的互转
map.events.register('click',gmap,function(ev){
var lonLat=map.getLonLatFromPixel(ev.xy);
if (map.displayProjection) {
//将像素值转换成经纬度
lonLat.transform(map.getProjectionObject(),map.displayProjection );
//将经纬度转换成像素值
lonLat.transform(map.displayProjection,map.getProjectionObject());
}
3.用经纬度来为地图添加标记
var laolat_v=new OpenLayers.LonLat(lo,la);
if (map.displayProjection) {
laolat_v.transform(map.displayProjection,map.getProjectionObject());
}
markers = new OpenLayers.Layer.Markers( "Markers" );
markers.addMarker(GetMark(laolat_v));
markers.events.register('click', markers, function(){
popup = new OpenLayers.Popup("chicken",
laolat_v,
new OpenLayers.Size(20,20),
"haha!!!",
true);
popup.autoSize=true;
map.addPopup(popup);
});
map.addLayers([markers]);
}
function GetMark(laolat_v)
{
var size = new OpenLayers.Size(70,30);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('http://www.k1982.com/png/up/200905/20090513082309637.png',size,offset);
var mk=new OpenLayers.Marker(laolat_v,icon)
//mk.visible=false;
return mk;
}
4、以对图片载入错误时图片框的颜色和图片框中默认的图片进行自定义
由OpenLayers.Util类控制,具体修改openlayers/theme/default/style.css 中
.olImageLoadError {
background-color: pink;
opacity: 0.5;
filter: alpha(opacity=0); /* IE */
}
相关推荐
在这个主题中,我们将深入探讨如何利用OpenLayers加载本地切片,并实现高亮显示。 首先,我们需要理解什么是地图切片。地图切片是一种将大尺寸地图分割成多个小块(通常为正方形)的方法,便于更高效地在网络上传输...
这个示例专注于使用OpenLayers 3调用离线谷歌切片地图,这是一个非常实用的功能,特别是对于那些无法连接到互联网或者希望在本地环境中运行地图应用的用户。 首先,我们需要了解OpenLayers 3的基本概念。OpenLayers...
本主题将聚焦于如何使用OpenLayers加载本地切片,这是一种将地图数据分割成小块,以便更高效地在网络上传输和显示的技术。 首先,我们需要理解什么是地图切片。地图切片是将大型地图图像分割成多个小图像块(通常为...
GeoWebCache(GWC)是一种基于开源地理信息系统(GIS)软件GeoServer的缓存服务,它能够预先生成地图切片并存储在本地或分布式存储系统中,以提高地图的加载速度和性能。在JavaScript开发中,特别是在WebGIS应用中,...
本文将深入探讨如何使用OpenLayers 4.2加载百度地图和高德地图。 首先,让我们了解一下百度地图API。百度地图是中国领先的在线地图服务提供商,提供了一系列API供开发者使用。在OpenLayers 4.2中集成百度地图,你...
然而,由于浏览器的同源策略限制,当你尝试从不同的域加载地图或者地理数据时,可能会遇到跨域访问的问题。下面将详细介绍如何解决OpenLayers中的跨域问题。 ### 一、理解同源策略 同源策略是Web浏览器的一项安全...
TileCache配合OpenLayers可以提供高效的瓦片加载,通过预渲染地图切片以减少地图加载时间。设置 TileCache 需要配置文件,包括地图源信息和切片存储路径。 在OpenLayers中进行精确测距,可以使用测量工具...
实现离线地图通常涉及到缓存地图切片或预加载特定区域的地图数据到本地存储。 在实际项目中,开发人员可能会遇到以下关键知识点: 1. **Vue3组件化开发**:学习如何创建和复用Vue3组件,如地图组件、图层选择组件...
17. **地图切片(Tile Caching)**:对于大型地图数据,可以使用切片缓存提高加载速度,OpenLayers支持本地或远程的切片存储。 18. **自定义图例(Legend)**:开发者可以通过编写自定义代码,根据图层的样式生成相应的...
对于大规模的地图数据,OpenLayers 使用了瓦片加载机制,根据视口的大小和位置动态加载对应的地图切片,这样可以提高地图的加载速度和性能。 6. **几何对象与样式** OpenLayers 支持创建和操作几何对象(如点、线...
3. **数据加载与展示**:研究如何加载不同格式的地理数据,例如通过WMS服务获取地图切片,或者直接使用GeoJSON、KML等格式的本地数据。理解如何使用Feature和Source对象来管理矢量数据。 4. **投影转换**:...
3. **切片缓存**: Geoserver支持WMS-T(Tile Service),OpenLayers可以利用此功能实现地图切片缓存,提高地图加载速度。 4. **样式编辑**: 在Geoserver的Web界面中,可以使用SLD(Styled Layer Descriptor)定义...
9. **地图服务**:OpenLayers支持WMS、WMTS等地图服务,可以从远程服务器获取地图切片或单个地图图块。 10. **GeoJSON支持**:可以加载和显示GeoJSON格式的数据,这是一种常见的地理空间数据交换格式。 11. **动态...
2. **瓦片切片服务**:通过WMS或WMTS服务获取地图瓦片,或者使用本地切片文件创建图层。 3. **叠加图层**:可以在同一地图上叠加多个图层,例如基础地图图层、地形图层、气象图层等,实现多源数据的融合分析。 4. ...
3. **瓦片切片管理**: 对于大型地图数据,OpenLayers支持分块加载,提高性能。 4. **地图服务集成**: 可以集成WMS、WFS等地图服务,获取并操作地理信息。 五、实战项目 1. **基本地图展示**: 创建一个简单的地图...
在数据加载方面,OpenLayers支持多源数据,包括在线瓦片地图、本地瓦片地图、矢量数据、WMS服务等。例如,XYZ源可以用来加载基于XYZ坐标的瓦片地图,WMS服务则允许获取服务器上的地图图片。此外,OpenLayers还可以...
在离线地图场景中,可以预先下载地图切片并本地存储。OpenLayers配合第三方库如OpenLayers.Layer.TMS或proj4js可以实现离线地图的加载。你需要确保地图数据的分块、投影、分辨率与在线服务一致。 7. **GeoJSON数据...
5. 集成到Web应用:在Web页面中,通过JavaScript库(如Leaflet或OpenLayers)引用这些瓦片,并配置地图加载参数,使用户能在浏览器中查看和操作地图。 在实际应用中,自定义瓦片图切片工具还有许多扩展功能,比如...
总的来说,离线BD瓦片地图加载涉及地图切片、Web开发技术、地理空间数据处理等多个方面,通过合理的设计和实现,可以提供无缝、高效的离线地图浏览体验。这个示例提供了一个基础的框架,开发者可以根据自己的需求...
在Web应用中,通过使用像Leaflet或OpenLayers这样的开源地图库,可以方便地配置TMS图层,加载地图切片。 6. 自定义本地地图: 对于某些特殊需求,开发者可能需要加载自定义的本地地图数据,这通常涉及地图瓦片的...