<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'mark.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<link rel="stylesheet" href="<%=basePath%>/Script/theme/default/style.css" type="text/css">
<link rel="stylesheet" href="<%=basePath%>/Style/style.css" type="text/css">
<script src="<%=basePath%>/Script/lib/OpenLayers.js"></script>
<script type="text/javascript">
var map,layer;
function closePopu(){
this.hide();
}
function init(){
map = new OpenLayers.Map('map');
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://vmap0.tiles.osgeo.org/wms/vmap0", {layers: 'basic'} );
map.addLayer(layer);
var newlayer = new OpenLayers.Layer.Text( "text", { location:"<%=basePath%>Script/textfile.txt"} );
map.addLayer(newlayer);
//marker
var markers = new OpenLayers.Layer.Markers( "Markers" );
map.addLayer(markers);//将markers层添加到地图上
var size = new OpenLayers.Size(21,25);
var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);
var icon = new OpenLayers.Icon('http://www.openlayers.org/dev/img/marker.png',size,offset);
markers.addMarker(new OpenLayers.Marker(new OpenLayers.LonLat(0,0),icon));
//marker
var halfIcon = new OpenLayers.Icon("<%=basePath%>images/50653941400a8.jpg",new OpenLayers.Size(100,100),offset);// the icon for this marker
halfIcon.setOpacity(0.6);
var halflonlat = new OpenLayers.LonLat(0,45);// the position of this marker
var halfMark = new OpenLayers.Marker(halflonlat,halfIcon);
halfMark.events.register('click',halfMark,function(event){
alert(halfMark.icon.size+" "+halfMark.icon.url+" lon:"+halfMark.lonlat.lon+" lat:"+halfMark.lonlat.lat);
OpenLayers.Event.stop(event);
});
markers.addMarker(halfMark);
//marker
marker = new OpenLayers.Marker(new OpenLayers.LonLat(90,10),icon.clone());
marker.setOpacity(0.2);
//marker.events.register('mousedown',new OpenLayers.LonLat(90,10),
//marker.events.register('mousedown',this,
marker.events.register('mousedown',marker,
function(evt) {
//alert(marker.icon.url+" lon:"+marker.lonlat.lon+" lat:"+marker.lonlat.lat);
popup = new OpenLayers.Popup.FramedCloud("chicken",
marker.lonlat,
null,
"<div style='font-size:.8em'>URL: " +marker.icon.url +"</div>",
null, true, closePopu);
OpenLayers.Event.stop(evt);
map.addPopup(popup);
});
markers.addMarker(marker);
//控件
map.addControls([
new OpenLayers.Control.LayerSwitcher(),
new OpenLayers.Control.MousePosition(),
new OpenLayers.Control.PanZoomBar()
]);
map.setCenter(new OpenLayers.LonLat(0,0),0);
map.zoomToMaxExtent();
}
</script>
</head>
<body onload="init();">
<h3>这是我的第二个正式程序，终于自己写了二个程序了，真难，希望自己能渡过这个难关，最近压力很大</h3>
<hr>
<div id="map" class="smallmap"></div>
</body>
</html>
相关推荐
在这个例子中，我们将讨论如何利用OpenLayers将本地图片作为地图背景，并添加marker标记。 首先，为了将本地图片用作背景，我们需要创建一个OpenLayers的图层实例。这通常通过`ol.source.ImageStatic`类来实现。你...
具有Openlayers 6.3的地图标记 使用openlayers地图创建标记，使用弹出窗口创建简单的地图标记。 地图html < head > < link rel =" stylesheet " href =" ...
OpenLayers 是一个强大的开源JavaScript库，用于在Web浏览器中创建交互式地图应用。它支持多种数据源，包括瓦片地图，使得开发者可以轻松地将地理信息集成到网站中。本教程将详细介绍如何使用OpenLayers加载瓦片地图...
在GIS领域，OpenLayers是一个非常流行的开源JavaScript库，用于创建交互式地图应用。它支持多种地图数据源，包括Web Map Service (WMS)，这是一种标准的OGC协议，用于获取地图图像。SuperMap是知名的GIS软件供应商，...
2. **创建地图实例**：在JavaScript文件（如app.js）中，初始化OpenLayers地图实例，设置地图容器、视图和投影。 ```javascript var map = new ol.Map({ target: 'map', view: new ol.View({ center: [116.404, ...
OpenLayers是一款用于绘制地图的开源JavaScript库，主要用于GIS（地理信息系统）项目中。它支持多种矢量和栅格图层，允许用户轻松地将地图嵌入到网页中，并提供丰富的交互功能。 #### 二、开发步骤详解 ##### 第一...
在OpenLayers 3及以上版本中，地图右键功能的实现是一项关键操作，它允许用户与地图交互并执行特定任务，如获取地图上的坐标、测量距离、添加标记等。本篇文章将详细探讨如何在OpenLayers中自定义地图右键菜单，以...
在这个项目里，包含了openlayers官网所没有的示例，包括动画、聚合图层、自定义工具等，详细下载看代码 在 openlayers 官方网站 -- http://openlayers.org/en/latest/examples， 有很多很有用的例子，这里不再重复...
### OpenLayers中的鼠标滚轮事件控制 #### 一、引言 在Web地图应用开发过程中，用户交互体验是至关重要的一个方面。OpenLayers作为一个强大的开源JavaScript库，为开发者提供了丰富的功能来实现各种地图操作，包括...
OpenLayers是一个强大的开源JavaScript库，用于在Web应用中展示和操作地图。 首先，我们需要了解JavaScript在其中的作用。JavaScript是实现动态地图功能的核心，它负责处理用户交互和地图的动态更新。在本案例中，...
OpenLayers 是一个强大的开源JavaScript库，用于在网页中创建交互式地图应用。它支持多种地图数据源，包括WMS、WMTS等服务，以及GeoJSON、KML等矢量格式。在OpenLayers中，"覆盖层"（Layer）是地图上的一个重要概念...
在OpenLayers中调用百度地图是一项常见的需求，特别是在构建Web GIS应用时，用户可能希望结合OpenLayers的强大功能和百度地图的丰富数据。OpenLayers是一个开源JavaScript库，用于创建交互式的地图应用，而百度地图...
OpenLayers 3 是一个强大的开源JavaScript库，用于在网页上创建交互式的地图应用。这个库提供了丰富的功能，包括地图的加载、图层管理、数据可视化、地理空间操作等，广泛应用于地理信息系统（GIS）和地图服务领域。...
- `<script src="http://openlayers.org/api/OpenLayers.js"></script>`：引入OpenLayers库。 - `<script>`：定义了一个名为`start`的函数，用于初始化地图。 - `function start()`：当页面加载完成后执行的函数...
在本示例中，我们将探讨如何在OpenLayers中使用谷歌卫星地图。OpenLayers是一个流行的JavaScript库，用于在网页上创建交互式地图应用。它支持多种地图服务，包括谷歌地图。 首先，我们需要准备以下两个基本元素： ...
在这个文件中，我们将创建OpenLayers地图实例，并添加天地图图层。天地图的图层通常包括WMTS（Web Map Tile Service）服务，我们可以使用`ol.layer.Tile`类来创建这些图层。下面是一个可能的示例代码片段： ```...
在IT行业中，前端开发是构建Web应用程序的关键部分，而OpenLayers是一个流行的JavaScript库，用于创建交互式的、基于Web的地图应用。本实例将详细介绍如何利用OpenLayers加载离线地图，并通过mui将其打包成移动应用...
<script src="https://cdnjs.cloudflare.com/ajax/libs/openlayers/5.3.0/ol.js"></script> </head> <body> <div id="map" class="map"></div> <script src="main.js"></script> </body> </html> ``` 2. **...
OpenLayers 3 是一个强大的开源JavaScript库，用于在Web浏览器中创建交互式的地图应用。它提供了丰富的地图操作、图层管理、数据可视化等功能。在这个"openlayers3画线功能例子"中，我们将深入探讨如何利用...