OpenLayers入门1

一、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>

   <script
src=”http://localhost:80/OpenLayr/OpenLayers.js”type=”text/javascript”></script>

   <style
type=”text/css”>

       #map
{

           width:
100%;

           height:
100%;

           border:
1px solid black;

       }

   </style>

   <script
defer=”defer” type=”text/javascript”>

       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″});

           //将创建的图层对象添加到Map对象

           map.addLayer(layer);

           //显示地图

                                    
map.addControl(newOpenLayers.Control.PanZoomBar({div:$(‘nav’)}));

                                    
map.addControl(newOpenLayers.Control.MouseDefaults());

                                    
map.addControl(newOpenLayers.Control.Scale($(‘scale’)));

                                    
map.addControl(newOpenLayers.Control.MousePosition({element:$(‘position’)}));

        
    
  map.addControl(new
OpenLayers.Control.LayerSwitcher());

       map.addControl(new
OpenLayers.Control.OverviewMap());

       map.zoomToMaxExtent();

       }

   </script>

 </head>

 <body
onload=”init()”>

   <div
id=”map”></div>

 </body>

</html>

 

You may also like...