配置openLayers的缩放级别
OpenLayers地图重点属性摘录

一:OpenLayers1.OpenLayers:常量version_number标识版本二:BaseTypes2.BaseTypes(基本类型):这里定制了Openlayers中用到的string、number、function、array 3.Bounds(边界):属性left、bottom、right、top、centerLonLat方法extend 用于扩展边界,toBBox用于绑定bounds = new OpenLayers.Bounds();bounds.extend(new OpenLayers.LonLat(4,5));bounds.extend(new OpenLayers.LonLat(5,6));bounds.toBBOX(); // returns 4,5,5,64.LonLat(经纬度):属性lon经度、lat纬度注意:如果地图不是地理投影,那么调用的LonLat表示的是地图上的x、y轴坐标,为(0,0)表示坐标轴原点例子:map.setCenter(new OpenLayers.LonLat(116.3876,39.8983),13);最后一个参数表示Zoom:放大倍数5.Pixel(像素):属性x、y表示x和y坐标6.Size:属性w、h表示宽和高三:Console7.Console:用于调试和把错误等输出到“控制台”上,需要结合使用firebug四:Control8.Control(控件):使用方法:方法一:var map = new OpenLayers.Map('map', { controls: [] });map.addControl(new OpenLayers.Control.PanZoomBar());方法二:var map = new OpenLayers.Map('map',{ controls: [new OpenLayers.Control.PanZoomBar(),new OpenLayers.Control.Navigation()]});9.Button(按钮):方法trigger()点击按钮的时候会调用使用方法:var button = new OpenLayers.Control.Button({displayClass: "MyButton", trigger: myFunction});panel.addControls([button]);10.DragPan(鼠标拖动地图)11.DrawFeature(在矢量图上画点、线、面)var lines = new yer.Vector("Lines", {styleMap: new OpenLayers.StyleMap({pointRadius: 3,strokeColor: "#ff3300",strokeWidth: 3,fillOpacity: 0})});var panel = new OpenLayers.Control.Panel({displayClass: "olControlEditingToolbar"});var draw = new OpenLayers.Control.DrawFeature(lines, OpenLayers.Handler.Path,{displayClass: "olControlDrawFeaturePath", title: "Draw Lines"});panel.addControls([new OpenLayers.Control.Navigation({title: "Navigate"}),draw]);map.addControl(panel);12.EditingToolbar(编辑工具条)EditingToolbar包含4个控件:draw point、draw lines、draw polygon、pan navigation构造函数参数:layer(yer.Vector)、options例子:var vector = new yer.Vector("Editable Vectors");map.addLayers([vector]);map.addControl(new OpenLayers.Control.EditingToolbar(vector));13.Geolocate(地理定位)把w3c geolocation API包装成控件,与地图绑定,位置发生变化时触发事件14.GetFeature15.Graticule(格子线)在地图上以grid显示经纬线16.KeyboardDefaults:增加了用键盘实现平移缩放功能map.addControl(new OpenLayers.Control.KeyboardDefaults());17.LayerSwitcher(图层切换功能)map.addControl(new yerSwitcher());18.Measure(用于测量绘图):方法getArea和getLength19.MousePosition(鼠标位置):显示鼠标指针移动时的地理坐标map.addControl(new OpenLayers.Control.MousePosition());20.MouseToolbar(鼠标工具栏):有拉框放大的功能,但是需要按住shift键,所以不推荐使用,要实现相同的功能可以使用NavToolbar21.Navigation(导航):导航控件处理鼠标事件(拖动、双击、滚动)的地图浏览注意:这个控件是默认添加到地图中的22.NavToolbar:加入了两个mousedefaults控件,通过使用zoomBox实现拉框放大功能map.addControl(new OpenLayers.Control.NavToolbar());23.OverviewMap(鹰眼):默认在地图的右下角map.addControl(new OpenLayers.Control.OverviewMap());24.Pan(平移)25.Panel(面板):Panel控件是其他控件的容器Each control in the panel is represented by an icon,即表示添加到面板里面的控件都是用图像表示的26.PanZoom(平移缩放):由OpenLayers.Control.PanPanel和OpenLayers.Control.PanPanel 这两个控件组成,具有平移和缩放的功能图标:map.addControl(new OpenLayers.Control.PanZoom());27.PanZoomBar(平移缩放工具栏):由OpenLayers.Control.PanPanel和OpenLayers.Control.ZoomBar这两个控件组成,具有平移和缩放功能,这控件和PanZoom的区别见图标图标:map.addControl(new OpenLayers.Control.PanZoomBar());28. Permalink(永久链接):点击永久链接将用户返回到当前地图视图例子:map.addControl(new OpenLayers.Control.Permalink());29.Scale(比例尺):以1:1这种比率样式显示当前地图的比例例子:map.addControl(new OpenLayers.Control.Scale());30.ScaleLine(比例尺):以线段指标的样式显示当前地图的比例例子:map.addControl(new OpenLayers.Control.ScaleLine());31.SelectFeature 通过点击或是悬停选择给定层上的Feature构造函数参数:layer(yer.Vector)、options属性:multipleKeytoggleKeymultiple:是否允许同时选择多个图形clickout:取消功能,当点击图形外的任何东西,取消对图形的选择hover:鼠标悬停例子:selectControl = new OpenLayers.Control.SelectFeature([vectors1, vectors2],{clickout: true, toggle: false,multiple: false, hover: false,toggleKey: "ctrlKey", // ctrl key removes from selectionmultipleKey: "shiftKey" // shift key adds to selection});map.addControl(selectControl);selectControl.activate();32.SLDSelect33.Snapping(编辑矢量图层时用于捕捉)34.Split35.TouchNavigation(触摸导航):只针对触摸功能的设备的地图绘制应用程序36.TransformFeature37.WMSGetFeatureInfo:使用WMS的查询来获取地图上一个点的信息,显示的格式是Format的38.WMTSGetFeatureInfo:使用WMTS的查询来获取地图上一个点的信息,显示的格式是Format的39.Z oomBox(拉框放大的功能):与NavToolbar同样,属性out 可以实现拉框缩小(这个控件没有实现)Q:在界面中使用map.addControl(new OpenLayers.Control.ZoomBox({alwaysZoom:true}));并不能实现将拉框控件添加到地图中?使用创建新类的方法下面这段代码中调用的this是哪一层?controls[0]是哪个控件?OpenLayers.Control.CustomNavToolbar = OpenLayers.Class(OpenLayers.Control.Panel, {initialize: function(options) {OpenLayers.Control.Panel.prototype.initialize.apply(this, [options]);this.addControls([new OpenLayers.Control.ZoomBox({alwaysZoom:true})]);//this.displayClass = 'olControlNavToolbar'},draw: function() {var div = OpenLayers.Control.Panel.prototype.draw.apply(this, arguments);this.defaultControl = this.controls[0];return div;}});map.addControl(new OpenLayers.Control.CustomNavToolbar()); 40.ZoomIn 放大使用的时候可以通过PanZoomBar控件,ZoomIn每次放大一个级别41.ZoomOut 缩小使用的时候可以通过PanZoomBar控件,ZoomOut每次缩小一个级别42.ZoomPanel 包括OpenLayers.Control.ZoomIn和OpenLayers.Control.ZoomToMaxExtent和OpenLayers.Control.ZoomOut 图标map.addControl(new OpenLayers.Control.ZoomPanel());43.ZoomToMaxExtent 显示地图的最大程度的缩小五:Map44.Map (地图)见资料构造函数参数:div(页面中要显示的标签)、options属性:allOverlays:?3maxExtent:地图的最大范围units:地图的单位projection:覆盖默认的投影字符串地图,如果适当,最好还设置maxExtent、maxResolution、unitsmaxResolution:最大分辨率numZoomLevels:缩放级别数目知道最大分辨率和缩放级别数目可以直接知道最小和最大的缩放级别displayProjection:显示的投影级别,与mouseposition控件结合使用,即设置mouseposition 显示使用的坐标系// create a map with default options in an element with the id"map1"var map = new OpenLayers.Map("map1");// create a map with non-default options in an element with id"map2"var options = {maxExtent: new OpenLayers.Bounds(-200000, -200000, 200000,200000),//最大显示范围maxResolution: 156543,//最大分辨率units: 'm',//projection: "EPSG:41001"};var map = new OpenLayers.Map("map2", options);// map with non-default options - same as above but with a singleargumentvar map = new OpenLayers.Map({div: "map_id",maxExtent: new OpenLayers.Bounds(-200000, -200000, 200000,200000),maxResolution: 156543,units: 'm',projection: "EPSG:41001"});// create a map without a reference to a container - call renderlatervar map = new OpenLayers.Map({maxExtent: new OpenLayers.Bounds(-200000, -200000, 200000,200000),maxResolution: 156543,units: 'm',projection: "EPSG:41001"});六:Marker45.Marker 包括一个OpenLayers.LonLat和OpenLayers,Icon,注意:标记一般都是添加到一个特殊的图层,即yer.Markers使用方法:方法一:var markers = new yer.Markers( "Markers" );map.addLayer(markers);var size = new OpenLayers.Size(21,25);var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);var icon = newOpenLayers.Icon('/dev/img/marker.png', size, offset);markers.addMarker(new OpenLayers.Marker(newOpenLayers.LonLat(0,0),icon));markers.addMarker(new OpenLayers.Marker(newOpenLayers.LonLat(0,0),icon.clone()));方法二:var markers = new yer.Markers( "Markers" );map.addLayer(markers);markers.addMarker(new OpenLayers.Marker(newOpenLayers.LonLat(0,0),newOpenLayers.Icon('/dev/img/marker.png')));注意:标记不能使用同样的图标,但是可以使用clone()方法实现对图标的克隆46.Box 用矩形做标记,同样box要添加到Boxes这个图层里面Q:下面这个程序为什么没有效果?var boxes = new yer.Boxes( "Boxes" );map.addLayer(boxes);var bounds = new OpenLayers.Bounds(-10,50,5,60);var box = new OpenLayers.Marker.Box(bounds);//box.events.register("click", box, function (e) {// this.setBorder("yellow");// });boxes.addMarker(box);七:Popup47.Popup 构造函数参数有六个:ID、lonlat、contentSize、contentHTML、closeBox、closeBoxCallbackpopup = new OpenLayers.Popup("chicken",//标识符new OpenLayers.LonLat(5,40),//在地图上的弹出位置new OpenLayers.Size(200,200),//弹出的提示框的大小"example popup",//提示框中显示的内容true);//是否显示关闭框map.addPopup(popup);通过使用下面的方法,可以在标记中添加点击事件,点击时弹出提示框marker.events.register("click", marker, function (e) {map.addPopup(popup);popup.show();//如果不加这个方法,popup只有在第一次点击marker的时候才会出现,之后点击都没有效果});48.FramedCloud 继承Popup,弹出的形状与Popup是不一样的framedcloud = new OpenLayers.Popup.FramedCloud("chicken",//标识符new OpenLayers.LonLat(5,40),//在地图上的弹出位置new OpenLayers.Size(200,200),//弹出的提示框的大小"example popup",//提示框中显示的内容null,true);//是否显示关闭框map.addPopup(framedcloud);49.Anchored50.AnchoredBubble八:Icon51.Icon (图标)重要属性:url图片源、size图片大小、offset偏移量图标一般与marker结合使用Q:能不能将图标与其他控件结合?能!var size = new OpenLayers.Size(21,25);//用来控制图标的大小var offset = new OpenLayers.Pixel(-(size.w/2), -size.h);//用来控制图标的偏移量var icon = new OpenLayers.Icon('/dev/img/marker.png', size, offset);//定义图标九:Layer52.Layer (图层)..\openlayers\openlayers的类与方法.doc53.ArcGIS93Rest 使用ESRI的ArcGIS Server 9.3地图服务中显示的数据54.ArcIMS 使用ESRI公司的ArcIMS地图服务中显示的数据55.Bing 使用ESRI的Bing地图56.Boxes 为box提供图层方法:drawMarker、removeMarker57.GeoRSS 添加GeoRSS点功能58.GML 通过解析GML文件创建一个适量图层注意:过时,在3.0中被移除59.Google 构造函数中的参数:name显示的名称、options例子:var ghyb = newyer.Google("Google Hybrid",{type: G_HYBRID_MAP, sphericalMercator: true});60.Grid 使用瓷砖晶格层的基类61.VirtureEarth例子:var veroad = newyer.VirtualEarth("Virtual Earth Roads",{'type': VEMapStyle.Road, sphericalMercator:true});var veaer = new yer.VirtualEarth("Virtual Earth Aerial",{'type': VEMapStyle.Aerial, sphericalMercator:true});var vehyb = new yer.VirtualEarth("Virtual Earth Hybrid",{'type': VEMapStyle.Hybrid, sphericalMercator:true});62.Yahoo例子:var yahoo = newyer.Yahoo("Yahoo Street",{sphericalMercator: true});var yahoosat = new yer.Yahoo("Yahoo Satellite",{'type': YAHOO_MAP_SAT, sphericalMercator: true});var yahoohyb = new yer.Yahoo("Yahoo Hybrid",{'type': YAHOO_MAP_HYB, sphericalMercator:true});63.WMSyer.WMS实例是用来显示OGC Web地图服务的数据。
Openlayers教程

OpenLayers教程1开始使用openlayers1.1设置先到它的官方网站下载他的压缩包,解压。
拷贝目录下的OpenLayer.js、根目录下的lib目录、根目录下的img目录到你网站的Scripts目录下(当然,这个只是例子,您网站的目录结构您自己说得算,只要保证OpenLayers.js,/lib,/img在同一目录中即可)。
然后,创建一个****.html作为查看地图的页面。
2试验openlayers环境:geoserver1.7Openlayers2.4Dreamviever82.1第一个地图窗口目标:用openlayers加载geoserver wms。
步骤:(1)空白html文件(2)插入div-map(3)为div付风格以上为未加载地图的静态页面代码为:效果为:(4)插入openlayers代码引用<link rel="stylesheet" type="text/css" href="../theme/default/style.css"/><script src="OpenLayers.js" type="text/javascript"></script>(5)写js代码,主要是init()第一个地图窗口就完成了注1.js中defer的作用是页面加载完成后,执行脚本。
注2.2222.2控制地图与div的占据区域目标:让地图默认占满展现区方法:设置map的options,由其中两个因素决定:maxExtent-最大地图边界;maxResolution-最大解析度。
当maxExtent设置为地图的最大边界后,maxResolution设置为auto,那地图就占满DIV。
var options = { controls: [],maxExtent: bounds,maxResolution: "auto",projection: "EPSG:4326",numZoomLevels: 7,units: 'degrees'};map = new OpenLayers.Map('map',options);2.3地图控制-尺度缩放目标:填加尺度缩放控件步骤:(1)map初始化赋参数var options = {controls: [],//scales: [50000000, 30000000, 10000000, 5000000],maxExtent: bounds,maxResolution: "auto",projection: "EPSG:4326",numZoomLevels: 7, (表示有几个缩放级别)units: 'degrees'};map = new OpenLayers.Map('map',options);(2)填加控件,代码map.addControl(new OpenLayers.Control.PanZoomBar({position: new OpenLayers.Pixel(2, 15)(右边距,上边距)}));思考:级别的计算,个人推测由(maxResolution- minResolution)/ numZoomLevels,但是默认值是书面日后再细究。
openlayers的类与方法

openlayers 中的一些方法yer:initialize:创建层Div,注册事件destroy:注销clone:克隆当前层setName:设置层nameaddOptions:添加附属属性onMapResize:虚函数。
由子函数实现。
redraw:重画moveTo:移动。
(未实现有意义动作)setMap:设置层所属的地图removeMap:移除地图。
虚函数,由子函数实现getImageSize:返回图片尺寸setTileSize:设置瓦片尺寸和图片尺寸getVisibility:返回层可见性setVisibility:设置层的可见性display:显示或隐藏层calculateInRange:本层分辨率是否在地图分辨率容纳范围内setIsBaseLayer:设置或取消该层为BaseLayer initResolutions:初始化分辨率相关数据getResolution:取当前分辨率getExtent:取地图当前范围getZoomForExtent:由尺寸范围得缩放级别getDataExtent:取本层的范围边界,虚函数由子函数实现getResolutionForZoom:由缩放级别得分辨率getZoomForResolution:由分辨率得缩放级别getLonLatFromViewPortPx:视口坐标转经纬度getViewPortPxFromLonLat:经纬度转视口坐标setOpacity:设置层的透明度(包括其所以子节点,即图片)setZIndex:设置层的z轴值adjustBounds:边界校正---------------------------OpenLayers.Map:initialize:初始化。
瓦片尺寸、地图最大范围、弹出窗口边界、主题样式、创建地图Dom元素、创建视窗Div、创建层容器Div、更新地图Div尺寸、注册事件、添加Controldestroy:销毁Control、销毁层、移除视口Div、注销监听事件setOptions:设置附件参数getTileSize:返回瓦片尺寸getBy:使用指定的规则对队列的某属性匹配出一组对象getLayersBy:使用指定的规则对地图的层的某属性匹配出一组对象getLayersByName:使用指定的规则对地图的层的名字匹配出一组对象getLayersByClass:使用指定的规则对地图的层的类名匹配出一组对象getControlsBy:使用指定的规则对地图的control匹配出一组对象getControlsByClass:使用指定的规则对地图的control的类名匹配出一组对象getLayer:根据id由层堆栈中检索层setLayerZIndex:设置z轴值resetLayersZIndex:重置所有层的z轴值(按其在堆栈中的位置设置)addLayer:增加层addLayers:批量增加层removeLayer:移除层getNumLayers:返回层数目getLayerIndex:返回指定层在地图的层堆栈中的位置setLayerIndex:设置指定层在地图的层堆栈中新的位置(ZIndex),并触发层次序改变事件raiseLayer:向上或下调整层的次序setBaseLayer:设置新的BaseLayer,隐藏原BaseLayeraddControl:添加ControladdControlToMap:将Control加进地图getControl:返回指定id的ControlremoveControl:移除ControladdPopup:新增弹出窗口。
配置openLayers的缩放级别

OpenLayers Map可以在不同的比例尺或解析度下显示他的每一个layermap对象含有缩放级别的引用,即ZoomLevels,而且允许他的每一个layer去自定义他们自己的缩放级别,使之看起来合适可以通过在构造函数中设置options属性来配置openlayers layer的缩放级别== 正常图层==对于基于yer的正常layer,和能够在任何解析度下显示的layer,存在多种不同的方式去配置缩放级别和他们各自的比例尺和解析度“解析度数组”:要是转化缩放级别成为解析度,需要一个{{{resolutions}}}数组,他是这个图层所支持的不同解析度的列表,缩放级别就仅仅是一个解析度数组的索引,解析度数组始于0终于缩放级别-1比如:一个图层的解析度为[a,b,c],那么缩放级别的0就是a ,1就是b。
=== 配置解析度数组的方式===可选项:{{{scales}}} - ''Array'' -- 预先设置比例尺值的数组{{{resolutions}}} - ''Array'' -- 预先设置解析度值的数组{{{minScale}}} - ''float'' --layer能够显示的最小比例尺{{{maxScale}}} - ''float'' --layer能够显示的最大比例尺{{{maxResolution}}} - ''float'' --layer能够显示的最大解析度{{{minResolution}}} - ''float'' -- layer能够显示的最小解析度{{{minExtent}}} - ''!OpenLayers.Bounds'' --layer能显示出的最小范围{{{maxExtent}}} - ''!OpenLayers.Bounds'' -- layer能显示出的最大范围{{{numZoomLevels}}} - ''int'' -- 缩放级别的总数{{{units}}} - ''String'' - layer显示的单位,作用于比例尺-解析度换算Example Declarations:{{{var options = { scales: [50000000, 30000000, 10000000, 5000000],resolutions: [1.40625,0.703125,0.3515625,0.17578125,0.087890625,0.0439453125],minScale: 50000000,maxResolution: "auto",maxExtent: new OpenLayers.Bounds(-180, -90, 180, 90),maxResolution: 0.17578125,maxScale: 10000000,minResolution: "auto",minExtent: new OpenLayers.Bounds(-1, -1, 1, 1),minResolution: 0.0439453125,numZoomLevels: 5,units: "degrees"};map = new OpenLayers.Map( $('map') , options);}}}显然所有的配置项不能在一次设置中全都用上,因为他们可能相互冲突,他们会按照下面的优先级起作用:[A]【预设的缩放级别列表】缩放级别由预先设置的比例尺或解析度决定{{{scales}}} -解析度的数组由这些比例尺直接转化而来{{{resolutions}}} - 解析度数组直接从初始化函数的option参数中带来Examples:{{{var options = { scales: [50000000, 30000000, 10000000, 5000000] };map = new OpenLayers.Map( $('map') , options);}}}{{{var options = { resolutions:[1.40625,0.703125,0.3515625,0.17578125,0.087890625,0.0439453125] };map = new OpenLayers.Map( $('map') , options);}}}* '''maxResolution and numZoomLevels''' - ''!ZoomLevels are determined based on a maximum resolution and the number of desired !ZoomLevels''[B]【最大解析度&缩放级别的总数】缩放级别在最大解析度和缩放级别的总数上被决定B1 最大解析度的确定{{{minScale}}} --解析度的值从比例尺由单位{{{units}}}转化来{{{maxExtent}}} AND {{{maxResolution == "auto"}}} --解析度由地图的div尺寸和maxExtent属性计算而来。
openlayers基础概念 -回复

openlayers基础概念-回复OpenLayers基础概念OpenLayers是一个开源的JavaScript库,能够帮助开发人员在Web 地图上添加交互功能。
它是一个功能强大而且灵活的工具,可以用于创建各种地图应用程序。
本文将一步一步回答有关OpenLayers基础概念的问题。
1. OpenLayers 是什么?OpenLayers是一个开源的JavaScript库,提供一系列的API和工具,用于在Web地图上创建丰富的交互式地图应用程序。
它支持多种地图数据源,包括WMS、WMTS、GeoJSON、KML等。
由于其开源的性质,任何人都可以使用、修改和扩展OpenLayers库。
2. OpenLayers的主要特性有哪些?OpenLayers具有许多引人注目的特性,以下是其中一些主要特性:- 强大的地图渲染功能:OpenLayers可以使用多种地图数据源,包括瓦片地图、WMS、WMTS等。
它还支持自定义地图样式和符号。
- 丰富的地图交互工具:OpenLayers提供多种地图交互工具,包括缩放、平移、旋转、放大镜等。
开发人员可以根据需求自定义交互工具。
- 支持地图图层控制:OpenLayers可以创建多个图层,并对图层进行控制,包括显示/隐藏、透明度设置等。
- 强大的矢量绘制和编辑功能:OpenLayers支持在地图上进行点、线、面的绘制和编辑操作。
开发人员可以添加自定义绘制工具,并实现各种地图编辑需求。
- 支持地图样式定制:OpenLayers允许开发人员根据需求自定义地图样式,包括颜色、图标、标签等。
- 跨平台支持:OpenLayers可以在多个平台上运行,包括桌面浏览器、移动设备等。
3. 如何使用OpenLayers?要使用OpenLayers,你需要在HTML页面中引入OpenLayers库文件。
你可以从OpenLayers官方网站下载最新版本的库文件,并将其引入到你的项目中。
然后,你可以使用OpenLayers的API和工具来创建和控制地图应用程序。
openlayers基础概念

openlayers基础概念一、简介OpenLayers是一个开源的Web地图开发框架,它提供了一组丰富的地图功能,包括地图浏览、缩放、定位、图层叠加等。
OpenLayers支持多种地图数据源,包括WMS、TMS、GeoJSON等,同时也支持自定义图层。
通过OpenLayers,开发者可以轻松地构建各种类型的Web地图应用,包括地理信息系统(GIS)、地理数据可视化、地图分析等。
二、核心概念1.地图(Map)地图是OpenLayers的核心对象,它表示一个地理区域的可视化。
地图由多个图层组成,包括底图图层和叠加图层等。
开发者可以通过API设置地图的属性和方法,实现地图浏览、缩放、定位等功能。
2.图层(Layer)图层是地图的基本组成单元,它表示地图上的一个数据层。
OpenLayers支持多种类型的图层,包括WMS图层、TMS图层、GeoJSON图层等。
每个图层都有自己的数据源和渲染方式,可以叠加在底图上展示。
3.控件(Control)控件是OpenLayers中用于交互的组件,它可以帮助用户更好地与地图进行交互。
控件包括多种类型,如导航控件、缩放控件、测量控件等。
通过控件,用户可以实现地图的平移、缩放、定位等操作。
4.事件(Event)事件是OpenLayers中用于处理用户交互的机制。
当用户与地图进行交互时,会产生相应的事件。
开发者可以通过监听这些事件,获取用户的操作意图,并进行相应的处理。
事件类型包括click事件、mousemove事件等。
5.样式(Style)样式是OpenLayers中用于控制图层渲染的参数。
通过样式,开发者可以设置图层的颜色、线条粗细、透明度等属性,从而影响图层的显示效果。
样式可以应用于不同的图层类型,如点状图层、线状图层、面状图层等。
opengles 缩放效果实现原理

opengles 缩放效果实现原理OpenGLES是一种用于嵌入式设备的图形库,可以实现高性能的2D 和3D图形渲染。
缩放是OpenGLES中常用的图形效果之一,它可以将图像按比例放大或缩小。
本文将介绍OpenGLES缩放效果的实现原理。
在OpenGLES中,缩放效果的实现基于变换矩阵。
变换矩阵是一个3x3的矩阵,用于对图像进行平移、旋转和缩放等操作。
在缩放效果中,只需修改变换矩阵中的缩放部分即可实现图像的缩放。
图像的缩放是通过修改顶点坐标来实现的。
顶点坐标是描述图形形状的一组点的坐标,通过将顶点坐标乘以变换矩阵,可以实现图像的缩放。
具体来说,对于一个点的坐标(x, y),通过变换矩阵的缩放部分,可以将该点的坐标变为(x * sx, y * sy),其中sx和sy 分别表示在x和y方向上的缩放比例。
在OpenGLES中,可以使用以下代码来进行缩放的变换矩阵的设置:```Matrix.setIdentityM(matrix, 0); // 初始化变换矩阵Matrix.scaleM(matrix, 0, sx, sy, 1.0f); // 设置缩放比例```其中,matrix是一个float类型的数组,用于存储变换矩阵;sx和sy分别表示在x和y方向上的缩放比例。
在进行图像绘制时,需要将顶点坐标与变换矩阵相乘,得到经过缩放效果处理后的顶点坐标。
具体来说,对于一个顶点的坐标(x, y),通过变换矩阵的乘法运算,可以得到新的顶点坐标(x', y'),即:```x' = x * sxy' = y * sy```然后,使用新的顶点坐标进行图像绘制,就可以实现缩放效果。
需要注意的是,缩放比例sx和sy的取值范围通常为0到1之间,表示缩小;大于1表示放大。
如果sx和sy的值相同,则图像在x 和y方向上的缩放比例相同,保持图像的宽高比不变;如果sx和sy的值不同,则图像在x和y方向上的缩放比例不同,会改变图像的宽高比。
2016最新openlayers 3 基础教程

OpenLayers3基础教程——OL3基本概念从本节开始,我会陆陆续续的更新有关OL3的相关文章——OpenLayers3基础教程,欢迎大家关注我的博客,同时也希望我的博客能够给大家带来一点帮助。
概述:OpenLayers 3对OpenLayers网络地图库进行了根本的重新设计。
版本2虽然被广泛使用,但从JavaScript开发的早期发展阶段开始,已日益现实出它的落后。
OL3已运用现代的设计模式从底层重写。
OpenLayers 3同时设计了一些主要的新功能,如显示三维地图,或使用WebGL快速显示大型矢量数据集,这些功能将在以后的版本中加入。
基本概念:1、MapOpenLayers 3的核心部件是Map(ol.Map)。
它被呈现到对象target容器(例如,包含在地图的网页上的div元素)。
所有地图的属性可以在构造时进行配置,或者通过使用setter方法,如setTarget()。
2、Viewol. View负责地图的中心点,放大,投影之类的设置。
一个ol.View实例包含投影projection,该投影决定中心center的坐标系以及分辨率的单位,如果没有指定(如下面的代码段),默认的投影是球墨卡托(EPSG:3857),以米为地图单位。
放大zoom选项是一种方便的方式来指定地图的分辨率,可用的缩放级别由maxZoom(默认值为28)、zoomFactor(默认值为2)、maxResolution(默认由投影在256×256像素瓦片的有效成都来计算)决定。
起始于缩放级别0,以每像素maxResolution的单位为分辨率,后续的缩放级别是通过zoomFactor区分之前的缩放级别的分辨率来计算的,直到缩放级别达到maxZoom。
3、SourceOpenLayers 3使用ol.source.Source子类获取远程数据图层,包含免费的和商业的地图瓦片服务,如OpenStreetMap、Bing、OGC资源(WMS或WMTS)、矢量数据(GeoJSON格式、KML格式…)等。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
OpenLayers Map可以在不同的比例尺或解析度下显示他的每一个layermap对象含有缩放级别的引用,即ZoomLevels,而且允许他的每一个layer去自定义他们自己的缩放级别,使之看起来合适可以通过在构造函数中设置options属性来配置openlayers layer的缩放级别== 正常图层==对于基于yer的正常layer,和能够在任何解析度下显示的layer,存在多种不同的方式去配置缩放级别和他们各自的比例尺和解析度“解析度数组”:要是转化缩放级别成为解析度,需要一个{{{resolutions}}}数组,他是这个图层所支持的不同解析度的列表,缩放级别就仅仅是一个解析度数组的索引,解析度数组始于0终于缩放级别-1比如:一个图层的解析度为[a,b,c],那么缩放级别的0就是a ,1就是b。
=== 配置解析度数组的方式===可选项:{{{scales}}} - ''Array'' -- 预先设置比例尺值的数组{{{resolutions}}} - ''Array'' -- 预先设置解析度值的数组{{{minScale}}} - ''float'' --layer能够显示的最小比例尺{{{maxScale}}} - ''float'' --layer能够显示的最大比例尺{{{maxResolution}}} - ''float'' --layer能够显示的最大解析度{{{minResolution}}} - ''float'' -- layer能够显示的最小解析度{{{minExtent}}} - ''!OpenLayers.Bounds'' --layer能显示出的最小范围{{{maxExtent}}} - ''!OpenLayers.Bounds'' -- layer能显示出的最大范围{{{numZoomLevels}}} - ''int'' -- 缩放级别的总数{{{units}}} - ''String'' - layer显示的单位,作用于比例尺-解析度换算Example Declarations:{{{var options = { scales: [50000000, 30000000, 10000000, 5000000],resolutions: [1.40625,0.703125,0.3515625,0.17578125,0.087890625,0.0439453125],minScale: 50000000,maxResolution: "auto",maxExtent: new OpenLayers.Bounds(-180, -90, 180, 90),maxResolution: 0.17578125,maxScale: 10000000,minResolution: "auto",minExtent: new OpenLayers.Bounds(-1, -1, 1, 1),minResolution: 0.0439453125,numZoomLevels: 5,units: "degrees"};map = new OpenLayers.Map( $('map') , options);}}}显然所有的配置项不能在一次设置中全都用上,因为他们可能相互冲突,他们会按照下面的优先级起作用:[A]【预设的缩放级别列表】缩放级别由预先设置的比例尺或解析度决定{{{scales}}} -解析度的数组由这些比例尺直接转化而来{{{resolutions}}} - 解析度数组直接从初始化函数的option参数中带来Examples:{{{var options = { scales: [50000000, 30000000, 10000000, 5000000] };map = new OpenLayers.Map( $('map') , options);}}}{{{var options = { resolutions:[1.40625,0.703125,0.3515625,0.17578125,0.087890625,0.0439453125] };map = new OpenLayers.Map( $('map') , options);}}}* '''maxResolution and numZoomLevels''' - ''!ZoomLevels are determined based on a maximum resolution and the number of desired !ZoomLevels''[B]【最大解析度&缩放级别的总数】缩放级别在最大解析度和缩放级别的总数上被决定B1 最大解析度的确定{{{minScale}}} --解析度的值从比例尺由单位{{{units}}}转化来{{{maxExtent}}} AND {{{maxResolution == "auto"}}} --解析度由地图的div尺寸和maxExtent属性计算而来。
若maxExtent属性未指定,默认从map继承,即全世界{{{maxResolution}}}--解析度的值直接从layer的options参数中带来,若没指定,则默认为从map 的options中带来B2 缩放级别的总数确定B2_a基于最大和最小解析度的比值来计算--确定最小解析度:{{{maxScale}}} --解析度的值从比例尺由单位{{{units}}}转化来{{{minExtent}}} AND {{{minResolution == "auto"}}}--解析度的值基于地图div尺寸和minExtent属性来计算。
minExtent属性必须被指定,默认不从map继承{{{minResolution}}} --解析度的值从layer指定的option参数中直接带来,若没指定,最小解析度保持为空,缩放级别数直接接受B2_b {{{numZoomLevels}}}缩放级别数直接从layer指定的option参数带来,若没有指定默认从map的option带来Examples:||maxResolution||Converted from minScale using specified units||||numZoomLevels||Default from map||{{{var options = { minScale: 50000000,units: "degrees"};map = new OpenLayers.Map( $('map') , options);}}}[[BR]]||maxResolution||Calculated based on div size and default maxExtent from map||基于div的尺寸和地图最大范围计算||numZoomLevels||Calculated using ratio of maxResolution/minResolution||用最大最小分辨率的比值计算{{{var options = { maxResolution: "auto",maxExtent: new OpenLayers.Bounds(-180, -90, 180, 90),minResolution: 0.0439453125};map = new OpenLayers.Map( $('map') , options);}}}[[BR]]||maxResolution||Specified||||numZoomLevels||Specified||{{{var options = { maxResolution: 0.17578125,numZoomLevels: 15};map = new OpenLayers.Map( $('map') , options);}}}[[BR]]||maxResolution||Default from map||||numZoomLevels||Converted maxScale (using default units from map) to minResolution, then uses ratio of maxResolution/minResolution to calculate numZoomLevels||{{{var options = { maxScale: 10000000 };map = new OpenLayers.Map( $('map') , options);}}}[[BR]]||maxResolution||Specified||||numZoomLevels||Calculated minResolution based on div size and default minExtent from map, then uses ratio of maxResolution/minResolution to calculate numZoomLevels||{{{var options = { maxResolution: 0.17578125,minResolution: "auto",minExtent: new OpenLayers.Bounds(-1, -1, 1, 1),};map = new OpenLayers.Map( $('map') , options);}}}。