[/color]http://dev.openlayers.org/releases/OpenLayers-2.13.1/doc/apidocs/files/OpenLayers-js.html
openlayer构建地图:
1、页面引用div:
<div id="map" class="smallmap"></div>
2、css样式表:主要是smallmap样式的引用 512*256
#map {
background : #7391ad;
width : 100%;
}
#map {
border : 0;
height : 250px;
}
[color=red].smallmap {
width: 512px;
height: 256px;
border: 1px solid #ccc;
}
3.页面脚本:引用OpenLayer库(必须)及zoom.js实现移动功能
<script src="../lib/OpenLayers.js"></script>
<script src="zoom.js"></script>
4.zoom.js 部分代码:利用div创建
var map = new OpenLayers.Map({
div: "map", //div_id="map"
layers: [new OpenLayers.Layer.OSM()],//图层array
controls: [ //控件array
new OpenLayers.Control.Navigation({
dragPanOptions: {
enableKinetic: true
//enable “kineticdragging”.
}
}),
new OpenLayers.Control.Attribution(),//图层显示
new OpenLayers.Control.Zoom()//图层默认移入移出---控件的添加
],
center: [0, 0], //原点
zoom: 1 //初始化级数
});
分享到:
相关推荐
这个“openlayer学习资料”压缩包很可能是为了帮助学习者深入理解和掌握OpenLayers库的功能和用法。 在OpenLayers中,有几个关键的知识点是必须要了解的: 1. **地图层(Layers)**:地图由多个层组成,每个层可以...
本示例“baiduMap_openlayer”是关于如何利用OpenLayers加载和展示百度地图与高德地图的教程。这个教程对开发者来说具有很高的参考价值,特别是那些想要在自己的Web应用中集成地图功能的人员。 首先,让我们深入...
### OpenLayer 学习笔记 #### 一、OpenLayer 概述 OpenLayer 是一个用于显示基于网络的地图的高性能开源JavaScript库。它提供了强大的功能来处理各种地理空间数据,并允许开发者构建复杂的地理信息系统(GIS)应用...
OpenLayers 是一个开源的JavaScript库,用于在...如果你需要在地图上添加自定义的标记或图层,可以继续学习OpenLayers的其他功能,如VectorLayer、Feature、Style等。记得参考提供的博客文章,了解更多细节和示例代码。
通过深入学习和实践,开发者可以利用OpenLayer3构建复杂的GIS应用,如地理分析、数据可视化和地图服务集成。在实际项目中,还需要考虑性能优化、数据加载策略、用户交互设计等多个方面,以提升应用的整体质量和用户...
在这个"openlayer在线标绘,并实现增删改查"的主题中,我们将深入探讨如何利用OpenLayers加载离线地图,进行在线标绘,以及如何实现标绘要素的增删改查功能,同时还会涉及地图图层切换和定位功能。 1. **加载离线...
在实现过程中,你可能需要使用`ol.interaction.Draw`交互来允许用户在地图上绘制,以及`ol.source.Vector`和`ol.layer.Vector`来存储和显示测量结果。 在具体的代码实现中,你可能需要以下步骤: 1. 创建自定义...
- **创建基本地图**:以下是一个简单的示例,演示如何使用 OL3 创建一个地图并显示 OpenStreetMap 数据。 ```html <!doctype html> #map { height: 256px; width: 512px; } <title>OpenLayers3 ...
在"openlayer包以及代码例子"中,我们可以深入探讨以下几个核心知识点: 1. **地图显示**: OpenLayers 可以通过调用`ol.Map`对象来创建地图。你需要提供一个DOM元素作为地图容器,并设置至少一个图层(layer)。...
这个"OpenLayer标会示例"可能包含了一个使用OpenLayers库来绘制地理图形,如箭头和路径的实例。在HTML5的支持下,可以利用canvas或SVG元素进行矢量图形的绘制,这使得动态交互和地图渲染成为可能。 OpenLayers的...
在您提供的信息中,"openlayer三个文件"可能指的是OpenLayers库的核心组件或示例文件。由于在官网上没有找到,可能是特定版本或特定用途的文件。标签"ol/ol-debug"暗示这可能包含了调试版本的OpenLayers库,调试版本...
在"openlayer访问geoserver完整Demo"中,我们主要会涉及以下几个关键知识点: 1. **OpenLayers 3**: OpenLayers 3是这个示例的核心,它是一个强大的JavaScript库,允许开发者在网页上显示地图,控制地图交互,以及...
在这个"OpenLayer 简单实例7"中,我们将探讨如何利用OpenLayers库来添加标记(Mark)和文本,以及如何处理地图上的多个标记,并为它们设置事件监听器。这个实例将帮助我们理解如何在地图上动态展示数据并与用户进行...
这个"openlayer基本功能代码"的压缩包可能包含了实现OpenLayers基础功能的示例代码,让我们来详细探讨一下这些功能。 1. **基本放大缩小**:OpenLayers 提供了简单的地图缩放和平移操作。`Map`对象是核心,通过它的...
在这个教程中,你将学习到OpenLayers的核心概念和基本功能,包括: 1. **地图基础**:了解地图的基本构成,如图层(Layers)、投影(Projections)和坐标系统。OpenLayers支持多种地图服务,如WMS、WMTS和TMS,你...
这个压缩包“openlayer 的一些基本样例”显然是为了帮助开发者更好地理解和学习如何使用OpenLayers进行地图展示和操作。 首先,让我们来看看标题和描述中提到的关键知识点: 1. **地图加载**:OpenLayers 支持从...
【标题】:“baiduMap_openlayer(openlayer加载百度地图例子)” 在GIS(地理信息系统)领域,集成不同的地图服务是常见的需求。本示例重点展示了如何利用OpenLayers库加载百度地图,让开发者能够在一个Web应用中...
1. **创建自定义图层类**:你需要扩展OpenLayers的BaseSource和Layer类,创建自己的源类和图层类。在这个自定义类中,你可以重写`getTile`方法,以便在每次请求地图切片时动态处理图像。 2. **图像处理**:在`...
### Openlayer 简单实例11:添加Vector图层及测量功能 #### 一、OpenLayers简介 OpenLayers是一款开源的JavaScript库,用于显示基于矢量数据的地图和其他类型的地理信息。它支持多种数据源,如WMS(Web Map ...
这个"基于Openlayer3的动态标绘"压缩包显然包含了使用OpenLayers 3进行地图动态标绘的相关教程或示例代码。动态标绘是指在地图上实时绘制、更新和移动各种图形元素,如点、线、面以及更复杂的几何对象,这在地理信息...