老糊涂
- 浏览: 176415 次
- 性别:
- 来自: 西安
-
文章分类
- 全部博客 (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)
为地图添加绘制点、线、面步骤：
1、无可厚非对地图进行操作首先要添加map对象，以后将不再提示默认添加加map对象。
2、定义地图服务（在例子中定义了两个图层，一个wms图层，一个是矢量图层vectors）
3、定制标绘地图操作对象contros。
4、将地图图层添加到map的图层容器中。
5、将标绘操作对象添加到map的操作容器中
6、将地图缩放到全图范围内。（注意如果不调用这个代码，地图将不显示出来，而且拖动地图时还会报错，务必添加map.zoomToMaxExtent();）
7、激活标绘操作对象。controls.activate();
到此可以在地图上正常标绘了。
<span style="color:#FF0000;">注意:如果在标绘的时候如果不希望地图拖动可以调用
controls.handler.stopDown = true;
controls.handler.stopUp = true;</span>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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="skin.css" type="text/css">
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
var map,vectors,controls;
function init(){
map = new OpenLayers.Map("map");
var wms = new OpenLayers.Layer.WMS("world","http://vmap0.tiles.osgeo.org/wms/vmap0?",{layers:'basic'});
vectors = new OpenLayers.Layer.Vector("Vector Layer");
controls = new OpenLayers.Control.DrawFeature(vectors,OpenLayers.Handler.Point);
map.addLayers([wms,vectors]);
map.addControl(controls);
map.zoomToMaxExtent();
controls.activate();
}
</script>
</head>
<body onload="init()">
<div id="map" class="smallmap"></div>
</body>
</html>
1、无可厚非对地图进行操作首先要添加map对象，以后将不再提示默认添加加map对象。
2、定义地图服务（在例子中定义了两个图层，一个wms图层，一个是矢量图层vectors）
3、定制标绘地图操作对象contros。
4、将地图图层添加到map的图层容器中。
5、将标绘操作对象添加到map的操作容器中
6、将地图缩放到全图范围内。（注意如果不调用这个代码，地图将不显示出来，而且拖动地图时还会报错，务必添加map.zoomToMaxExtent();）
7、激活标绘操作对象。controls.activate();
到此可以在地图上正常标绘了。
<span style="color:#FF0000;">注意:如果在标绘的时候如果不希望地图拖动可以调用
controls.handler.stopDown = true;
controls.handler.stopUp = true;</span>
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!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="skin.css" type="text/css">
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
var map,vectors,controls;
function init(){
map = new OpenLayers.Map("map");
var wms = new OpenLayers.Layer.WMS("world","http://vmap0.tiles.osgeo.org/wms/vmap0?",{layers:'basic'});
vectors = new OpenLayers.Layer.Vector("Vector Layer");
controls = new OpenLayers.Control.DrawFeature(vectors,OpenLayers.Handler.Point);
map.addLayers([wms,vectors]);
map.addControl(controls);
map.zoomToMaxExtent();
controls.activate();
}
</script>
</head>
<body onload="init()">
<div id="map" class="smallmap"></div>
</body>
</html>
分享到：
发表评论
-
Opanlayers用LineString画多边形
2014-09-24 00:26 1338<!DOCTYPE html> <htm ... -
OpenLayers地图联动
2014-09-23 22:27 1007地图联动 -
OpenLayers 选中元素弹框
2014-05-25 23:26 2453写道 http://www.openlayers.org ... -
困扰我的关于OpenLayers的问题终于解决了:
2014-04-15 13:45 1691原因： 添加标记的时候需要加上中扩号-> map.ad ... -
OpenLayers结合Googlemaps中的Tips
2014-04-01 21:29 1380<%@ page language="ja ... -
改变OpenLayers缩放工具条位置以及大小
2014-03-25 23:49 1605<script type="text/ ... -
geometry类和feature类
2013-10-17 02:14 1338我们上面的章节一直使用的都是feature，但是featur ... -
OpenLayers基底图层和叠加图层区别
2013-10-17 00:24 4902OpenLayers有多个不同的图层类，每一个都可以连接到不同 ... -
OpenLeyers矢量图层及矢量元素整合操作
2013-10-14 00:43 1675<%@ page language="java ... -
设置地图缩放控件位置
2013-10-13 22:53 1038map.addControl(new OpenLayers.C ... -
控制地图与div的占据区域【目标：让地图默认占满展现区】
2013-10-13 22:48 1068方法： 设置map的options，由其中两个因 ... -
获取OpenLayers画图控件画过的图形顶点
2013-10-13 04:18 1871在你使用画图工具画图的时候，画的图会作为你的vlayer的一个 ... -
包含多个图层、缩放条、工具条、鼠标位置、弹出窗口
2015-04-10 01:09 1528<style type="text/css ... -
OpenLayers例子解析
2013-09-22 01:26 3188抽点时间从OpenLayers官方网站上找些例子具体解释一下M ... -
鼠标点击添加标记
2013-09-22 00:58 2079//点击一个标注按钮的事件,该方法的作用就是启用添加标注事件 ... -
Maker-shadow
2013-09-22 00:30 894<%@ page language="jav ... -
Marker(mousedown)
2013-09-22 00:29 944<%@ page language="jav ... -
OpenLayers>Marker>events(click/mousedown)【地图中标记的事件】
2013-09-22 00:19 2093<%@ page language="jav ... -
OpenLayers创建地图
2015-04-10 01:09 642<html> <head> <m ... -
OpenLayers画多边形
2013-09-19 18:54 2950<!DOCTYPE html> <htm ...
相关推荐
1. **创建地图实例**：首先，你需要创建一个OpenLayers地图实例，指定地图容器、投影、源（如WMS服务）和图层。 ```javascript var map = new ol.Map({ target: 'map', view: new ol.View({ center: [0, 0], ...
1. **创建地图实例**：首先，你需要创建一个OpenLayers地图实例，指定地图的容器元素、中心点、分辨率和投影等参数。 ```javascript var map = new ol.Map({ target: 'map', view: new ol.View({ center: [0, ...
首先，需要创建OpenLayers地图实例，设置地图的基本属性，如投影、图层、视图等。 ```javascript var map1 = new ol.Map({ target: 'map1', view: new ol.View({ center: [0, 0], zoom: 2 }), layers: [ new...
5. **创建OpenLayers图层**： 使用上面的`baiduSource`创建一个OpenLayers图层： ```javascript var baiduLayer = new ol.layer.Image({ source: baiduSource }); ``` 6. **设置地图和视图**： 创建`ol.Map`...
在IT行业中，前端开发是构建Web应用程序的关键部分，而OpenLayers是一个流行的JavaScript库，用于创建交互式的、基于Web的地图应用。本实例将详细介绍如何利用OpenLayers加载离线地图，并通过mui将其打包成移动应用...
OpenLayers 是一个强大的开源JavaScript库，用于在Web浏览器中创建交互式地图应用。它支持多种数据源，包括瓦片地图，使得开发者可以轻松地将地理信息集成到网站中。本教程将详细介绍如何使用OpenLayers加载瓦片地图...
2. **创建地图实例**：在JavaScript文件（如app.js）中，初始化OpenLayers地图实例，设置地图容器、视图和投影。 ```javascript var map = new ol.Map({ target: 'map', view: new ol.View({ center: [116.404, ...
OpenLayers 是一个强大的开源JavaScript库，用于在网页上创建交互式的地图应用。它支持多种地图服务，包括WMS、WMTS等，并且能够处理不同类型的地理数据，如瓦片地图、矢量数据等。本DEMO展示了如何利用OpenLayers...
OpenLayers是一个流行的JavaScript库，用于创建交互式的地图应用。本话题聚焦于如何在OpenLayers中扩展功能，添加天地图作为背景地图组件。天地图是由中国国家测绘局提供的官方地理信息服务平台，提供了丰富的地理...
加载天地图到OpenLayers 5主要涉及以下几个步骤： 1. 引入OpenLayers库：首先，你需要在HTML文件中引入OpenLayers的JavaScript库，这通常通过CDN链接或者本地文件引用完成。 2. 创建地图容器：在JavaScript中，你...
以下是一个基本的OpenLayers 5加载谷歌地图的步骤： 1. 引入OpenLayers库：确保在HTML文件中引入了OpenLayers的CDN链接或者本地的JS文件。 2. 创建地图容器：在HTML中定义一个div元素作为地图的容器。 3. 初始化...
在OpenLayers中集成高德地图的步骤与百度地图类似，只是URL和参数有所不同： ```javascript var gaodeSource = new ol.source.XImage({ url: '...
OpenLayers 是一个强大的开源JavaScript库，用于在网页上创建交互式的地图应用。它支持多种地图服务，包括WMS、WMTS等，并且可以轻松地与各种数据源集成。本教程将详细介绍如何使用OpenLayers加载在线天地图。 一、...
OpenLayers 3 是一个强大的开源JavaScript库，用于在网页上创建交互式的地图应用。这个示例专注于使用OpenLayers 3调用离线谷歌切片地图，这是一个非常实用的功能，特别是对于那些无法连接到互联网或者希望在本地...
在这里，你需要配置OpenLayers地图对象，加载地图瓦片源，并创建遮罩层。遮罩层通常是一个具有半透明颜色的几何图形，如矩形或圆形，覆盖在地图上。可以使用OpenLayers的`Feature`和`Style`对象来创建和定制遮罩的...
6. **加载本地瓦片**：在`emss.html`中，我们需要编写JavaScript代码来实例化OpenLayers地图，并指定瓦片源为本地文件。这通常涉及到创建一个`TileLayer`对象，设置其源为`TileImage`，并提供本地瓦片的URL模板，...
首先，集成OpenLayers到Vue项目中的关键步骤包括安装依赖和创建组件。在命令行中，你可以使用npm（Node Package Manager）来安装OpenLayers库： ```bash npm install ol ``` 接下来，创建一个Vue组件，如`Map.vue`...
总结来说，发布内网OpenLayers地图平台主要包括以下步骤： 1. 使用中间件发布卫星地图数据。 2. 修改OpenLayers源码以指向中间件发布的地图数据。 3. 配置IIS创建WebGIS站点。 4. 更新站点访问地址为本机IP地址。 ...
OpenLayers 是一个流行的开源JavaScript库，用于在Web浏览器中创建交互式的地图应用。它支持多种地图数据源，包括WMS、WMTS、GeoJSON等，并提供了丰富的地图操作和可视化功能。在OpenLayers中，实现地图全屏显示是...
2. **添加图层到地图**：将创建的图层添加到OpenLayers地图实例中。每个图层都有一个唯一的标识符，便于管理和操作。 3. **创建图层开关控件**：通过`new ol.control.Layers()`来创建图层开关控件实例。 4. **添加...