关于OpenLayers加载本地切片的问题

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 */
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: OpenLayers是一个用于显示地理信息的开源JavaScript库。要加载本地路径地图,首先需要将地图文件保存在本地计算机上。然后,可以通过以下步骤使用OpenLayers加载本地路径地图: 1. 在HTML文件中引入OpenLayers的JavaScript库。可以通过在网页的<head>标签内添加以下代码实现: ```html <script src="https://openlayers.org/en/v6.5.0/build/ol.js"></script> ``` 2. 在代码中创建一个用于显示地图的<div>元素。例如: ```html <div id="map" style="width: 800px; height: 600px;"></div> ``` 3. 在JavaScript代码中编写加载本地路径地图的步骤。首先,创建一个地图实例,并指定要显示地图的目标元素。然后,创建用于显示地图的图层,例如OpenStreetMap图层。最后,将图层添加到地图实例中。以下是一个简单的示例: ```javascript var map = new ol.Map({ target: 'map', layers: [ new ol.layer.Tile({ source: new ol.source.OSM() }) ], view: new ol.View({ center: ol.proj.fromLonLat([0, 0]), zoom: 2 }) }); ``` 4. 运行代码,打开包含HTML文件的浏览器页面。现在,应该能够加载并显示本地路径地图了。 注意:加载本地路径地图可能需要一些额外的步骤,例如配置本地web服务器或处理文件路径。此外,OpenLayers还提供了许多其他功能和选项,可以根据需求进行配置和定制。 ### 回答2: OpenLayers是一个用于在网页上展示地图的开源JavaScript库,它支持加载本地路径地图。要加载本地路径地图,首先需要将地图切片存储在本地的文件系统中。切片是将整个地图区域分成一系列小块的图像,以提高地图显示效 ### 回答3: OpenLayers 是一个开源的地图库,可以用于加载和显示各种地图数据。要加载本地路径地图,需要按照以下步骤进行操作: 1. 准备地图数据:首先,将本地的地图数据准备好。这可以是一个图像文件(如JPEG、PNG等),也可以是一个矢量文件(如GeoJSON、KML等)。 2. 创建地图容器:在 HTML 页面中,创建一个用于显示地图的容器元素,例如一个 `<div>`元素,并为其指定一个唯一的ID。 3. 加载地图数据:使用 OpenLayers 的 `ol.source.Image` 或 `ol.source.Vector`类,根据地图数据的类型,创建一个相应的数据源。例如,如果是图像文件,可以使用 `ol.source.ImageStatic` 类,并指定图像文件的路径。如果是矢量文件,可以使用 `ol.source.Vector` 类,并使用 `ol.format` 类来解析和加载矢量数据。 4. 创建地图图层:使用 `ol.layer.Image` 或 `ol.layer.Vector` 类,创建一个相应的图层,并将数据源与图层关联起来。 5. 创建地图对象:使用 `ol.Map` 类,创建一个地图对象。将之前创建的地图容器元素和图层添加到地图对象中。 6. 显示地图:将地图对象绑定到地图容器元素上,使用 `map.setTarget(containerID)` 方法。 经过以上步骤,就可以加载本地路径地图并在网页上显示了。可以根据需要,设置地图的初始视图、缩放级别、交互功能等,以实现更多的地图交互操作。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值