<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ page isELIgnored ="true" %>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path;
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<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,vector_point,geojson;
function init(){
//创建地图
map = new OpenLayers.Map('map');
var wms = new OpenLayers.Layer.WMS("OpenLayers Basic","http://vmap0.tiles.osgeo.org/wms/vmap0?",
{
layers:"basic"
},
{
numZoomLevels: 5//设置缩控制器级别，默认是18【不设置情况下】
});
//1.这里定义的jsons应该是通过ajax从后台获取的
var jsons = {
"type" : "FeatureCollection",
"features" : [ {
"type" : "Feature",
"properties" : {
"image" : "<%=basePath%>/Script/img/marker.png"
},
"geometry" : {
"type" : "Point",
"coordinates" : [ 124.70169067383, 43.859191897451 ]
}
}, {
"type" : "Feature",
"properties" : {
"image" : "<%=basePath%>/Script/img/marker-blue.png"
},
"geometry" : {
"type" : "Point",
"coordinates" : [ 125.37673830988, 43.858870032345 ]
}
} ]
};
//新增部分，将对vector_point这个图层定义一个样式，不使用默认样式
var styleMap = new OpenLayers.StyleMap({
"default": new OpenLayers.Style({
fillOpacity: 1,
strokeOpacity:1,
strokeColor: "#000000",
graphicWidth:30,
graphicHeight:50,
externalGraphic: "${image}",
label:'pic',//图标标签
labelXOffset:4,
labelYOffset:24
}),
"select": new OpenLayers.Style({
fillOpacity: 0.6,
strokeOpacity:0.8,
strokeColor: "#000000",
graphicWidth:30,
graphicHeight:50,
externalGraphic: "${image}"
})
});
/*var styleMap = new OpenLayers.StyleMap({
"default": {
fillOpacity: 1,
strokeOpacity:1,
strokeColor: "#000000",
graphicWidth:30,
graphicHeight:50,
externalGraphic: "${image}"
},
"select":{
fillOpacity: 0.6,
strokeOpacity:0.8,
strokeColor: "#000000",
graphicWidth:30,
graphicHeight:50,
externalGraphic: "${image}"
}
});*/
vector_point = new OpenLayers.Layer.Vector("Simple Geometry", {
styleMap : styleMap,
rendererOptions : {
zIndexing : true,
}
});
//创建一个点图层,用来展现我们从后台获取的点信息
//屏蔽这句话vector_point = new OpenLayers.Layer.Vector();
//将地图图层和点图层加载到Map
map.addLayers([ wms, vector_point ]);
//创建GeoJSON类对象,用于解析JSON串
geojson = new OpenLayers.Format.GeoJSON();
vector_point.addFeatures(geojson.read(jsons));//read返回OpenLayers.Feature.Vector
map.addControl(new OpenLayers.Control.PanZoomBar());
map.addControl(new OpenLayers.Control.LayerSwitcher());
map.setCenter(new OpenLayers.LonLat(125.30593872070312,43.87017822557581),3);
}
</script>
</head>
<body onload="init();">
<div>
<div id="map" class="smallmap"></div>
</div>
</body>
</html>
相关推荐
在这个例子中，我们将讨论如何利用OpenLayers将本地图片作为地图背景，并添加marker标记。 首先，为了将本地图片用作背景，我们需要创建一个OpenLayers的图层实例。这通常通过`ol.source.ImageStatic`类来实现。你...
本教程将详细介绍如何使用OpenLayers加载静态图片地图，并探讨其流畅操作、可控显示范围和等级设置。 首先，为了加载静态图片，我们需要准备好图片资源。这些图片通常是一系列按照特定比例尺分块的图像，每一块对应...
OpenLayers的例子通常包括基本地图加载、图层管理、标记添加、弹窗显示等，可以通过官方文档找到许多示例代码进行学习。 关于TileCache函数，如getTilesUrl()，用于返回对应坐标范围的瓦片URL，是TileCache服务的...
在OpenLayers 3（简称OL3）中加载瓦片图片是一项常见的地图操作，这使得开发者能够在Web应用中集成丰富的地理信息。OpenLayers 是一个开源JavaScript库，专门用于创建交互式的地图，支持多种数据源，包括瓦片地图...
在这个系统中，太乐地图的离线数据被整合到OpenLayers 3中，通过本地存储的地理信息数据来实现地图的离线显示。这需要对地图瓦片的组织结构有深入理解，通常地图瓦片会被按照特定的坐标系和分辨率划分，以便在需要时...
这个示例将展示如何在OpenLayers中实现地图遮罩功能，以便在地图上显示半透明覆盖层，从而突出显示特定区域或进行其他视觉效果。 首先，确保你已经安装了Node.js环境，因为我们将使用npm（Node包管理器）来管理项目...
这个示例专注于使用OpenLayers 3调用离线谷歌切片地图，这是一个非常实用的功能，特别是对于那些无法连接到互联网或者希望在本地环境中运行地图应用的用户。 首先，我们需要了解OpenLayers 3的基本概念。OpenLayers...
OpenLayers支持多种图层类型，如`ol.layer.Tile`（瓦片图层）、`ol.layer.Image`（单张图片图层）和`ol.layer.Vector`（矢量图层）。每个图层都有自己的配置参数，如来源、透明度、可见性等。 3. **视图（View）**...
OpenLayers是一个开源的JavaScript库，用于在Web浏览器中显示地图，创建交互式地图应用程序。在2016年，OpenLayers版本3（OL3）成为了最新版，与前一个版本相比，它进行了重大的重设计和功能更新，以满足现代Web地图...
3. 遥感数据优化：在处理遥感图像或卫星数据时，可以使用瓦片预处理技术，将大图切割成小块的图片，然后使用OpenLayers的TileImage图层来加载和显示。这样可以减少内存占用，提高页面响应速度。 4. 几何对象简化：...
一种方法是通过重新配置本地的hosts文件来绕过限制。另一种方法是从国内的镜像网站下载，例如CSDN。如果在积分不够的情况下，也可以使用网盘资源。开发方式支持多种选择，包括但不限于HTML页面方式、Java EE方式、**...
它允许开发者在网页上显示地图、叠加层，并与地图数据进行交互，支持多种数据源和地图服务，包括WMS、WMTS、TMS等。这个压缩包"WebGIS之OpenLayers全面解析源码.rar"包含了一本关于OpenLayers的详细解析书籍，作者为...
这样，地图组件就会显示指定的本地图片。 Vue组件的完整代码示例如下： ```html <div id="map" class="map"></div> import "ol/ol.css"; import ImageLayer from "ol/layer/Image"; import Map from "ol/...
在数据加载方面，OpenLayers支持多源数据，包括在线瓦片地图、本地瓦片地图、矢量数据、WMS服务等。例如，XYZ源可以用来加载基于XYZ坐标的瓦片地图，WMS服务则允许获取服务器上的地图图片。此外，OpenLayers还可以...
当用户请求某一区域的地图时，GeoWebCache会根据请求的经纬度和缩放级别返回相应的瓦片图片，从而快速展示地图内容。 在JavaScript环境中，我们通常使用OpenLayers、Leaflet等库来处理地图操作。要实现离线加载...
通过使用OpenLayers，我们可以将预先下载的地图瓦片存储在本地，然后在需要时加载这些本地瓦片，从而实现离线访问地图。 OpenLayers提供了一套完整的API，用于加载和操作地图，包括添加图层、设置投影、处理地理...
它使服务器端的地理信息系统（GIS）能够向客户端发送地图图片，这些图片是根据用户指定的地理位置、比例尺和其他参数动态生成的。 OpenLayers是一个开源的JavaScript库，专门设计用于创建交互式的Web地图应用。这个...
1. WMS服务：OpenLayers可以与提供WMS服务的地理信息系统服务器进行交互，获取地图图片。 2. WFS服务：用于获取和编辑地理空间矢量数据，可以与GIS数据库进行交互。 3. GeoJSON：OpenLayers支持GeoJSON格式的数据，...
3. **客户端渲染**：在浏览器端，我们通常使用JavaScript库，如Leaflet或OpenLayers，来处理瓦片的加载和展示。这些库可以处理地图的平移、缩放以及瓦片的异步加载。 4. **图层管理**：在现有瓦片地图基础上增加...