`

OpenLeyers矢量图层及矢量元素整合操作

阅读更多
<%@ page language="java" contentType="text/html; charset=UTF-8"
    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" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>在web地图上创建矢量图层,并在矢量图层上绘制元素</title>
<style type="text/css">
.smallmap{
height: 300px;
width: 600px;
border: 1px solid gray;
}
#positionid{
width: 600px;
text-align: right;
}
</style>
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script src="<%=basePath%>/Script/lib/OpenLayers.js"></script>
<script type="text/javascript">
var map;
var divId='map';
var drawControls = {};
function initMap(){
map = new OpenLayers.Map(divId,{
numZoomLevels:8
});
styleMap = new OpenLayers.StyleMap({
'default': {
            strokeOpacity:1, 
            strokeColor: "#000000", 
            graphicWidth:30, 
            graphicHeight:50, 
            externalGraphic:"<%=basePath%>/Script/img/marker.png"
    },
    'select': {
            strokeColor: "#0000ff", 
            graphicWidth:30, 
            graphicHeight:50, 
            externalGraphic:"<%=basePath%>/Script/img/marker.png"
    }
});
var veclayer = new OpenLayers.Layer.Vector('vector layer',{
styleMap:styleMap,
rendererOptions: {zIndexing: true} 
});
veclayer.addFeatures(new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(0,30)));
var googlelayer = new OpenLayers.Layer.Google("Google Streets",{
layers:"basic"
});
var drawlayer = new OpenLayers.Layer.Vector('draw layer');
map.addLayers([googlelayer,veclayer,drawlayer]);

drawControls = {  
point: new OpenLayers.Control.DrawFeature(drawlayer,OpenLayers.Handler.Point),
line: new OpenLayers.Control.DrawFeature(drawlayer, OpenLayers.Handler.Path),
polygon: new OpenLayers.Control.DrawFeature(drawlayer, OpenLayers.Handler.Polygon),
select: new OpenLayers.Control.SelectFeature( drawlayer,{
clickout: false,
toggle: false,       
multiple: false,
hover: false,
        toggleKey: "ctrlKey", // ctrl key removes from selection      
        multipleKey: "shiftKey", // shift key adds to selection      
        box: true
     }),
    selecthover: new OpenLayers.Control.SelectFeature(drawlayer,{
        multiple: false,
        hover: true,
toggleKey: "ctrlKey", // ctrl key removes from selection       
multipleKey: "shiftKey" // shift key adds to selection      
})
};

for(var key in drawControls) {
map.addControl(drawControls[key]);
}

var dgControl =new OpenLayers.Control.DragFeature(drawlayer);//矢量要素拖动,参数为矢量图层名称,上边已经存在
map.addControl(dgControl);
dgControl.activate();


map.addControls([
new OpenLayers.Control.MousePosition({
'element':document.getElementById('positionid'),
'prefix':'经度: ',
'separator':',纬度: '
}),
new OpenLayers.Control.PanZoomBar(),
new OpenLayers.Control.LayerSwitcher()
]);
map.setCenter(new OpenLayers.LonLat(0,0),3);
map.zoomToMaxExtent();
}

function  toggleControl(element){
for(var key in  drawControls){
var control =  drawControls[key];
if(element.value == key && element.checked){
control.activate();
}else{
control.deactivate();
}
}
}

//feature:OpenLayers.Feature.Vector类型的对象
function getGeometryPoints(feature){
var geometry = feature.geometry;
var lonlat = geometry.getVertices();
alert(lonlat);
}
</script>
</head>
<body onload="initMap();">
       <div id="map" class="smallmap"></div>
       <div id="positionid"></div>
       <label>导航</label><input type="radio" name="type" value="none" onclick="toggleControl(this)" checked="checked">
       <label>点</label><input type="radio" name="type" value="point" onclick="toggleControl(this)">
       <label>线</label><input type="radio" name="type" value="line" onclick="toggleControl(this);">
       <label>多边形</label><input type="radio" name="type" value="polygon" onclick="toggleControl(this);">
       <label>select</label><input type="radio" name="type" value="select" onclick="toggleControl(this);">
       <label>selecthover</label><input type="radio" name="type" value="selecthover" onclick="toggleControl(this);">
</body>
</html>
分享到:
评论

相关推荐

    陕西省省界GIS矢量图层shp

    "GIS矢量图层"是指数据以矢量形式存储,矢量数据通常包含点、线、面等几何元素,这种数据结构能够精确表示地物的位置和形状。".shp"文件是Esri公司开发的GIS数据格式,用于存储地理空间特征,是GIS领域中常见的矢量...

    openlayers 矢量图层注记

    openlayers 中利用矢量图层添加注记的示例。

    四川省省界GIS矢量图层shp

    四川省省界GIS矢量图层shp

    最新2022年山西省道路矢量图层shp格式数据下载

    本文将详细解析标题“最新2022年山西省道路矢量图层shp格式数据下载”及相关的描述中所涉及的GIS(地理信息系统)技术、道路矢量图层以及shp文件格式等知识点。 首先,我们需要理解GIS的核心概念。GIS是一种用于...

    最新2022年江西省道路矢量图层shp格式数据下载

    在GIS软件中,用户可以加载这个江西省道路矢量图层,进行以下操作: - 可视化:查看江西省道路的分布,通过颜色、线宽等视觉元素表示不同道路的属性。 - 查询分析:根据需要筛选特定类型的道路,如高速公路或乡村...

    最新2022年甘肃省水系矢量图层shp格式数据下载

    在本案例中,甘肃省的水系被转化为矢量图层,意味着可以进行复杂的空间查询、分析和可视化操作,例如查找特定流域、计算河流长度、分析水系网络结构等。 接下来,我们关注shp文件格式。shp是ESRI(Environmental ...

    最新2022年福建省水系矢量图层shp格式数据下载

    总的来说,"最新2022年福建省水系矢量图层shp格式数据下载"提供的信息资源是GIS领域的宝贵资料,不仅可用于学术研究,还能服务于政府决策、企业规划及公众信息查询。用户可以通过专业的GIS软件(如ArcGIS、QGIS等)...

    最新2022年湖北省道路矢量图层shp格式数据下载

    本文将详细讲解与"最新2022年湖北省道路矢量图层shp格式数据下载"相关的GIS(地理信息系统)知识,重点涉及道路矢量数据、shp文件格式以及坐标系等内容。 首先,GIS是一种用于收集、存储、管理、分析和展示地理空间...

    基于Vue+cesium开发的3d场景切换及矢量图层项目源码.zip

    【资源说明】基于Vue+cesium开发的3d场景切换及矢量图层项目源码.zip基于Vue+cesium开发的3d场景切换及矢量图层项目源码.zip基于Vue+cesium开发的3d场景切换及矢量图层项目源码.zip基于Vue+cesium开发的3d场景切换及...

    最新2022年宁夏回族自治区道路矢量图层shp格式数据下载

    本文将详细讲解与“最新2022年宁夏回族自治区道路矢量图层shp格式数据下载”相关的IT知识,主要涉及GIS(地理信息系统)、道路数据、矢量图层和shp文件格式等概念。 GIS(地理信息系统)是集成硬件、软件和地理数据...

    最新2022年山东省道路矢量图层shp格式数据下载

    在处理山东省道路矢量图层时,可以进行如下操作: 1. **数据加载**:使用GIS软件打开.shp文件,将道路图层加载到工作空间,查看山东省的道路网络分布。 2. **属性查询**:通过.dbf文件,可以对道路属性进行筛选、...

    最新2022年四川省道路矢量图层shp格式数据下载

    标题中的“最新2022年四川省道路矢量图层shp格式数据下载”表明了这是一个关于地理信息系统(GIS)的数据资源,具体是2022年更新的四川省内道路的矢量数据。矢量图层是GIS中的一种重要数据类型,它由一系列几何对象...

    制作中国地图的矢量图层

    在GIS(地理信息系统)领域,制作中国地图的矢量图层是一项常见的任务,它涉及到对地理数据的处理和可视化。本教程将详细讲解如何利用ArcGIS软件来创建包含中国边界、省会、九段线、南海诸岛以及河流等要素的矢量...

    最新深圳地铁线路shp矢量图层数据下载

    最新2022年深圳地铁线路shp矢量图层数据下载

    最新2022年北京市道路矢量图层shp格式数据下载

    本文将详细讲解与"最新2022年北京市道路矢量图层shp格式数据下载"相关的GIS(地理信息系统)知识,重点涉及道路矢量图、shp文件格式以及其重要性。 首先,GIS是一种集成计算机硬件、软件及地理数据的系统,用于获取...

    最新2022年江苏省道路矢量图层shp格式数据下载

    本文将详细讲解与"最新2022年江苏省道路矢量图层shp格式数据下载"相关的GIS(地理信息系统)知识,重点介绍矢量数据、道路图层、wgs84坐标系以及shp文件格式。 一、GIS基础知识 GIS是一种用于处理、分析和展示地理...

    最新2022年湖南省道路矢量图层shp格式数据下载

    本文将详细讲解与“最新2022年湖南省道路矢量图层shp格式数据下载”相关的知识,包括GIS(地理信息系统)、道路矢量图层、shp文件格式以及坐标系等方面的内容。 首先,GIS是一种集成空间数据和非空间数据的技术,...

    矢量图层追加、栅格化、导出为图片

    ### 矢量图层追加、栅格化与导出为图片 #### 矢量图层追加概述 在GIS(地理信息系统)领域,处理空间数据时,经常需要将多个矢量图层合并成一个单一的图层以便于进一步分析或可视化。在ArcGIS软件中,通常可以通过...

    最新2022年河南省道路矢量图层shp格式数据下载

    本文将详细讲解与"最新2022年河南省道路矢量图层shp格式数据下载"相关的GIS(地理信息系统)知识,以及其中涉及到的关键概念。 首先,我们要了解什么是GIS。GIS是一种集成硬件、软件和地理数据的系统,用于捕捉、...

    中国流域分割矢量图层

    【中国流域分割矢量图层】是一个专门为地理和地质科学研究设计的数据集,包含了全国15大流域的矢量边界信息。这些数据具有高精度和详细性,能够为研究者提供全面的流域范围界定,便于进行水文分析、环境影响评估、...

Global site tag (gtag.js) - Google Analytics