OpenLayers入门1

最新推荐文章于 2025-07-28 22:05:11 发布

原创最新推荐文章于 2025-07-28 22:05:11 发布 · 516 阅读

0 ·

CC 4.0 BY-SA版权

GIS 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了OpenLayers作为开源JS框架在浏览器中实现地图浏览应用的基础知识，包括其丰富的底图资源、面向对象特性、地图控件、图层管理和矢量图层功能。此外，还详细阐述了环境配置步骤及简单的代码实验，展示如何创建地图、添加图层并实现基本操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、OpenLayers初识

（1）开源JS框架，在浏览器中实现地图浏览与应用

（2）丰富底图资源：WMS，GoogleMap，Virtual Earth，ArcGIS Server等，底图也可以是一张图片

（3）面向对象特性：Map，Layer，bounds

（4）地图控件（OpenLayers.Control）：鹰眼，TOC，缩放，比例尺等，Controls的类型分类，在Openlayers中多数Controls直接可以在地图上添加，比如Navigation（导航栏），第二类是需要放在Div元素中才能用，这点与地图map很相似，第三类需要放置在panel（面板）中的操作类似于网页HTML中button按钮，需要点击或绑定才能起作用，最后一类就是自定义类型的

（5）基础图层与业务图层：基础图层置于底层，业务图层顺序可以改变

（6）矢量图层（ Vector Layer）在矢量图层上，能够展现各种几何对象，像点、线、面、矩形、标记等，能够通过绘制线、面来测量距离和面积。还可以在地图上绘制图形，然后按相应格式导出数据，这些数据能够被其他项目中采用。在OpenLayers中提供三种方法来渲染矢量图层：SVG、Canvas、VML

二、环境配置

（1）下载OpenLayers-2.8.zip，解压

（2）拷贝解压后的OpenLayers.js、img、lib、theme到IIS对应目录，如下图所示：

OpenLayers.js文件路径：http://localhost:80/OpenLayr/OpenLayers.js

（3）开启IIS“目录浏览”功能

三、代码实验

<%@ page language="java"pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTDHTML 4.01 Transitional//EN">

<html>

<head>

<title>OpenLayers:First Course</title>

#map {

width: 100%;

height: 100%;

border: 1px solid black;

}

</style>

function init(){

//数据存储的左、下、右、上的范围，默认为NULL

var bounds = new OpenLayers.Bounds(

-174,18.4,

-63.5,71

);

//创建一个OpenLayers.Map构造新的地图。

var options = {

controls: [],

maxExtent: bounds,

maxResolution: 0.25,

projection:"EPSG:4326",

units: 'degrees'

};

var map = new OpenLayers.Map('map', options);

layer = new OpenLayers.Layer.ArcGIS93Rest( "ArcGIS ServerLayer","http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer/export",

{layers:"show:0,2"});