`
I_amKing
  • 浏览: 1309 次
最近访客 更多访客>>
社区版块
存档分类
最新评论

openlayer学习网站

阅读更多
[/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学习资料

    这个“openlayer学习资料”压缩包很可能是为了帮助学习者深入理解和掌握OpenLayers库的功能和用法。 在OpenLayers中,有几个关键的知识点是必须要了解的: 1. **地图层(Layers)**:地图由多个层组成,每个层可以...

    baiduMap_openlayer(openlayer加载百度地图和高德地图例子)

    本示例“baiduMap_openlayer”是关于如何利用OpenLayers加载和展示百度地图与高德地图的教程。这个教程对开发者来说具有很高的参考价值,特别是那些想要在自己的Web应用中集成地图功能的人员。 首先,让我们深入...

    openlayer学习笔记

    ### OpenLayer 学习笔记 #### 一、OpenLayer 概述 OpenLayer 是一个用于显示基于网络的地图的高性能开源JavaScript库。它提供了强大的功能来处理各种地理空间数据,并允许开发者构建复杂的地理信息系统(GIS)应用...

    1.(openlayer篇)openlayer接入天地图(经纬度投影).zip

    OpenLayers 是一个开源的JavaScript库,用于在...如果你需要在地图上添加自定义的标记或图层,可以继续学习OpenLayers的其他功能,如VectorLayer、Feature、Style等。记得参考提供的博客文章,了解更多细节和示例代码。

    openlayer3实现的gis简单示例

    通过深入学习和实践,开发者可以利用OpenLayer3构建复杂的GIS应用,如地理分析、数据可视化和地图服务集成。在实际项目中,还需要考虑性能优化、数据加载策略、用户交互设计等多个方面,以提升应用的整体质量和用户...

    openlayer在线标绘,并实现增删改查

    在这个"openlayer在线标绘,并实现增删改查"的主题中,我们将深入探讨如何利用OpenLayers加载离线地图,进行在线标绘,以及如何实现标绘要素的增删改查功能,同时还会涉及地图图层切换和定位功能。 1. **加载离线...

    openlayer4 工具条

    在实现过程中,你可能需要使用`ol.interaction.Draw`交互来允许用户在地图上绘制,以及`ol.source.Vector`和`ol.layer.Vector`来存储和显示测量结果。 在具体的代码实现中,你可能需要以下步骤: 1. 创建自定义...

    openlayer3入门教程

    - **创建基本地图**:以下是一个简单的示例,演示如何使用 OL3 创建一个地图并显示 OpenStreetMap 数据。 ```html &lt;!doctype html&gt; #map { height: 256px; width: 512px; } &lt;title&gt;OpenLayers3 ...

    openlayer包以及列子

    在"openlayer包以及代码例子"中,我们可以深入探讨以下几个核心知识点: 1. **地图显示**: OpenLayers 可以通过调用`ol.Map`对象来创建地图。你需要提供一个DOM元素作为地图容器,并设置至少一个图层(layer)。...

    OpenLayer标会示例

    这个"OpenLayer标会示例"可能包含了一个使用OpenLayers库来绘制地理图形,如箭头和路径的实例。在HTML5的支持下,可以利用canvas或SVG元素进行矢量图形的绘制,这使得动态交互和地图渲染成为可能。 OpenLayers的...

    openlayer三个文件

    在您提供的信息中,"openlayer三个文件"可能指的是OpenLayers库的核心组件或示例文件。由于在官网上没有找到,可能是特定版本或特定用途的文件。标签"ol/ol-debug"暗示这可能包含了调试版本的OpenLayers库,调试版本...

    openlayer访问geoserver完整Demo

    在"openlayer访问geoserver完整Demo"中,我们主要会涉及以下几个关键知识点: 1. **OpenLayers 3**: OpenLayers 3是这个示例的核心,它是一个强大的JavaScript库,允许开发者在网页上显示地图,控制地图交互,以及...

    Openlayer 简单实例7

    在这个"OpenLayer 简单实例7"中,我们将探讨如何利用OpenLayers库来添加标记(Mark)和文本,以及如何处理地图上的多个标记,并为它们设置事件监听器。这个实例将帮助我们理解如何在地图上动态展示数据并与用户进行...

    openlayer基本功能代码

    这个"openlayer基本功能代码"的压缩包可能包含了实现OpenLayers基础功能的示例代码,让我们来详细探讨一下这些功能。 1. **基本放大缩小**:OpenLayers 提供了简单的地图缩放和平移操作。`Map`对象是核心,通过它的...

    Openlayer 教程及教程源码

    在这个教程中,你将学习到OpenLayers的核心概念和基本功能,包括: 1. **地图基础**:了解地图的基本构成,如图层(Layers)、投影(Projections)和坐标系统。OpenLayers支持多种地图服务,如WMS、WMTS和TMS,你...

    openlayer 的一些基本样例

    这个压缩包“openlayer 的一些基本样例”显然是为了帮助开发者更好地理解和学习如何使用OpenLayers进行地图展示和操作。 首先,让我们来看看标题和描述中提到的关键知识点: 1. **地图加载**:OpenLayers 支持从...

    baiduMap_openlayer(openlayer加载百度地图例子)

    【标题】:“baiduMap_openlayer(openlayer加载百度地图例子)” 在GIS(地理信息系统)领域,集成不同的地图服务是常见的需求。本示例重点展示了如何利用OpenLayers库加载百度地图,让开发者能够在一个Web应用中...

    openlayer-image.zip

    1. **创建自定义图层类**:你需要扩展OpenLayers的BaseSource和Layer类,创建自己的源类和图层类。在这个自定义类中,你可以重写`getTile`方法,以便在每次请求地图切片时动态处理图像。 2. **图像处理**:在`...

    Openlayer 简单实例11

    ### Openlayer 简单实例11:添加Vector图层及测量功能 #### 一、OpenLayers简介 OpenLayers是一款开源的JavaScript库,用于显示基于矢量数据的地图和其他类型的地理信息。它支持多种数据源,如WMS(Web Map ...

    基于Openlayer3的动态标绘.7z

    这个"基于Openlayer3的动态标绘"压缩包显然包含了使用OpenLayers 3进行地图动态标绘的相关教程或示例代码。动态标绘是指在地图上实时绘制、更新和移动各种图形元素,如点、线、面以及更复杂的几何对象,这在地理信息...

Global site tag (gtag.js) - Google Analytics