openlayers基本功能及案例地址
Openlayers经典例子
案例地址 (2)
一. Popup (2)
二、图层叠加 (3)
三、编辑功能 (5)
四、鹰眼 (7)
五、书签及样式 (7)
六、改变显示内容 (9)
七、SLD (9)
八、动画效果 (10)
九、获得属性 (11)
十、局部放大 (12)
十一、记录上次操作历史 (12)
十二、鼠标滚轮 (13)
十三、鼠标坐标 (13)
十四、标签 (14)
十五、全屏 (14)
十六、显示缩放比例 (15)
案例地址
/releases/OpenLayers-2.10/examples/ /dev/examples/
一.Popup
/dev/examples/sundials.html
/dev/examples/sundials-spherical-mercator.html
/dev/examples/select-feature-openpopup.html 二、图层叠加
/dev/examples/layerswitcher.html
/dev/examples/wmts-getfeatureinfo.html
/dev/examples/wmts-capabilities.html
/dev/examples/wmst.html
三、编辑功能
/dev/examples/wfs-snap-split.html
/dev/examples/snap-split.html
四、鹰眼
五、书签及样式
/dev/examples/styles-unique.html
/dev/examples/styles-context.html
六、改变显示内容
七、SLD
/dev/examples/SLDSelect.html
八、动画效果
/dev/examples/rotate-features.html 九、获得属性
/dev/examples/osm-layer.html 十、局部放大
/dev/examples/navtoolbar.html 十一、记录上次操作历史
/dev/examples/navigation-history.html 十二、鼠标滚轮
/dev/examples/mousewheel-interval.html 十三、鼠标坐标
/dev/examples/mouse-position.html 十四、标签
十五、全屏
十六、显示缩放比例
/dev/examples/fractional-zoom.html。
OpenLayers 类分析(一)
1.4、OpenLayer.Map 中的事件处理器 events
在 OpenLayer.Map 类初始化时,Map.events 被直接创建了一个事件管理类 OpenLayer.Events,并和 id 为“map”的 div 完成绑定。由 handleBrowserEvent 函数接收 map 上的消息,并发给 listener 队列来处理。
Handler -callbacks 1 +register() +unregister() +activate() +deactivate() +callback()
Handler.Click
在 Control.Click 的 initialize 中,创建了用于事件处理的 Handler.Click 类,并准备好回调函数 callbacks。 在 Control 调用 activate()函数时,Handler.Click 完成和 div 的消息绑定。当收到消息后, 先由 Handler.Click 处理,再传给回调函数 callbacks 。在 callbacks 中完 成消息显示功能。
监听函数 Function(feature) Function(feature)
允许框选 feature 限制选择 feature 的开关
说明 选择 feature 时触发 取消选择 feature 时触发
Handle
OpenLayers.Handler
指定绘制的图形的类型,如:
OpenLayers.Handler.Point
/path/polygon 等.
Options:
内容见下表
Options:
属性: Properties multi
openlayers学习之-----入门篇
openlayers学习之-----⼊门篇openlayers官⽹:中⽂参考⽂档:中⽂教程:找到⼀些相关博客:【如果有⼈发现更多中⽂⽂档或教程,多多分享哦~】1、什么是WebGISGIS(Geographic Information System,地理信息系统)是⼀种采集、处理、储存、管理、分析、输出地理空间数据及其属性信息的计算机信息系统。
WebGIS(⽹络地理信息系统)是⼀种在Internet或Intranet环境下基于HTTP协议的⽤来存储、管理、分析、发布和共享地理信息的B/S(浏览器/服务器)模式分布式计算机应⽤系统2、什么是OpenLayersOpenLayers 是⼀个专为Web GIS 客户端开发提供的JavaScript 类库包,⽤于实现标准格式发布的地图数据访问。
3、⼀些地理信息相关名词地理坐标系(Geographic coordinate system):使⽤三维球⾯来定义地球表⾯位置。
投影坐标系(Projected coordinate systems):基于地理坐标系,把三维坐标系转为⼆维,⽅便在地图或者屏幕上显⽰。
EPSG:4326 (WGS84): WGS84 是⽬前最流⾏的地理坐标系统。
每个坐标系统都会被分配⼀个 EPSG 代码,EPSG:4326 是 WGS84 的代码。
4、快速开始openlayers第⼀次使⽤在vue脚⼿架中,先安装:cnpm install ol官⽹快速⼊门例⼦~<template><div><h5>第⼀个地图:</h5><div id="map" ref="myMap" class="map"></div></div></template><script>import 'ol/ol.css';import Map from 'ol/Map';import View from 'ol/View';import {fromLonLat} from 'ol/proj';import {Tile as TileLayer} from "ol/layer";import OSM from 'ol/source/OSM';export default {data() {return {map: null}},mounted() {this.initMap()},methods: {initMap() {const myMap = this.$refs.myMap;this.map = new Map({target: myMap,layers: [new TileLayer({source: new OSM()})],view: new View({center: fromLonLat([37.41, 8.82]),zoom: 4})});}}}</script><style scoped>.map{width: 1000px;height: 500px;margin-top: 30px; }</style>效果:。
openlayers经典例子
Openlayers经典例子案例地址 (2)一. Popup (2)二、图层叠加 (3)三、编辑功能 (5)四、鹰眼 (7)五、书签及样式 (7)六、改变显示内容 (9)七、SLD (9)八、动画效果 (10)九、获得属性 (11)十、局部放大 (12)十一、记录上次操作历史 (12)十二、鼠标滚轮 (13)十三、鼠标坐标 (13)十四、标签 (14)十五、全屏 (14)十六、显示缩放比例 (15)案例地址/releases/OpenLayers-2.10/examples/ /dev/examples/一.Popup/dev/examples/sundials.html/dev/examples/sundials-spherical-mercator.html/dev/examples/select-feature-openpopup.html 二、图层叠加/dev/examples/layerswitcher.html/dev/examples/wmts-getfeatureinfo.html/dev/examples/wmts-capabilities.html/dev/examples/wmst.html三、编辑功能/dev/examples/wfs-snap-split.html/dev/examples/snap-split.html四、鹰眼五、书签及样式/dev/examples/styles-unique.html/dev/examples/styles-context.html六、改变显示内容七、SLD/dev/examples/SLDSelect.html八、动画效果/dev/examples/rotate-features.html 九、获得属性/dev/examples/osm-layer.html 十、局部放大/dev/examples/navtoolbar.html 十一、记录上次操作历史/dev/examples/navigation-history.html 十二、鼠标滚轮/dev/examples/mousewheel-interval.html 十三、鼠标坐标/dev/examples/mouse-position.html 十四、标签/dev/examples/mm.html十五、全屏十六、显示缩放比例/dev/examples/fractional-zoom.html。
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,但是默认值是书面日后再细究。
gis openlayers 详解
(一)项目介绍网址:/OpenLayers 是由MetaCarta公司开发的,用于WebGIS客户端的JavaScript包,目前的最高版本是2.5 V,通过BSD License 发行。
它实现访问地理空间数据的方法都符合行业标准,比如OpenGIS的WMS和WFS规范,OpenLayers采用纯面向对象的JavaScript方式开发,同时借用了Prototype框架和Rico库的一些组件。
采用OpenLayers作为客户端不存在浏览器依赖性。
由于OpenLayers采用JavaScript语言实现,而应用于Web浏览器中的DOM(文档对象模型)由JavaScript实现,同时,Web 浏览器(比如IE,FF等)都支持DOM 。
OpenLayers APIs采用动态类型脚本语言JavaScript编写,实现了类似与Ajax功能的无刷新更新页面,能够带给用户丰富的桌面体验(它本身就有一个Ajax类,用于实现Ajax功能)。
目前,OpenLayers所能够支持的Format有:XML、GML、GeoJSON、GeoRSS、JSON、KML、WFS、WKT(Well-Known Text)。
在OPenlayers.Format名称空间下的各个类里,实现了具体读/写这些Format的解析器。
OpenLayers所能够利用的地图数据资源“丰富多彩”,在这方面提供给拥护较多的选择,比如WMS、WFS、GoogleMap、KaMap、MSVirtualEarth、WorldWind等等。
当然,也可以用简单的图片作为源。
第一次使用OpenLayers:先到它的官方网站下载他的压缩包,解压后可以看到其中的一些目录和文件,拷贝目录下的OpenLayer.js、根目录下的lib目录、根目录下的img目录到你网站的Scripts目录下(当然,这个只是例子,您网站的目录结构您自己说得算,只要保证OpenLayers.js,/lib,/img在同一目录中即可)。
openlayers addfeatures方法
openlayers addfeatures方法摘要:1.OpenLayers 简介2.addFeatures 方法的作用3.addFeatures 方法的使用示例4.总结正文:1.OpenLayers 简介OpenLayers 是一个开源的JavaScript 库,用于在网页上展示地图。
它允许用户在网页上展示多种地图来源的地图,包括矢量地图、栅格地图和地图标记等。
OpenLayers 提供了丰富的API,以便用户能够根据自己的需求定制地图。
2.addFeatures 方法的作用在OpenLayers 中,addFeatures 方法是地图对象(Map)的一个方法,用于向地图中添加地理特征。
这些特征可以是点、线或多边形等地理对象。
通过使用addFeatures 方法,用户可以在地图上展示各种地理信息。
3.addFeatures 方法的使用示例下面是一个使用addFeatures 方法的简单示例:```javascript// 创建一个地图对象var map = new ol.Map({target: "map",layers: [new yer.Tile({source: new ol.source.OSM()})]});// 创建一个矢量数据源var vectorSource = new ol.source.Vector();// 创建一个点地理对象var pointFeature = new ol.Feature({geometry: new ol.geom.Point(ol.proj.fromLonLat([116.407526, 39.90403]))});// 将点地理对象添加到矢量数据源vectorSource.addFeature(pointFeature);// 使用addFeatures 方法将矢量数据源添加到地图map.addFeatures(vectorSource);```在这个示例中,我们首先创建了一个地图对象,并设置了地图的初始层。
openlayers技术开发文档
如何多个矢量图利用数据库查询数据的方式展示Geoserver单个图层发布基于菜鸟的教程,高手勿喷,新建Workspaces【工作空间,决定了你调用自己数据库访问地图数据的URL】例如:Namespace URI 就是决定你下一步调用的地图的URL.Default workspace 是否设置为默认的工作空间新建Stores【资源库】这个东西,决定了你访问的方式,例如连接oracle数据的这个geoserver 本身是没有附带到本身的lib内,下载的地址可以在谷歌搜索【gt-jdbc-oracle】不建议使用百度搜索【记住版本要对应,需自查】这是谷歌搜索的结果此处介绍下Stores的链接参数新建Layers【你访问资源库里面那个资源】上面的Declared SRS 因为我的地图格式是EPSG:2002,所以采用的是2010,采用EPSG:4326, 导致我附加的样式,不能显示,希望各位引以为戒,导入数据库图的时候,先看看SRS标准是什么。
下面是访问后的地图默认的应该是黑色线条单个的就介绍到这里,网上很多例子,也可以找我私聊,群号154260284 Gerserver 单个图层组的发布基于上面的,前面的两个步骤,我就不解释了,为什么要写下面的例子呢,是因为多个图层访问,会导致JVM虚拟内存过大,我一次使用了13个地图,叠加显示,JVM死掉,所以采用下面的方法。
为什么使用这个,因为这个效率高,浏览的效果也好。
如下图所示:全省GIS地图塔杆,微气象数据展示。
那个微气象是动态的哦,不是静态的,很漂亮,可惜静态图看不出效果下面的火灾是我随便定义的,坐标系,火灾里面的火也是动态图片哦。
至于朋友们做到东西,为什么不能展示gif图片,我告诉你,因为你的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中用于控制图层渲染的参数。
通过样式,开发者可以设置图层的颜色、线条粗细、透明度等属性,从而影响图层的显示效果。
样式可以应用于不同的图层类型,如点状图层、线状图层、面状图层等。
【转】OpenLayers
【转】OpenLayersOpenLayers:OpenLayers是一个开源的js框架,用于在您的浏览器中实现地图浏览的效果和基本的zoom,pan等功能。
OpenLayers支持的地图来源包括了WMS,GoogleMap,KaMap,MSVirtualEarth等等,您也可以用简单的图片作为源,在这一方面OPenLayers提供了非常多的选择。
WMS服务:1 OGC组织及其开放性规范为了实现异构的地理空间信息及GIS处理功能的互操作的集成,OGC(Open GIS Consortium)一直致力于寻求一种方式,将地理信息系统技术、分布处理技术、面向对象技术、数据库设计以及实时信息处理方法有效地结合起来,实现分布式异构平台上GIS互操作[2]。
OGC制定了开放地理信息互操作规范(OGIS),试图通过共同的开放地理数据模型(OGM)和OGIS参考模型(ORM)来实现互操作。
其目的是希望提出一个可扩展的、基于各种标准的、能无缝集成各种在线空间处理和位置服务的框架,使得分布式空间处理系统能通过XML和HTTP技术进行交互,并为各种在线空间数据资源,来自传感器的信息、空间处理服务和位置服务和基于Web的发现、访问、整合、分析、利用和可视化提供互操作框架[3]。
OGC的中心主题是共享信息和提供服务,在OGC的抽象规范中共有17个主题,其中主题12是开放式Web Services空间信息服务框架[4,5],它包含一系列的抽象规范和实现规范。
概括地来讲,OGC OpenGIS Web Services(OWS)包括三个主要的地理信息服务即Web Map Service(WMS)、Web Feature Service(WFS)和Web Coverage Service(WCS)。
除此之外,还包括Simple Feature Specillcation(SFS),Geography Markup Language(GML)等。
openlayers tileloadfunction 使用示例
openlayers tileloadfunction 使用示例OpenLayers 是一个开源的 JavaScript 库,用于在 web 应用程序中创建交互式地图。
在 OpenLayers 中,TileLoadFunction 是一个回调函数,它将在每个地图瓦片加载时被调用。
下面是一个使用 TileLoadFunction 的简单示例:javascriptimport Map from 'ol/Map';import View from 'ol/View';import TileLayer from 'ol/layer/Tile';import OSM from 'ol/source/OSM';// 创建地图视图const view = new View({center: [0, 0],zoom: 2,});// 创建 OSM 瓦片图层const tileLayer = new TileLayer({source: new OSM(),});// 创建地图对象,并将图层添加到地图中const map = new Map({target: 'map',layers: [tileLayer],view: view,});// 添加 TileLoadFunctiontileLayer.on('tileload', function(event) {console.log('Tile loaded:', event.tile.src);});在这个示例中,我们首先创建了一个新的 Map 对象,并设置了一个初始的视图。
然后,我们创建了一个新的 TileLayer 对象,并将其添加到地图中。
在创建 TileLayer 时,我们指定了source 为OSM,即OpenStreetMap 的瓦片源。
