`
xyanzhao
  • 浏览: 18611 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

OpenLayers S1

阅读更多
Q. JS如何编写类与生成构造函数
A.
  基类为Class,代码如下:
   var Class = {//原始基类
  create: function() {   
    return function() {
      this.initialize.apply(this, arguments);
     }
  }
}


var Book = Class.create();  //声名为Book的类
Book.prototype = {        //给Book类添加成员和方法
   className:"Book",        //属性:类名
   initialize: function(name){ //构造函数
   this.name = name;
   },
   getName:function(){   //方法:取书名
   return this.name;
   }
   }  
   var book = new Book('XYZ');  //创建一个Book对像
   document.write(book.getName());       //打印书名  
  
  
Q. Opanlayers如何添加WMS服务层
A.
  map = new OpenLayers.Map( 'map',{ controls: [] } );
  layer = new OpenLayers.Layer.WMS( "test",              //层别名
          "http://192.168.2.60:8083/wmsconnector/com.esri.wms.Esrimap"  //服务连接
          , {
          layers: 'street3', //包含层的ID,AXL文件里层的ID,用","分开
          format:OpenLayers.Util.alphaHack()?'image/gif':'image/png',   //图片格式     
          transparent:'true',  //是否透明,注意,IE只支持GIF透明,
          ServiceName: "test2",//wms服务名
          async: true,
          srs:'EPSG:4214'   //坐标系统,经纬度写EPSG:4326
          }
          ,{
          maxExtent:new OpenLayers.Bounds(489757.940,293425.5058,534205.948491573,326902.17035), //最大范围坐标
          projection:"EPSG:4214",
          isBaseLayer:true,
          singleTile:true,//是否瓦片图
          maxResolution: (534205.948491573-489757.940)/1024 //最大分辨率                  
          }
           );
      map.addLayer(layer);
      map.setCenter(new OpenLayers.LonLat(512950.10208490635, 312347.9883206317), 0);//第一个参数为坐标,第二个为缩放等级,0为顶级
  
Q. Opanlayers如何添加工具条toolbar
A.
 
  //关键代码
   zoomIn = new OpenLayers.Control.ZoomBox({title:'放大',displayClass:'olZoomIn'});
       zoomOut = new OpenLayers.Control.ZoomBox({out:true,title:'缩小',displayClass:'olZoomOut'});
       pan = new OpenLayers.Control.DragPan({title:'移动',displayClass:'olPan'});
       var panel = new OpenLayers.Control.Panel({defaultControl: pan});    //     defaultControl为默认工具 
       panel.addControls([zoomIn,zoomOut,pan]);
       map.addControl(panel);   //map为上例定义   
  
  
   与代码对应的CSS文件,displayClass与下面的对应,如displayClass:'olpan',那么按钮激活状态的
CSS类为.olPanItemActive,非激活状态为.olZoomOutItemInactive。工具条的DIV的Class
默认为:.olControlPanel,通过DIV+CSS定位工具条。以上工具条的CSS示例为:
  .olControlPanel div {
  display:block; 
  top: 0px;
  left: 190px;
  width:  360px;
  height: 26px;
  margin: 0px;
}
.olControlPanel .olZoomInItemInactive {
  width:  26px;
  height: 26px;
  float:left;
  position:relative;
  background-image: url("../SritGisScript/img/zoomin.gif");
}
.olControlPanel .olZoomInItemActive {
  width:  26px;
  height: 26px;
  float:left;
  position:relative;
  background-image: url("../SritGisScript/img/zoomin_1.gif");
}

.olControlPanel .olZoomOutItemInactive {
  width:  26px;
  height: 26px;
position:relative;
float:left;
  background-image: url("../SritGisScript/img/zoomout.gif");
}
.olControlPanel .olZoomOutItemActive {
  width:  26px;
  height: 26px;
  position:relative;
  float:left;
  background-image: url("../SritGisScript/img/zoomout_1.gif");
}

.olControlPanel .olPanItemInactive {
  width:  26px;
  height: 26px;
position:relative;
float:left;
  background-image: url("../SritGisScript/img/pan.gif");
}
.olControlPanel .olPanItemActive {
  width:  26px;
  height: 26px;
  position:relative;
  float:left;
  background-image: url("../SritGisScript/img/pan_1.gif");
}   

Q. Opanlayers如何添加测距功能
A.

  说明:本段代码是在  openlayers/examples/measure.html 基础上进行完善
  ===================================================
  CSS添加内容:
  .olControlPanel .olMeasureLineItemInactive {
  width:  26px;
  height: 26px;
position:relative;
float:left;
  background-image: url("img/measureline.gif");
}
.olControlPanel .olMeasureLineItemActive {
  width:  26px;
  height: 26px;
  position:relative;
  float:left;
  background-image: url("img/measureline_1.gif");
}

.olControlPanel .olMeasurePolygonItemInactive {
  width:  26px;
  height: 26px;
position:relative;
float:left;
  background-image: url("img/measurearea.gif");
}
.olControlPanel .olMeasurePolygonItemActive {
  width:  26px;
  height: 26px;
  position:relative;
  float:left;
  background-image: url("img/measurearea_1.gif");
}
     ======================================================================
javascript添加内容:
var sketchSymbolizers = {
                "Point": {
                    pointRadius: 4,
                    graphicName: "square",
                    fillColor: "white",
                    fillOpacity: 1,
                    strokeWidth: 1,
                    strokeOpacity: 1,
                    strokeColor: "#333333"
                },
                "Line": {
                    strokeWidth: 3,
                    strokeOpacity: 1,
                    strokeColor: "#666666",
                    strokeDashstyle: "dash"
                },
                "Polygon": {
                    strokeWidth: 2,
                    strokeOpacity: 1,
                    strokeColor: "#666666",
                    fillColor: "white",
                    fillOpacity: 0.3
                }
            };
           
            var style = new OpenLayers.Style();
            style.addRules([
                new OpenLayers.Rule({symbolizer: sketchSymbolizers})
            ]);
            var styleMap = new OpenLayers.StyleMap({"default": style});
           
            measureLine=new OpenLayers.Control.Measure(                       
                        OpenLayers.Handler.Path, {
                        title:'测距',
                        displayClass:'olMeasureLine',
                        persist: true,
                        handlerOptions: {
                            layerOptions: {styleMap: styleMap}
                        }
                    }
                );
          measureLine.events.on({
                    "measure": handleMeasurements    //测距功能回调方法
                });
               
               
            measurePolygon=new OpenLayers.Control.Measure(           
                    OpenLayers.Handler.Polygon, {
                    title:'测面积',
                    displayClass:'olMeasurePolygon',
                        persist: true,
                        handlerOptions: {
                            layerOptions: {styleMap: styleMap}
                        }
                    }
                );
             measurePolygon.events.on({             
                    "measurepartial": handleMeasurements  ////测面积功能回调方法
                });
               
             map.addControls([measureLine,measurePolygon]);
          ==================================================================  
          //回调方法,根据需要编写,本示例为在output的Div里输出
         function handleMeasurements(event) {
            var geometry = event.geometry;
            var units = event.units;
            var order = event.order;
            var measure = event.measure;
            var element = document.getElementById('output');
            var out = "";
            if(order == 1) {
                out += "measure: " + measure.toFixed(3) + " " + units;
            } else {
                out += "measure: " + measure.toFixed(3) + " " + units + "2";
            }
            element.innerHTML = out;
        }

    =====================================================================


         
 
 
分享到:
评论
1 楼 ljx0517 2010-03-17  
请问 openlayers 如何能定位坐标?
就是由用户输入个坐标
点击后就跳到相应地点
发表评论

文章已被作者锁定,不允许评论。

相关推荐

    openlayers中文.rar

    OpenLayers 是一个强大的开源JavaScript库,用于在网页上创建交互式的地图应用。它支持多种地图数据源,包括WMS、WMTS、TMS、GeoJSON等,使得开发者能够轻松地将地理信息集成到Web应用中。这个"openlayers中文.rar...

    openlayers很多特效demo

    OpenLayers 是一个强大的开源JavaScript库,用于在网页上创建交互式的地图应用。它支持多种地图服务,包括WMS、WMTS等,并且能够处理多种数据格式,如GeoJSON、KML等。"openlayers很多特效demo" 提供了一系列示例,...

    OpenLayers v5.3.0 release

    OpenLayers 是一个强大的开源JavaScript库,专为在Web上创建交互式地图应用而设计。它支持多种地图数据源,包括WMS、WMTS、TMS等服务,以及GeoJSON和KML等本地格式。OpenLayers v5.3.0是这个库的一个重要版本更新,...

    OpenLayers JS文件下载

    OpenLayers 源文件,OpenLayers 源文件,OpenLayers 源文件,OpenLayers 源文件,OpenLayers 源文件,OpenLayers 源文件,OpenLayers 源文件,OpenLayers 源文件、

    openlayers5.3.0文档高速版

    《OpenLayers 5.3.0 高速文档详解》 OpenLayers 是一个开源JavaScript库,专门用于在网页上创建交互式的地图应用。版本5.3.0是其一个重要里程碑,提供了丰富的功能和优化,使得开发者能更高效地构建地理信息系统...

    OpenLayers

    **OpenLayers 开发指南** OpenLayers 是一个开源的JavaScript库,专门用于在Web浏览器中展示地理信息系统(GIS)数据。这个强大的工具允许开发者创建交互式的地图应用,支持多种地图服务,包括WMS、WFS、KML等。...

    openlayers 编辑geoserver图层

    在GIS领域,OpenLayers和GeoServer是两个非常重要的开源组件,它们共同构成了Web GIS系统的重要组成部分。OpenLayers是一个JavaScript库,用于在Web浏览器中显示地图,而GeoServer则是一个基于Java的服务,它允许...

    openLayers geoserver常见问题

    在OpenLayers中,删除Layer中的marker可以通过以下步骤实现:首先,获取到你想要删除的marker对象,这通常基于用户交互事件(如点击)来完成。然后,调用Layer的removeFeatures方法,传入marker对象即可将其从地图上...

    openLayers完整代码示例数据

    OpenLayers 是一个开源JavaScript库,专门用于在网页上创建交互式的地图应用。它支持多种地图服务,包括WMS、WMTS、TMS等,并且兼容各种浏览器,包括桌面端和移动设备。这个压缩包文件包含了一系列JSON数据,很可能...

    openlayers中文文档2

    OpenLayers 是一个开源的JavaScript库,用于在网页上创建交互式的地图应用。它支持多种地图服务,包括WMS、WMTS等,并且可以与不同的数据格式兼容,如GeoJSON、KML等。中文文档的提供使得国内开发者更容易理解和使用...

    openlayers v4.2.0下载

    OpenLayers 是一个开源JavaScript库,专门用于在网页上创建交互式的地图应用。它支持多种地图服务,包括WMS、WMTS、TMS等,并且兼容各种数据格式,如GeoJSON、KML和GML。OpenLayers v4.2.0是这个库的一个特定版本,...

    openlayers5.zip

    OpenLayers 是一个开源JavaScript库,专门用于在Web上创建交互式的地图应用。它支持多种地图服务,包括WMS、WMTS、TMS等,并且兼容各种浏览器和设备。OpenLayers 5是其版本更新中的一项重要升级,带来了许多新特性和...

    openlayers常用功能简单封装

    OpenLayers 是一个流行的开源JavaScript库,用于在Web上创建交互式地图应用。它支持多种地图服务,如WMS、WMTS,以及现代Web地图技术,如矢量图层和GeoJSON。本教程将深入探讨如何对OpenLayers的常用功能进行简单...

    openlayers典型例子展示

    "OpenLayers典型例子展示" OpenLayers是一款基于Web的GIS(Geographic Information System)映射库,提供了强大的地图展示和交互功能。下面我们将通过一些典型例子,展示OpenLayers的强大功能和多样化的应用场景。 ...

    openLayers-API中文版.zip

    OpenLayers 是一个开源的JavaScript库,专为构建地图应用程序而设计。它允许开发人员在网页上展示地图,处理地理数据,并提供与用户交互的各种功能。这个"openLayers-API中文版.zip"压缩包很可能是OpenLayers API的...

    openlayers 风场渲染效果

    openlayers 风场渲染效果,放置风场数据即可使用

    openlayersAPI研究文档

    OpenLayers API 研究文档 OpenLayers 是一个基于 JavaScript 的开源地图库,提供了丰富的 API 用于开发基于 Web 的地图应用程序。本文档将对 OpenLayers 的一些重要 API 进行研究,包括控件、方法、类和事件处理等...

    openLayers_geoserver常见问题.

    OpenLayers_GeoServer常见问题解决方案 OpenLayers 是一个基于Web的开源地理信息系统(GIS),广泛应用于地理信息系统的开发。 GeoServer 是一个基于Web的开源地理信息服务器,提供了强大的地理信息存储、处理和...

    openlayers 调用百度地图

    在OpenLayers中调用百度地图是一项常见的需求,特别是在构建Web GIS应用时,用户可能希望结合OpenLayers的强大功能和百度地图的丰富数据。OpenLayers是一个开源JavaScript库,用于创建交互式的地图应用,而百度地图...

    openlayers-官方完整包-v4.6.5

    OpenLayers 是一个强大的开源JavaScript库,用于在Web浏览器中创建交互式地图应用。它支持多种数据源和地图服务,如WMS、WMTS、TMS等,使得开发者能够轻松地将地理信息系统(GIS)集成到网页中。v4.6.5是OpenLayers...

Global site tag (gtag.js) - Google Analytics