老糊涂
- 浏览: 178209 次
- 性别:
- 来自: 西安
-
文章分类
- 全部博客 (163)
- POI (8)
- Collection容器 (1)
- java.util (2)
- java调用批处理 (1)
- xml (1)
- jfreechart (3)
- SVN (1)
- tomcat中文 (1)
- jquery (6)
- Log4j (1)
- ppt (1)
- js (48)
- ss (1)
- 综合 (1)
- Spring (2)
- 数据库 (6)
- tomcat (1)
- commons-lang包使用 (1)
- AJAX【Jquery】 (3)
- RMI (2)
- OpenLayers (25)
- html (20)
- css (25)
- Google地图 (2)
- java (1)
- Ibatis (1)
- GoogleMaps (1)
- J2EE (2)
- 软件设计 (1)
- 服务器 (1)
- html5 (4)
- cursor (1)
- AngularJs (5)
- 缓存 (1)
- 构建 (2)
- 域名、空间、服务器 (1)
<%@ 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>
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>
分享到：
发表评论
-
Opanlayers用LineString画多边形
2014-09-24 00:26 1349<!DOCTYPE html> <htm ... -
OpenLayers地图联动
2014-09-23 22:27 1014地图联动 -
OpenLayers 选中元素弹框
2014-05-25 23:26 2461写道 http://www.openlayers.org ... -
困扰我的关于OpenLayers的问题终于解决了:
2014-04-15 13:45 1702原因： 添加标记的时候需要加上中扩号-> map.ad ... -
OpenLayers结合Googlemaps中的Tips
2014-04-01 21:29 1389<%@ page language="ja ... -
改变OpenLayers缩放工具条位置以及大小
2014-03-25 23:49 1622<script type="text/ ... -
geometry类和feature类
2013-10-17 02:14 1374我们上面的章节一直使用的都是feature，但是featur ... -
OpenLayers基底图层和叠加图层区别
2013-10-17 00:24 4925OpenLayers有多个不同的图层类，每一个都可以连接到不同 ... -
设置地图缩放控件位置
2013-10-13 22:53 1050map.addControl(new OpenLayers.C ... -
控制地图与div的占据区域【目标：让地图默认占满展现区】
2013-10-13 22:48 1083方法： 设置map的options，由其中两个因 ... -
创建OpenLayers地图步骤
2013-10-13 10:51 1360为地图添加绘制点、线、面步骤： 1、无可厚非对地图进行操作 ... -
获取OpenLayers画图控件画过的图形顶点
2013-10-13 04:18 1887在你使用画图工具画图的时候，画的图会作为你的vlayer的一个 ... -
Google地图准确定位
2013-09-29 03:47 918<!DOCTYPE html> <htm ... -
包含多个图层、缩放条、工具条、鼠标位置、弹出窗口
2015-04-10 01:09 1540<style type="text/css ... -
OpenLayers例子解析
2013-09-22 01:26 3200抽点时间从OpenLayers官方网站上找些例子具体解释一下M ... -
鼠标点击添加标记
2013-09-22 00:58 2088//点击一个标注按钮的事件,该方法的作用就是启用添加标注事件 ... -
Maker-shadow
2013-09-22 00:30 903<%@ page language="jav ... -
Marker(mousedown)
2013-09-22 00:29 975<%@ page language="jav ... -
OpenLayers>Marker>events(click/mousedown)【地图中标记的事件】
2013-09-22 00:19 2110<%@ page language="jav ... -
OpenLayers创建地图
2015-04-10 01:09 656<html> <head> <m ...
相关推荐
"GIS矢量图层"是指数据以矢量形式存储，矢量数据通常包含点、线、面等几何元素，这种数据结构能够精确表示地物的位置和形状。".shp"文件是Esri公司开发的GIS数据格式，用于存储地理空间特征，是GIS领域中常见的矢量...
openlayers 中利用矢量图层添加注记的示例。
四川省省界GIS矢量图层shp
本文将详细解析标题“最新2022年山西省道路矢量图层shp格式数据下载”及相关的描述中所涉及的GIS（地理信息系统）技术、道路矢量图层以及shp文件格式等知识点。 首先，我们需要理解GIS的核心概念。GIS是一种用于...
在GIS软件中，用户可以加载这个江西省道路矢量图层，进行以下操作： - 可视化：查看江西省道路的分布，通过颜色、线宽等视觉元素表示不同道路的属性。 - 查询分析：根据需要筛选特定类型的道路，如高速公路或乡村...
在本案例中，甘肃省的水系被转化为矢量图层，意味着可以进行复杂的空间查询、分析和可视化操作，例如查找特定流域、计算河流长度、分析水系网络结构等。 接下来，我们关注shp文件格式。shp是ESRI（Environmental ...
总的来说，"最新2022年福建省水系矢量图层shp格式数据下载"提供的信息资源是GIS领域的宝贵资料，不仅可用于学术研究，还能服务于政府决策、企业规划及公众信息查询。用户可以通过专业的GIS软件（如ArcGIS、QGIS等）...
标题中的“最新2022年四川省道路矢量图层shp格式数据下载”表明了这是一个关于地理信息系统（GIS）的数据资源，具体是2022年更新的四川省内道路的矢量数据。矢量图层是GIS中的一种重要数据类型，它由一系列几何对象...
本文将详细讲解与"最新2022年湖北省道路矢量图层shp格式数据下载"相关的GIS（地理信息系统）知识，重点涉及道路矢量数据、shp文件格式以及坐标系等内容。 首先，GIS是一种用于收集、存储、管理、分析和展示地理空间...
【资源说明】基于Vue+cesium开发的3d场景切换及矢量图层项目源码.zip基于Vue+cesium开发的3d场景切换及矢量图层项目源码.zip基于Vue+cesium开发的3d场景切换及矢量图层项目源码.zip基于Vue+cesium开发的3d场景切换及...
本文将详细讲解与“最新2022年宁夏回族自治区道路矢量图层shp格式数据下载”相关的IT知识，主要涉及GIS（地理信息系统）、道路数据、矢量图层和shp文件格式等概念。 GIS（地理信息系统）是集成硬件、软件和地理数据...
在处理山东省道路矢量图层时，可以进行如下操作： 1. **数据加载**：使用GIS软件打开.shp文件，将道路图层加载到工作空间，查看山东省的道路网络分布。 2. **属性查询**：通过.dbf文件，可以对道路属性进行筛选、...
在GIS（地理信息系统）领域，制作中国地图的矢量图层是一项常见的任务，它涉及到对地理数据的处理和可视化。本教程将详细讲解如何利用ArcGIS软件来创建包含中国边界、省会、九段线、南海诸岛以及河流等要素的矢量...
最新2022年深圳地铁线路shp矢量图层数据下载
本文将详细讲解与"最新2022年江苏省道路矢量图层shp格式数据下载"相关的GIS（地理信息系统）知识，重点介绍矢量数据、道路图层、wgs84坐标系以及shp文件格式。 一、GIS基础知识 GIS是一种用于处理、分析和展示地理...
本文将详细讲解与"最新2022年北京市道路矢量图层shp格式数据下载"相关的GIS（地理信息系统）知识，重点涉及道路矢量图、shp文件格式以及其重要性。 首先，GIS是一种集成计算机硬件、软件及地理数据的系统，用于获取...
本文将详细讲解与“最新2022年湖南省道路矢量图层shp格式数据下载”相关的知识，包括GIS（地理信息系统）、道路矢量图层、shp文件格式以及坐标系等方面的内容。 首先，GIS是一种集成空间数据和非空间数据的技术，...
### 矢量图层追加、栅格化与导出为图片 #### 矢量图层追加概述 在GIS（地理信息系统）领域，处理空间数据时，经常需要将多个矢量图层合并成一个单一的图层以便于进一步分析或可视化。在ArcGIS软件中，通常可以通过...
本文将详细讲解与"最新2022年河南省道路矢量图层shp格式数据下载"相关的GIS（地理信息系统）知识，以及其中涉及到的关键概念。 首先，我们要了解什么是GIS。GIS是一种集成硬件、软件和地理数据的系统，用于捕捉、...
《中国行政区划ArcGIS矢量图层：深入解析安徽省.shp》 在地理信息系统（GIS）领域，数据的表示和管理至关重要。ArcGIS作为一款强大的GIS软件，提供了丰富的工具和功能来处理地理空间数据。本篇文章将围绕"中国行政...