配置openLayers的缩放级别

合集下载

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教程

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的类与方法

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的缩放级别

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基础概念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基础概念一、简介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 缩放效果实现原理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 基础教程

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格式…)等。

OpenLayers中地图缩放级别的设置方法

OpenLayers中地图缩放级别的设置方法

OpenLayers中地图缩放级别的设置⽅法⼀、概述在OpenLayers中,地图必须具有⼀个缩放级别的范围,缩放级别可以⽤⽐例尺(scale)或者分辨率(resolution)表⽰。

⽐例尺——屏幕上1⽶代表多少地图坐标单位;分辨率——屏幕上⼀个像素代表多少地图坐标单位。

两者的转换关系是:scale = resolution * 72 * 39.3701(1⽶=39.3701英⼨,1英⼨=72像素)地图具有⼀个总的缩放级别,每个图层可以有各⾃的缩放级别,这样可以控制图层只在合适的级别上显⽰。

⼆、缩放级别范围的确定⽅法1、⽐例尺数组或者分辨率数组来确定(相邻两级之间不⼀定是2倍的关系,可以是任意值)。

⽰例:resolutions: [1.40625,0.703125,0.3515625,0.17578125,0.087890625,0.0439453125]scales: [50000000, 30000000, 10000000, 5000000]2、⽤最⼤分辨率(maxResolution)和缩放级别总数(numZoomLevels)确定,相邻两级是2倍关系2.1最⼤分辨率的确定⽅法:a. 直接指定maxResolution,例如:maxResolution: 0.17578125b. 直接指定minScale,例如:minScale: 50000000c. 由maxExtent确定(maxResolution需设置为‘auto’),例如:maxExtent: new OpenLayers.Bounds(-180, -90, 180, 90),maxResolution: "auto"2.2 缩放级别总数的确定⽅法:a. 直接指定numZoomLevels,例如:numZoomLevels: 5b. 由最⼤分辨率和最⼩分辨率的⽐值确定,最⼩分辨率同2.1有三种⽅法可以确定:b.1 直接指定minResolutionb.2 直接指定maxScaleb.3 由minExtent确定(minResolution需设置为‘auto’)如果指定的参数过多,导致缩放级别范围不⼀致时,上述⽅法顺序决定了OpenLayers确定缩放级别范围的优先级。

OpenLayers入门(一)

OpenLayers入门(一)

OpenLayers⼊门(⼀)OpenLayers简介有如下特点:1. ⽀持任何XYZ⽡⽚资源,同时也⽀持OGC的WMTS规范的⽡⽚服务以及ArcGIS规范的⽡⽚服务2. ⽀持⽮量切⽚,包括pbf、GeoJSON、TopoJSON格式3. ⽀持⽮量图层,能渲染GeoJSON、TopoJSON、KML、GML和其他格式的⽮量数据4. ⽀持OGC制定的WMS、WFS等GIS⽹络服务规范5. ⽀持在移动设备上运⾏6. 可以通过css来为地图控件设置样式7. ⾯向对象开发⽅式,在OpenLayers中万物皆对象和另⼀个流⾏的地图库leaflet不同,openLayers完全是⽤⾯向对象的⽅式开发的,且⼏乎内置了所有地图开发需要的功能,⽽leaflet核⼼库只提供基本功能,其他功能都是通过第三⽅插件进⾏扩展。

使⽤上来说leaflet更容易上⼿,OpenLayers上⼿难度⽐较⼤,所以业务可预见较为简单的建议采⽤leaflet。

OpenLayers虽然很强⼤,但是因为⼀切皆对象,所以使⽤起来很⿇烦,再加上⽆⽐难看的⽂档,所以对新⼿极其不友好,这也是本系列⽂章的初衷,旨在基于实际业务开发的场景下来沉淀⼀些内容,来帮助新⼿使⽤OpenLayers。

这是本系列的第⼀篇,主要介绍地图的实例化、基本的要素操作,后续不定期更新。

本⽂基于OpenLayers v6+版本,代码基于Vue。

安装npm i ol实例化地图<div class="ol-map" ref="olMap"></div>import Map from 'ol/Map'import View from 'ol/View'import { Tile as TileLayer } from 'ol/layer'import {XYZ, OSM} from 'ol/source'import { fromLonLat } from 'ol/proj'// fromLonLat⽅法能将坐标从经度/纬度转换为其他投影// 使⽤内置的OSM//const tileLayer = new TileLayer({// source: new OSM()//})// 使⽤⾼德const tileLayer = new TileLayer({source: new XYZ({url: 'https:///appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}'})})let map = new Map({layers: [tileLayer],view: new View({center: fromLonLat([120.771441, 30.756433]),//地图中⼼点zoom: 15,// 缩放级别minZoom: 0,// 最⼩缩放级别maxZoom: 18,// 最⼤缩放级别constrainResolution: true// 因为存在⾮整数的缩放级别,所以设置该参数为true来让每次缩放结束后⾃动缩放到距离最近的⼀个整数级别,这个必须要设置,当缩放在⾮整数级别时地图会糊 }),target: this.$refs.olMap// DOM容器})这样就可以显⽰⼀个基本的地图:可以拖动和缩放,但是不能旋转,如果需要⽀持旋转,需要加上旋转交互:import {defaults as defaultInteractions,DragRotateAndZoom,} from 'ol/interaction'let map = new Map({// ...interactions: defaultInteractions().extend([new DragRotateAndZoom()])})这样就可以按住shift键时通过⿏标来进⾏旋转地图。

OpenLayers API接口文档

OpenLayers API接口文档

OpenLayers API由于OpenLayers是采用JavaScript实现的,不存在包的概念,但是它可以通过命名空间来实现类似包的功能。

另外,JavaScript不存在继承的概念,也不存在私有、公有、保护等概念,OpenLayers中所谓的继承其实就是将基类中的所有属性和方法复制到子类中去。

OpenLayers的命名空间如下:一、OpenLayers命名空间:如上图所示,OpenLayers是整个webgis系统的最外层命名空间,所有的地理信息系统相关web程序都在此命名空间下,在此命名空间下又创建了其他的命名空间来管理相关功能的类。

在这个命名空间下定义了一些基础类和基类来构建整个框架。

1、class OpenLayers.MapMap类将div DOM元素实例化的对象为地图容器,可以向地图容器中添加图层和控件。

属性2、class OpenLayers.Map2基于OpenLayers.Map封装,将自有地图图层和常用控件都已经加载在地图当中,用户无需关心地图数据源等问题,简化了用户的地图调用。

实例化该类后即可创建一个可查看和使用的地图对象,其方法和属性与OpenLayers.Map一致,见OpenLayers.Map类。

2、class OpenLayers.MarkerOpenLayers命名空间下的Marker类可以被实例化为marker对象,用于标注地图上的位置,marker对象是由LonLat 对象和Icon对象组合而成的。

markers一般被添加到一个叫做yer.Markers的特殊图层中。

需要注意的是,如果你在一个marker中使用了一个icon,也就是说,你不能在其他的marker中在使用它——一旦你使用了这个icon,你应该clone()这个icon然后在另外的marker中使用这个icon。

3、class OpenLayers.PopupPopup类实例化一个弹出窗口,通常被添加到地图容器中。

geoserver配置及openlayers应用

geoserver配置及openlayers应用

geoserver与OpenLayers配置chenchangyun@2010年8月目录1准备工作 (3)1.1需要用到的程序和资料 (3)2地图格式转换方式(一) (4)3地图格式转换方式(二) ................................................................................. 错误!未定义书签。

3.1解压地图 ............................................................................................... 错误!未定义书签。

3.2打开地图 ............................................................................................... 错误!未定义书签。

3.3导出图层 ............................................................................................... 错误!未定义书签。

3.4转换MIF格式为SHP格式 .................................................................... 错误!未定义书签。

4GEOSERVER安装配置. (4)4.1G EO S ERVER安装 (4)4.2配置地图 (4)4.2.1登录geoserver (4)4.2.2配置数据 (5)4.2.3新建数据集 (6)4.2.4新建Feature Type (8)4.2.5应用保存配置 (9)4.2.6访问地图 (12)5OPENLAYERS配置 (13)5.1测试页面 (13)5.2部署示例 (18)5.3查看效果 (18)5.4加上GOOGLEMAP图层 (18)5.4.1申请Google 地图API 的key (18)5.4.1.1将域名映射到本地 (18)5.4.2编辑html (19)5.4.3查看效果 (19)6GEOSERVER高级设置 (20)6.1自定义图层的S TYLE (20)6.2查看图层的字段信息 (23)6.3在T OMCA T上部署G EO S ERVER (24)6.4自定义名称空间 (25)7参考资料 (28)1准备工作相关资料文件下载1.1 需要用到的程序和资料1.JDK 1.6 :/software/java_se/jdk-6u3-windows-i586-p.exe安装好JDK1.62.MapInfo Professional 6.4 SCP中文版或者8.5 /9.5/10.0英文版安装好Mapinfo3.geoserver 1.5.4 或者1.6.0 Rc2或者2.0.2/sourceforge/geoserver/geoserver-1.5.4a.bin.zip/sourceforge/geoserver/geoserver-1.5.4a.src.zip/sourceforge/geoserver/geoserver-1.5.4a.war.zip/sourceforge/geoserver/geoserver-1.6.0-RC2-war.zip/sourceforge/geoserver/geoserver-1.6.0-RC2-pyramid-plugin.zip /sourceforge/geoserver/geoserver-1.6.0-RC2-mysql-plugin.zip 来源:/display/GEOS/Download4.Openalyers 2.5/download/OpenLayers-2.5.zip来源:/5.地图一份来源:各个现场提供的mapinfo地图或者ESRI公司的shapfile文件6.地图格式转换工具【选用】/Download/download/2006/datatransfer.rar来源:/Download/Showsoft.asp?Type=1&ID=2167.Apache Tomcat 6.0.14【选用】/tomcat/tomcat-6/v6.0.14/bin/apache-tomcat-6.0.14.zip /tomcat/tomcat-6/v6.0.14/src/apache-tomcat-6.0.14-src.zip 来源:/2地图格式转换方式(一)Mapinfo 8.5中,主菜单--> Tools -->Universal Translator--> Universal Translator Source file 中选择要被转换的所有tab文件,类型为mapinfo;Target file 选择shapfile文件格式,选中文件存放的路径3GeoServer安装配置GeoServer1.5和最新的2.0.2操作基本类似,现以1.5为来讲解。

openlaer vectorlayer style 方法中的回调参数

openlaer vectorlayer style 方法中的回调参数

OpenLayers VectorLayer Style 方法中的回调参数1. 引言OpenLayers是一个功能强大的开源地理信息系统(GIS)库,用于在Web浏览器中展示地图和空间数据。

OpenLayers提供了一系列方法来创建和定制矢量图层的样式。

其中,VectorLayer Style方法是一种非常常用和强大的方法,它允许我们通过回调参数来自定义矢量图层的样式。

本文将详细介绍OpenLayers中VectorLayer Style方法中的回调参数,包括其定义、常用回调函数以及如何使用它们来实现不同类型的矢量图层样式定制。

2. VectorLayer Style方法概述在OpenLayers中,矢量图层(Vector Layer)可以用于展示点、线、面等各种几何要素。

这些要素通常具有不同的属性和样式需求。

为了满足用户对不同要素样式的个性化定制需求,OpenLayers提供了VectorLayer Style方法。

该方法允许用户通过回调函数来自定义每个要素的样式。

当渲染矢量图层时,OpenLayers会依次对每个要素调用回调函数,并将要素作为参数传递给回调函数。

用户可以根据要素的属性值、几何类型等信息来返回相应的样式。

3. 回调参数在VectorLayer Style方法中,回调函数通常包含一个或多个参数,用于接收要素的信息并返回样式。

下面是常用的回调参数:3.1 featurefeature参数表示当前要素对象,它包含了要素的几何信息、属性值等。

用户可以通过访问该对象的属性来获取要素的相关信息。

例如,我们可以使用feature.get('name')来获取要素的名称属性值。

3.2 resolutionresolution参数表示当前地图视图的分辨率(即地图上每个像素所代表的实际距离)。

通过该参数,我们可以根据不同分辨率下的地图缩放级别来调整样式。

例如,当地图缩放到一定级别时,我们可以通过判断分辨率是否小于某个阈值来改变要素的显示方式。

AE中的层缩放和定位技巧

AE中的层缩放和定位技巧

AE中的层缩放和定位技巧Adobe After Effects(简称AE)是一款常用于视频后期制作的专业软件,它提供了丰富的功能和工具,让用户可以轻松编辑和创建各种特效。

其中,层缩放和定位是AE中常用的技巧之一,能够为视频制作带来更多的可能性。

本文将介绍AE中的层缩放和定位技巧,帮助您更好地应用于视频编辑和特效创作中。

一、层缩放技巧1. 快速缩放层在AE中,可以使用快捷键S选中层并打开“Transform”属性,其中Scale属性用于控制层的缩放比例。

按住Shift键,并用鼠标滚轮向上或向下滚动,可以快速调整层的缩放比例。

这一技巧非常方便,可以帮助您快速调整层的大小,提高制作效率。

2. 保持长宽比缩放有时候,我们需要保持层的长宽比例不变,而只缩放其中一个方向。

在AE中,可以通过按住Shift键的同时拖动层的边缘来实现。

这样,即使改变了层的宽度或高度,其长宽比例仍然保持不变,使得制作出来的特效更加自然和美观。

3. 缩放到特定数值除了使用鼠标滚轮或拖动边缘进行缩放调整之外,AE还支持直接输入数值进行缩放。

选中层后,在Scale属性中双击数值,输入想要的缩放比例即可。

这种精确的缩放方式可以让您更好地控制特效制作的效果,使得视频编辑更为精细和专业。

二、层定位技巧1. 移动层位置在AE中,可以使用快捷键P选中层并打开“Transform”属性,其中Position属性用于控制层的位置。

点击属性值旁边的表达式图标,可以打开表达式编辑器。

在表达式编辑器中,可以使用各种数学计算公式和变量,实现复杂的层定位效果。

2. 使用关键帧调整层位置在AE中,可以在时间轴上添加关键帧,控制层在不同时间点的位置变化。

选中层后,点击时间轴上的时刻,然后在属性栏中调整Position属性的数值,将其添加为关键帧。

通过将多个关键帧连起来,就可以实现层在时间上的位移,制作出流畅的动画效果。

3. 使用Null对象进行层定位在AE中,Null对象是一个没有可见内容的空白层,但它可以作为其他层的父层,用于子层的定位控制。

open layer 规格

open layer 规格

open layer 规格【实用版】目录1.Open Layer 简介2.Open Layer 规格概述3.Open Layer 规格详细内容4.Open Layer 的应用领域5.Open Layer 的未来发展前景正文【Open Layer 简介】Open Layer 是一款开源的 JavaScript 库,用于在网页上展示地图。

Open Layer 允许用户在自己的网站上快速、简单、灵活地创建地图应用,其代码遵循 MIT 许可证,可以自由使用、修改和分发。

Open Layer 具有良好的跨平台性和浏览器兼容性,可以在各种设备和浏览器上运行。

【Open Layer 规格概述】Open Layer 的规格主要包括以下几个方面:地图投影、地图坐标系、地图图层、地图交互和地图控件。

这些规格定义了如何在网页上展示地图,以及如何通过 JavaScript 实现地图的交互和控件。

【Open Layer 规格详细内容】1.地图投影:Open Layer 支持多种地图投影方式,如默卡托投影、兰伯特投影、圆锥投影等。

不同的投影方式适用于不同的地图应用场景,例如默卡托投影适用于一般的地理位置展示,兰伯特投影适用于大范围的地图展示。

2.地图坐标系:Open Layer 支持地理坐标系和投影坐标系两种方式。

地理坐标系使用经纬度表示地点,投影坐标系使用 x、y 坐标表示地点。

Open Layer 提供了一组坐标转换函数,方便开发者在地理坐标系和投影坐标系之间进行切换。

3.地图图层:Open Layer 支持点、线、面等多种地图图层,开发者可以根据需要添加和修改图层。

地图图层的样式和属性也可以自定义,例如设置图层的颜色、线宽等。

4.地图交互:Open Layer 提供了丰富的地图交互功能,如地图缩放、平移、旋转等。

开发者可以通过 JavaScript API 实现这些功能,为用户提供更好的地图使用体验。

5.地图控件:Open Layer 提供了多种地图控件,如缩放控件、平移控件、旋转控件等。

OpenLayers加载缩放控件使用方法详解

OpenLayers加载缩放控件使用方法详解

OpenLayers加载缩放控件使⽤⽅法详解本⽂实例为⼤家分享了OpenLayers加载缩放控件使⽤的具体代码,供⼤家参考,具体内容如下1、⼀般的地图打开都有放⼤、缩⼩和全图的导航条,以便于⽤户对地图的查看,下⾯我们将在OpenLayers中实现这⼀功能;2、在之前创建的空⽩站点下⾯新建⼀个html的页⾯,引⼊ol.js和ol.css⽂件,然后在body标签中创建⼀个div,作为地图加载的容器;3、代码实现<!DOCTYPE html><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title>加载并显⽰OSM地图</title><link href="../css/ol.css" rel="stylesheet" /><script src="../lib/ol/ol.js"></script><style type="text/css">#map .ol-zoomslider{background-color : transparent;top : 2.3em;}#map .ol-zoom-extent{top: 280px;}</style><script type="text/javascript">window.onload = function () {//实例化map对象并加载地图//使⽤Openlayers初始化⼀幅地图时,target、layers和view不可少var map = new ol.Map({//地图容器div的idtarget: 'map',//在地图容器中加载的图层layers: [//加载⽡⽚数据new yer.Tile({//⽡⽚的数据源source: new ol.source.OSM()})],//地图视图设置view: new ol.View({//地图中⼼点center: [0, 0],//地图初始显⽰级别zoom: 2})});//实例化ZoomSlider控件var zoomslider = new ol.control.ZoomSlider();//加载ZoomSlider控件到地图容器中map.addControl(zoomslider);//实例化ZoomToExtentvar zoomToExtent = new ol.control.ZoomToExtent({extent: [//Todo 这个范围应该怎么确定13100000, 4290000,13200000, 5210000]});//加载ZoomToExtent到map中map.addControl(zoomToExtent);}</script></head><body><div id="map"></div></body></html>4、运⾏结果此时我们打开地图时可以看见放⼤缩⼩和全图的导航条了:我们拖动中间的滑块可以放⼤缩⼩地图,单击E的图标可以直接定位到北京附近(之前设置的Extent属性的坐标在北京附近):以上就是本⽂的全部内容,希望对⼤家的学习有所帮助,也希望⼤家多多⽀持。

openlayers3入门教程

openlayers3入门教程

openlayers3⼊门教程openlayers3⼊门教程摘要OpenLayers 3对OpenLayers⽹络地图库进⾏了根本的重新设计。

版本2虽然被⼴泛使⽤,但从JavaScript开发的早期发展阶段开始,已⽇益现实出它的落后。

OL3已运⽤现代的设计模式从底层重写。

最初的版本旨在⽀持第2版提供的功能,提供⼤量商业或免费的⽡⽚资源以及最流⾏的开源⽮量数据格式。

与版本2⼀样,数据可以被任意投影。

最初的版本还增加了⼀些额外的功能,如能够⽅便地旋转地图以及显⽰地图动画。

OpenLayers 3同时设计了⼀些主要的新功能,如显⽰三维地图,或使⽤WebGL快速显⽰⼤型⽮量数据集,这些功能将在以后的版本中加⼊。

为了看清楚OpenLayers的Layer结构体系,先看下⾯的UML图。

1. <script type="text/javascript">2. window.onload = function () {3. //实例化map对象并加载地图4. var map = new ol.Map({5. //存放地图⽬标容器6. target: 'map',7. //加载图层8. layers: [9. //新建⼀个⽡⽚地图图层10. new yer.Tile({11. //⽡⽚地图数据源12. source: new ol.source.OSM()13. })14. ],15. //初始化视图16. view: new ol.View({17. //视图中⼼点坐标18. center: [12550000, 3680000],19. //缩放等级20. zoom: 8,21. //最⼩缩放等级22. minZoom: 6,23. //最⼤缩放等级24. maxZoom: 12,25. //地图旋转30度26. rotation: Math.PI/627. })28. });29.30. //获取地图的初始化信息31. var view = map.getView();32. var zoom = view.getZoom();33. var center = view.getCenter();34. var rotation = view.getRotation();35.36. //地图缩⼩37. document.getElementById("zoom-out").onclick = function () {38. //获取地图当前视图39. var view = map.getView();40. //获取地图当前缩放等级41. var zoom = view.getZoom();42. //每单击⼀次地图的缩放等级减⼀,以实现地图缩⼩43. view.setZoom(zoom - 1);44. };45.46. //地图放⼤47. document.getElementById("zoom-in").onclick = function () {48. //获取地图当前视图49. var view = map.getView();50. //获取地图当前缩放等级51. var zoom = view.getZoom();52. //每单击⼀次地图的缩放等级加⼀,以实现地图放⼤53. view.setZoom(zoom + 1);54. };55.56. //地图平移57. document.getElementById("panto").onclick = function () {58. //获取地图当前视图59. var view = map.getView();60. //指定要平移到的位置的坐标61. var position = ol.proj.fromLonLat([115.2341, 32.4652]);62. //重设地图中⼼点,实现平移63. view.setCenter(position);64. };65.66. //地图重置67. document.getElementById("restore").onclick = function () {68. //重置中⼼点位置为初始化位置69. view.setCenter(center);70. //重置旋转⾓度为初始化⾓度71. view.setRotation(rotation);72. //重置缩放等级为初始化缩放等级73. view.setZoom(zoom);74. };75. }76. 为地图添加弹出框(完整代码详见:)77. /**78. * Add a click handler to the map to render the popup.79. */80. map.addEventListener('click', function(evt) {81. var coordinate = evt.coordinate;82. var hdms = ol.coordinate.toStringHDMS(ol.proj.transform(83. coordinate, 'EPSG:3857', 'EPSG:4326'));84. content.innerHTML = '<p>你点击的坐标是:</p><code>' + hdms + '</code>';85. overlay.setPosition(coordinate);86. map.addOverlay(overlay);87. });88.89. </script>90. openlayers进阶学习——多标注显⽰/点击弹出框/图层控制/搜索定位/新增标注等91. 多标注显⽰92. 、多标注显⽰:通过Feature和Marker实现多点标注。

openlayers 比例尺范围

openlayers 比例尺范围

openlayers 比例尺范围OpenLayers是一个用于在网页上展示地理信息的开源JavaScript 库。

它提供了丰富的地图功能,包括缩放、平移、标记点、测量距离等。

在OpenLayers中,比例尺范围是一个重要的概念,它决定了地图上的距离与实际距离之间的关系。

比例尺范围指的是地图上一个像素代表实际距离的大小。

在OpenLayers中,比例尺范围的计算是根据地图的分辨率和投影方式进行的。

地图的分辨率是指地图上每个像素代表的实际距离,而投影方式决定了地图上的距离如何映射到实际距离。

在OpenLayers中,比例尺范围可以通过调整地图的分辨率来改变。

当地图的分辨率增大时,比例尺范围就变大,地图上的距离就会变小;相反,当地图的分辨率减小时,比例尺范围就变小,地图上的距离就会变大。

比例尺范围的大小通常以一个比例尺的形式表示,比如1:10000表示地图上的1个像素代表实际距离的10000分之一。

在OpenLayers中,比例尺范围的设置可以通过控件来实现。

比例尺控件是OpenLayers提供的一个常用控件,它可以在地图上显示当前比例尺范围的信息。

比例尺控件通常包括一个关于比例尺范围的标签,以及一些操作按钮,用于调整地图的分辨率。

除了比例尺控件,OpenLayers还提供了其他一些控件,用于帮助用户更好地使用地图。

例如,导航控件可以用来平移地图、缩放控件可以用来放大或缩小地图、鼠标位置控件可以用来显示鼠标在地图上的位置等。

这些控件可以根据需要进行配置,以满足用户的需求。

总结来说,OpenLayers中的比例尺范围是一个重要的概念,它决定了地图上的距离与实际距离之间的关系。

比例尺范围可以通过调整地图的分辨率来改变,而比例尺控件可以用来显示当前的比例尺范围。

在使用OpenLayers时,我们可以根据需要配置各种控件,以提供更好的地图使用体验。

setzoom()函数

setzoom()函数

setzoom()函数setzoom()函数通常用于改变地图或图形视图的比例尺或缩放级别。

这个函数可以用于各种编程语言和库,例如JavaScript和其地图库,如Google Maps或OpenLayers,或者Python的matplotlib等。

在JavaScript中,例如,如果你使用Google Maps API,你可以使用setZoom()方法来设置地图的缩放级别。

下面是一个简单的示例:javascriptvar map = new google.maps.Map(document.getElementById('map'), { center: {lat: -34.397, lng: 150.644},zoom: 8});// 设置缩放级别为14map.setZoom(14);在Python的matplotlib库中,你可以使用set_axis_比例尺()函数来改变图形的大小,但这不是严格意义上的"setzoom"函数,因为matplotlib 不直接提供这个函数。

下面是一个示例:pythonimport matplotlib.pyplot as pltfig, ax = plt.subplots()ax.plot([1, 2, 3, 4])ax.set_ylim(0, 10) # 设置y轴范围ax.set_xlim(0, 10) # 设置x轴范围ax.set_aspect('equal', adjustable='box') # 使x和y轴等比例plt.show()需要注意的是,不同的库和语言可能有不同的方法和参数来设置缩放或比例尺。

如果你是在特定的库或语言中遇到setzoom()函数,可以提供更多的上下文信息,以便我能够提供更具体的帮助。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 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);}}}。

相关文档
最新文档