老糊涂
- 浏览: 177465 次
- 性别:
- 来自: 西安
-
文章分类
- 全部博客 (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)
<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 = null;
function init(){
var options = {
controls:[new OpenLayers.Control.KeyboardDefaults]
};
map = new OpenLayers.Map("map",options);
var wms = new OpenLayers.Layer.WMS("LayerName","http://vmap0.tiles.osgeo.org/wms/vmap0?",{layers:"basic"});
map.addLayer(wms);
map.zoomToMaxExtent();
}
</script>
</head>
<body onload="init()">
<div id="map" class="smallmap"></div>
</body>
</html>
代码中的div为显示地图的容器，地图要加载到哪个容器中所用方式为map = new OpenLayers.Map("map",options)，这里的map为容器的id，options为地图参数。
map的定义方式有以下几种方式：
// create a map with default options in an element with the id "map1"
var map = new OpenLayers.Map("map1");
// create a map with non-default options in an element with id "map2"
var options = {
maxExtent: new OpenLayers.Bounds(-200000, -200000, 200000, 200000),
maxResolution: 156543,
units: 'm',
projection: "EPSG:41001"
};
var map = new OpenLayers.Map("map2", options);
// map with non-default options - same as above but with a single argument
var map = new OpenLayers.Map({
div: "map_id",
maxExtent: new OpenLayers.Bounds(-200000, -200000, 200000, 200000),
maxResolution: 156543,
units: 'm',
projection: "EPSG:41001"
});
// create a map without a reference to a container - call render later
var map = new OpenLayers.Map({
maxExtent: new OpenLayers.Bounds(-200000, -200000, 200000, 200000),
maxResolution: 156543,
units: 'm',
projection: "EPSG:41001"
});
<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 = null;
function init(){
var options = {
controls:[new OpenLayers.Control.KeyboardDefaults]
};
map = new OpenLayers.Map("map",options);
var wms = new OpenLayers.Layer.WMS("LayerName","http://vmap0.tiles.osgeo.org/wms/vmap0?",{layers:"basic"});
map.addLayer(wms);
map.zoomToMaxExtent();
}
</script>
</head>
<body onload="init()">
<div id="map" class="smallmap"></div>
</body>
</html>
代码中的div为显示地图的容器，地图要加载到哪个容器中所用方式为map = new OpenLayers.Map("map",options)，这里的map为容器的id，options为地图参数。
map的定义方式有以下几种方式：
// create a map with default options in an element with the id "map1"
var map = new OpenLayers.Map("map1");
// create a map with non-default options in an element with id "map2"
var options = {
maxExtent: new OpenLayers.Bounds(-200000, -200000, 200000, 200000),
maxResolution: 156543,
units: 'm',
projection: "EPSG:41001"
};
var map = new OpenLayers.Map("map2", options);
// map with non-default options - same as above but with a single argument
var map = new OpenLayers.Map({
div: "map_id",
maxExtent: new OpenLayers.Bounds(-200000, -200000, 200000, 200000),
maxResolution: 156543,
units: 'm',
projection: "EPSG:41001"
});
// create a map without a reference to a container - call render later
var map = new OpenLayers.Map({
maxExtent: new OpenLayers.Bounds(-200000, -200000, 200000, 200000),
maxResolution: 156543,
units: 'm',
projection: "EPSG:41001"
});
分享到：
发表评论
-
Opanlayers用LineString画多边形
2014-09-24 00:26 1343<!DOCTYPE html> <htm ... -
OpenLayers地图联动
2014-09-23 22:27 1011地图联动 -
OpenLayers 选中元素弹框
2014-05-25 23:26 2459写道 http://www.openlayers.org ... -
困扰我的关于OpenLayers的问题终于解决了:
2014-04-15 13:45 1697原因： 添加标记的时候需要加上中扩号-> map.ad ... -
OpenLayers结合Googlemaps中的Tips
2014-04-01 21:29 1386<%@ page language="ja ... -
改变OpenLayers缩放工具条位置以及大小
2014-03-25 23:49 1614<script type="text/ ... -
geometry类和feature类
2013-10-17 02:14 1359我们上面的章节一直使用的都是feature，但是featur ... -
OpenLayers基底图层和叠加图层区别
2013-10-17 00:24 4910OpenLayers有多个不同的图层类，每一个都可以连接到不同 ... -
OpenLeyers矢量图层及矢量元素整合操作
2013-10-14 00:43 1684<%@ page language="java ... -
设置地图缩放控件位置
2013-10-13 22:53 1045map.addControl(new OpenLayers.C ... -
控制地图与div的占据区域【目标：让地图默认占满展现区】
2013-10-13 22:48 1073方法： 设置map的options，由其中两个因 ... -
创建OpenLayers地图步骤
2013-10-13 10:51 1358为地图添加绘制点、线、面步骤： 1、无可厚非对地图进行操作 ... -
获取OpenLayers画图控件画过的图形顶点
2013-10-13 04:18 1879在你使用画图工具画图的时候，画的图会作为你的vlayer的一个 ... -
包含多个图层、缩放条、工具条、鼠标位置、弹出窗口
2015-04-10 01:09 1536<style type="text/css ... -
OpenLayers例子解析
2013-09-22 01:26 3196抽点时间从OpenLayers官方网站上找些例子具体解释一下M ... -
鼠标点击添加标记
2013-09-22 00:58 2081//点击一个标注按钮的事件,该方法的作用就是启用添加标注事件 ... -
Maker-shadow
2013-09-22 00:30 900<%@ page language="jav ... -
Marker(mousedown)
2013-09-22 00:29 956<%@ page language="jav ... -
OpenLayers>Marker>events(click/mousedown)【地图中标记的事件】
2013-09-22 00:19 2106<%@ page language="jav ... -
OpenLayers画多边形
2013-09-19 18:54 2957<!DOCTYPE html> <htm ...
相关推荐
2. 初始化地图对象：接着，使用OpenLayers创建地图实例，指定地图容器、投影类型（通常使用 EPSG:3857，也称为 Web Mercator）和初始视图。 ```javascript var map = new ol.Map({ target: 'map', view: new ol....
通过这个DEMO，开发者可以学习到如何使用OpenLayers来创建和展示离线地图，这对于在没有网络连接或者网络不稳定的情况下仍然需要地图服务的场景非常有用。同时，这也是对OpenLayers API的一个基础实践，为进一步开发...
3. **初始化地图**：在JavaScript中，使用OpenLayers的Map类创建地图实例。指定地图容器的ID，设置地图的中心点和初始分辨率。例如： ```javascript var map = new ol.Map({ target: 'map', view: new ol.View({...
// 创建地图实例 var map1 = new OpenLayers.Map('map1_div'); var map2 = new OpenLayers.Map('map2_div'); // 添加地图层和其他控件... // 监听map1的zoomend事件，当map1的缩放级别改变时，更新map2 map1....
我们可以利用百度地图API创建地图对象，然后将其作为图像源（`ol.source.Image`）添加到OpenLayers的图层中： ```javascript var baiduSource = new ol.source.Image({ url: function(extent) { return '...
2. **创建地图实例**：在JavaScript文件（如app.js）中，初始化OpenLayers地图实例，设置地图容器、视图和投影。 ```javascript var map = new ol.Map({ target: 'map', view: new ol.View({ center: [116.404, ...
1. **创建地图实例**：首先，你需要创建一个OpenLayers地图实例，指定地图容器、投影、源（如WMS服务）和图层。 ```javascript var map = new ol.Map({ target: 'map', view: new ol.View({ center: [0, 0], ...
// 创建地图实例 var map = new ol.Map({ target: 'map', // 指定地图容器ID view: new ol.View({ center: [0, 0], // 初始中心点，这里可以设置为中国的中心坐标 zoom: 4, // 初始缩放级别 projection: ...
OpenLayers 是一个开源的JavaScript库，它允许在Web浏览器中创建交互式的地图应用。这个程序示例展示了如何结合OpenLayers和GeoServer实现地图图层的编辑功能，这在GIS（地理信息系统）开发中是非常常见的需求。...
2. 创建地图容器：在JavaScript代码中，首先创建一个DOM元素作为地图容器，然后初始化一个OpenLayers.Map对象，将这个DOM元素作为参数传入。 3. 加载天地图图层：天地图提供了不同的服务类型，例如WMS或TMS。你需要...
1. **创建地图实例**：首先，你需要创建一个OpenLayers地图实例，指定地图的容器元素、中心点、分辨率和投影等参数。 ```javascript var map = new ol.Map({ target: 'map', view: new ol.View({ center: [0, ...
2. **创建地图容器**：在HTML中定义一个div元素作为地图的容器，例如： ```html ; height:100vh;"> ``` 3. **初始化地图对象**：在JavaScript中，创建一个OpenLayers.Map实例，指定地图容器和一些基本配置。例如...
在这个系统中，开发者利用OpenLayers 3的API创建了一个用户界面，使得用户可以离线浏览和操作地图数据，这对于那些在没有网络连接或者网络不稳定的情况下仍需使用地图的场景尤其有用。 太乐地图是一个提供地图数据...
#### 知识点四：使用OpenLayers创建地图应用的步骤 1. **环境搭建**：首先需要搭建开发环境，确保浏览器支持以及引入OpenLayers库。 2. **基本地图展示**：通过简单的代码实现基本的地图展示功能，比如指定地图中心...
总的来说，利用OpenLayers调用天地图服务，开发者可以轻松地将丰富的天地图数据集成到自己的Web应用中，创建出具有专业地理信息功能的地图界面。通过这种方式，不仅可以展示地图信息，还能实现复杂的地理空间分析和...
3. 初始化地图对象：使用`new ol.Map()`创建地图对象，设置其视图（View）和目标容器（target）。 4. 创建瓦片图层：使用`ol.layer.Tile`创建一个图层，并设置其源（source）为谷歌地图的URL模板。模板通常会包含`{...
1. **地图初始化**：使用OpenLayers创建地图的基本步骤，包括设置地图容器、定义视图、添加底图图层。 2. **图层管理**：如何添加和管理不同的图层，如WMS图层、瓦片图层、GeoJSON图层等。 3. **投影转换**：...
OpenLayers 是一个流行的开源JavaScript库，用于在Web浏览器中创建交互式地图应用。这个压缩包“openlayers5加载百度地图.zip”显然包含了使用OpenLayers 5版本与百度地图API集成的示例代码。OpenLayers 5是这个库的...
这个库是一个小项目，用于简化基于创建地图的方式。 例如，下面是 OpenLayers 和 DirectOpenLayers 快速入门的比较： 开放层 import 'ol/ol.css'; import {Map, View} from 'ol'; import TileLayer from 'ol/...
3. 初始化地图对象：使用OpenLayers的Map构造函数创建地图实例，并设置地图容器。 ```javascript var map = new ol.Map({ target: 'map', view: new ol.View({ center: [0, 0], // 初始中心点，这里设为地球中心...