Openlayers使用地图数据

合集下载

openlayer的source,和projection用法

openlayer的source,和projection用法

openlayer的source,和projection用法在OpenLayers中,source 和projection 是两个重要的概念。

1. Source(数据源):在OpenLayers 中,source 用于定义地图图层所使用的数据源。

OpenLayers 提供了多种不同类型的数据源,如矢量数据、栅格数据、瓦片数据等。

你可以根据需要选择适合的数据源类型,并配置相应的参数,例如URL、数据格式等。

以下是一个简单的使用矢量数据源的示例:```javascriptvar vectorSource = new ol.source.Vector({format: new ol.format.GeoJSON(),url: 'path/to/your/geojsonfile.json'});var vectorLayer = new yer.Vector({source: vectorSource});```2. Projection(投影):投影用于定义地图坐标系,OpenLayers 支持多种不同的地图投影。

在使用地图时,你需要明确地指定地图的投影,以确保地图数据正确显示在地图上。

以下是一个简单的示例,用于指定地图的投影:```javascriptvar map = new ol.Map({layers: [new yer.Tile({source: new ol.source.OSM()})],target: 'map',view: new ol.View({center: ol.proj.fromLonLat([37.41, 8.82]),zoom: 4,projection: 'EPSG:3857' // 定义地图投影为EPSG:3857})});```以上示例中,`ol.proj.fromLonLat` 用于将经纬度坐标转换为地图投影坐标。

OpenLayers二维地图使用教程

OpenLayers二维地图使用教程

OpenLayers1 OpenLayers简介OpenLayers是由MetaCarta公司开发的,用于WebGIS客户端的JavaScript包。

它实现访问地理空间数据的方法都符合行业标准,比如OpenGIS的WMS和WFS规范,OpenLayers 采用纯面向对象的JavaScript方式开发,同时借用了Prototype框架和Rico库的一些组件。

采用OpenLayers作为客户端不存在浏览器依赖性。

由于OpenLayers采用JavaScript语言实现,而应用于Web浏览器中的DOM(文档对象模型)由JavaScript实现,同时,Web浏览器(比如IE,FF等)都支持DOM。

OpenLayersAPIs采用动态类型脚本语言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 除了可以在浏览器中帮助开发者实现地图浏览的基本效果,比如放大(Zoom In)、缩小(Zoom Out)、平移(Pan)等常用操作之外,还可以进行选取面、选取线、要素选择、图层叠加等不同的操作,甚至可以对已有的OpenLayers 操作和数据支持类型进行扩充,为其赋予更多的功能。

例如,它可以为OpenLayers 添加网络处理服务WPS 的操作接口,从而利用已有的空间分析处理服务来对加载的地理空间数据进行计算。

openlayers 的 readfeatures

openlayers 的 readfeatures

OpenLayers 是一个开源的地图 JavaScript 库,它提供了一系列强大的地图显示和交互功能。

在 OpenLayers 中,readfeatures 方法是一个用于读取地图中用户绘制的要素的函数。

本文将从以下几个方面详细介绍 openlayers 的 readfeatures 方法:一、readfeatures 方法的基本介绍readfeatures 方法是 OpenLayers 中用于读取用户绘制的要素的函数。

用户在地图上进行绘制操作后,readfeatures 方法可以将绘制的要素读取出来,以便进行后续的操作。

readfeatures 方法一般接受一个参数,该参数是一个包含要素信息的对象。

二、readfeatures 方法的使用示例下面是一个简单的示例,演示了如何在 OpenLayers 中使用readfeatures 方法读取用户绘制的要素:```javascript// 创建一个绘制要素的交互对象var draw = new ol.interaction.Draw({source: source,type: 'Point'});// 将绘制要素的交互对象添加到地图中map.addInteraction(draw);// 绑定 drawend 事件,该事件在绘制结束时触发draw.on('drawend', function(event) {// 从绘制的要素中获取要素信息var feature = event.feature;// 调用 readfeatures 方法读取要素信息var features = readfeatures(feature);// 在控制台输出读取到的要素信息console.log(features);});```以上示例中,首先创建了一个绘制要素的交互对象 draw,并将其添加到地图中。

然后绑定了 drawend 事件,当用户完成绘制操作时会触发该事件。

openlayers 解析 geojson readfeatures

openlayers 解析 geojson readfeatures

在OpenLayers中,可以使用GeoJSON格式来读取和解析地理数据。

你可以使用ol.format.GeoJSON类来读取GeoJSON数据并将其转换为OpenLayers的几何对象。

下面是一个示例代码片段,演示如何使用OpenLayers读取GeoJSON数据并获取其中的要素:javascript复制代码import {Map, View, GeoJSON, Vector as VectorSource} from'ol';import {Feature, Point, Polygon} from'ol/geom';import {Style} from'ol/style';import {Vector as VectorLayer} from'ol/layer';// 创建地图和视图const map = new Map({target: 'map',layers: [new VectorLayer({source: new VectorSource({features: []})})],view: new View({center: [0, 0],zoom: 2})});// 读取GeoJSON数据fetch('path/to/geojson/file.geojson').then(response => response.json()).then(data => {const format = new GeoJSON();const features = format.readFeatures(data);// 遍历要素并将它们添加到地图中features.forEach(feature => {const geometry = feature.getGeometry();const style = new Style({fill: new ol.style.Fill({color: 'rgba(255, 255, 255, 0.1)'}),stroke: new ol.style.Stroke({color: '#ffcc33', width: 2}),image: new ol.style.Circle({radius: 7, fill: new ol.style.Fill({color:'#ffcc33'})})});feature.setStyle(style);map.getLayers().item(0).getSource().addFeature(feature);});});在上面的代码中,我们首先创建了一个空的地图和一个视图。

openlayers addfeatures方法

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);```在这个示例中,我们首先创建了一个地图对象,并设置了地图的初始层。

vue利用openlayers加载天地图和高德地图

vue利用openlayers加载天地图和高德地图

vue利⽤openlayers加载天地图和⾼德地图⽬录⼀、天地图部分1、在vue中安装openlayers⼆、⾼德地图部分⼀、天地图部分1、在vue中安装openlayersnpm i --save ol这⾥说的vue是基于脚⼿架构建的。

新建个页⾯,也就是vue⽂件,配置好路由。

接着就是可以直接放⼊我的代码运⾏显⽰了。

<template><div class="wrapper"><div>天地图</div><div class="map" id="olMap"></div></div></template><script>import "ol/ol.css";import {Tile as TileLayer } from "ol/layer";import XYZ from "ol/source/XYZ";import {defaults as defaultControls } from "ol/control";import Map from "ol/Map.js";import View from "ol/View.js";export default {data() {return {map: null,parser: null,};},mounted() {this.initMap();},methods: {initMap() {const map = new Map({target: "olMap",view: new View({center: [0, 0], //中⼼点经纬度zoom: 4, //图层缩放⼤⼩projection: "EPSG:4326",}),controls: defaultControls({zoom: true,attribution: false,rotate: false,}),});this.map = map;// 添加地图let url = "http://t{0-7}/DataServer?x={x}&y={y}&l={z}"; url = `${url}&T=vec_c&tk=替代你的key`;const source = new XYZ({url: url,projection: "EPSG:4326",});const tdtLayer = new TileLayer({source: source,});this.map.addLayer(tdtLayer);// 添加注记url = "http://t{0-7}/DataServer?x={x}&y={y}&l={z}"; url = `${url}&T=cva_c&tk=替代你的key`;const sourceCVA = new XYZ({url: url,projection: "EPSG:4326",});const tdtcvaLayer = new TileLayer({source: sourceCVA,});this.map.addLayer(tdtcvaLayer);},},};</script><style scoped>.map {width: 100%;height: 100vh;}</style>天地图就可以显⽰出来了。

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和工具来创建和控制地图应用程序。

二维地图的开发设计与维护(openLayer的使用及介绍)


2.2 缩放级别总数的确定方法:
a. 直接指定numZoomLevels,例如: numZoomLevels: 5 b. 由最大分辨率和最小分辨率的比值确定,最小 分辨率同2.1有三种方法可以确定:
b.1 直接指定minResolution b.2 直接指定maxScale b.3 由minExtent确定(minResolution需设置为
OpenLayers的操作
OpenLayers 除了可以在浏览器中帮助开发者实现地 图浏览的基本效果,比如放大(Zoom In)、缩小 (Zoom Out)、平移(Pan)等常用操作之外,还 可以进行选取面、选取线、要素选择、图层叠加等 不同的操作,甚至可以对已有的OpenLayers 操作和 数据支持类型进行扩充,为其赋予更多的功能。同 时,在OpenLayers提供的类库当中,它还使用了类 库Prototype.js 和Rico 中的部分组件,为地图浏览
其中的网址为地图服务的路径参数。(若要使用自己的地图 服务或本地图片资源,则需要自己构造或重写一个 yer的子类,并对其中的getUrl方法按既定规则 进行重写) 一个map对象可以添加多个layer对象,若希望添加多个layer 对象(如:laers(),也可以以数组方式添加。
OpenLayers JavaScript Mapping Library
瓦片数据的url OpenLayers所能够利用的地图数据资源“丰富多彩”,在 这方面提供给拥护较多的选择,比如WMS、WFS、 GoogleMap、KaMap、MS VirtualEarth、WorldWind等等。 当然,也可以用简单的图片作为源。
二维地图的开发设计与维护
OpenLayers简介
OpenLayers是由MetaCarta公司开发的,用于 WebGIS客户端的JavaScript包。

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 的瓦片源。

openlayers实现地图测距测面

openlayers实现地图测距测⾯本⽂实例为⼤家分享了openlayers实现地图测距测⾯的具体代码,供⼤家参考,具体内容如下项⽬背景vue-cli3.0public下html需要引⼊⽂件<link rel="stylesheet" href="<%= BASE_URL %>./css/gr-ol.css" type="text/css"><script src="<%= BASE_URL %>./js/ol.js" type="text/javascript"></script>这⾥地图为公共组件,⽅法写在公共组件的init⽅法⾥,kpst._this为地图对象调⽤//测距/⾯var draw = me.map._this.interactions.getArray()[10]me.map._this.removeInteraction(draw);if ( == '测距' || == '测⾯') {me.map._this.interactions.array_ = arr.slice(0, 10)if ( == '测距') {me.mtype = 'LineString'} else {me.mtype = 'Polygon'}me.map._this.measure(me.mtype) //map已挂载到vue原型Vue.prototype.map = map} else if ( == '清除') {me.map._this.clear()}⽅法挂载// 测距、⾯//创建⼀个当前要绘制的对象var sketch//创建⼀个帮助提⽰框对象var helpTooltipElement;//创建⼀个帮助提⽰信息对象var helpTooltip;//创建⼀个测量提⽰框对象var measureTooltipElement;//创建⼀个测量提⽰信息对象var measureTooltip;//继续绘制多边形的提⽰信息var continuePolygonMsg//继续绘制线段的提⽰信息var continueLineMsg//帮助提⽰信息var helpMsg//定义⽮量数据源var source = new ol.source.Vector();//定义⽮量图层var vector = new yer.Vector({source: source,style: new ol.style.Style({fill: new ol.style.Fill({color: 'rgba(255,255,255,0.2)'}),stroke: new ol.style.Stroke({color: '#e21e0a',width: 2}),image: new ol.style.Circle({radius: 5,fill: new ol.style.Fill({color: '#ffcc33'})})})});//创建⽐例尺控件var scaleLineControl = new ol.control.ScaleLine({units: 'metric',target: 'scalebar',className: 'ol-scale-line'});function measure(mtype) {sketch = new ol.Feature();// continuePolygonMsg = 'Click to continue drawing the polygon';// continueLineMsg = 'Click to continue drawing the line';//将⽮量图层添加到地图中kpst._this.removeLayer(vector);kpst._this.addLayer(vector);//添加⽐例尺控件kpst._this.removeControl(scaleLineControl);kpst._this.addControl(scaleLineControl);//⿏标移动触发的函数var pointerMoveHandler = function (evt) {//如果是平移地图则直接结束if (evt.dragging) {return;}//帮助提⽰信息helpMsg = 'Click to start drawing';if (sketch) {//获取绘图对象的⼏何要素var geom = sketch.getGeometry();//如果当前绘制的⼏何要素是多线段,则将绘制提⽰信息设置为多线段绘制提⽰信息 // if (geom instanceof ol.geom.Polygon) {// helpMsg = continuePolygonMsg;// } else if (geom instanceof ol.geom.LineString) {// helpMsg = continueLineMsg;// }}//设置帮助提⽰要素的内标签为帮助提⽰信息// if (helpTooltipElement)// helpTooltipElement.innerHTML = helpMsg;//设置帮助提⽰信息的位置// if (helpTooltip)helpTooltip.setPosition(evt.coordinate);//移除帮助提⽰要素的隐藏样式// $(helpTooltipElement).removeClass('hidden');removeClass(document.getElementsByClassName('tooltip')[0], 'hidden')};//触发pointermove事件kpst._this.on('pointermove', pointerMoveHandler);//当⿏标移除地图视图的时为帮助提⽰要素添加隐藏样式document.querySelector('.ol-viewport').onmouseout = function () {addClass(document.getElementsByClassName('tooltip')[0], 'hidden')}// 判断class有⽆function hasClass(ele, cls) {if (ele) {cls = cls || '';if (cls.replace(/\s/g, '').length == 0) return false; //当cls没有参数时,返回falsereturn new RegExp(' ' + cls + ' ').test(' ' + ele.className + ' ');}}//添加classfunction addClass(ele, cls) {if (!hasClass(ele, cls) && ele) {ele.className = ele.className == '' ? cls : ele.className + ' ' + cls;}}// 去除classfunction removeClass(ele, cls) {if (hasClass(ele, cls) && ele) {var newClass = ' ' + ele.className.replace(/[\t\r\n]/g, '') + ' ';while (newClass.indexOf(' ' + cls + ' ') >= 0) {newClass = newClass.replace(' ' + cls + ' ', ' ');}ele.className = newClass.replace(/^\s+|\s+$/g, '');}}//定义⼀个交互式绘图对象var draw;//添加交互式绘图对象的函数function addInteraction() {//创建⼀个交互式绘图对象draw = new ol.interaction.Draw({//绘制的数据源source: source,//绘制类型type: mtype,//样式style: new ol.style.Style({fill: new ol.style.Fill({color: 'rgba(255,255,255,0.2)'}),stroke: new ol.style.Stroke({color: 'rgba(0,0,0,0.5)',lineDash: [10, 10],width: 2}),image: new ol.style.Circle({radius: 5,stroke: new ol.style.Stroke({color: 'rgba(0,0,0,0.7)'}),fill: new ol.style.Fill({color: 'rgba(255,255,255,0.2)'})})})});//将交互绘图对象添加到地图中kpst._this.addInteraction(draw);//创建测量提⽰框createMeasureTooltip();//创建帮助提⽰框createHelpTooltip();//定义⼀个事件监听var listener;//定义⼀个控制⿏标点击次数的变量var count = 0;//绘制开始事件draw.on('drawstart', function (evt) {//The feature being drawn.sketch = evt.feature;//提⽰框的坐标var tooltipCoord = evt.coordinate;//监听⼏何要素的change事件//Increases the revision counter and dispatches a 'change' event.listener = sketch.getGeometry().on('change', function (evt) {//The event target.//获取绘制的⼏何对象var geom = evt.target;//定义⼀个输出对象,⽤于记录⾯积和长度var output;if (geom instanceof ol.geom.Polygon) {kpst._this.removeEventListener('singleclick');kpst._this.removeEventListener('dblclick');//输出多边形的⾯积output = formatArea(geom);//Return an interior point of the polygon.//获取多变形内部点的坐标tooltipCoord = geom.getInteriorPoint().getCoordinates();} else if (geom instanceof ol.geom.LineString) {//输出多线段的长度output = formatLength(geom);//Return the last coordinate of the geometry.//获取多线段的最后⼀个点的坐标tooltipCoord = geom.getLastCoordinate();}//设置测量提⽰框的内标签为最终输出结果// if (measureTooltipElement)measureTooltipElement.innerHTML = output;//设置测量提⽰信息的位置坐标// if (measureTooltip)measureTooltip.setPosition(tooltipCoord);});//地图单击事件kpst._this.on('singleclick', function (evt) {//设置测量提⽰信息的位置坐标,⽤来确定⿏标点击后测量提⽰框的位置// if (measureTooltip)measureTooltip.setPosition(evt.coordinate);//如果是第⼀次点击,则设置测量提⽰框的⽂本内容为起点if (count == 0 && measureTooltipElement) {measureTooltipElement.innerHTML = "起点";}//根据⿏标点击位置⽣成⼀个点var point = new ol.geom.Point(evt.coordinate);//将该点要素添加到⽮量数据源中source.addFeature(new ol.Feature(point));//更改测量提⽰框的样式,使测量提⽰框可见measureTooltipElement.className = 'tooltip tooltip-static';//创建测量提⽰框createMeasureTooltip();//点击次数增加count++;});//地图双击事件kpst._this.on('dblclick', function (evt) {//根据var point = new ol.geom.Point(evt.coordinate);source.addFeature(new ol.Feature(point));});}, this);//绘制结束事件draw.on('drawend', function (evt) {count = 0;//设置测量提⽰框的样式measureTooltipElement.className = 'tooltip tooltip-static';//Set the offset for this overlay.//设置偏移量measureTooltip.setOffset([0, -7]);//清空绘制要素sketch = null;//清空测量提⽰要素measureTooltipElement = null;//创建测量提⽰框createMeasureTooltip();//Removes an event listener using the key returned by on() or once(). //移除事件监听ol.Observable.unByKey(listener);//移除地图单击事件kpst._this.removeEventListener('singleclick');}, this);}//创建帮助提⽰框function createHelpTooltip() {//如果已经存在帮助提⽰框则移除if (helpTooltipElement) {helpTooltipElement.parentNode.removeChild(helpTooltipElement);}//创建帮助提⽰要素的divif (!helpTooltipElement)helpTooltipElement = document.createElement('div');//设置帮助提⽰要素的样式helpTooltipElement.className = 'tooltip hidden';//创建⼀个帮助提⽰的覆盖标注helpTooltip = new ol.Overlay({element: helpTooltipElement,offset: [15, 0],positioning: 'center-left'});//将帮助提⽰的覆盖标注添加到地图中kpst._this.addOverlay(helpTooltip);}//创建测量提⽰框function createMeasureTooltip() {//创建测量提⽰框的div// if (!measureTooltipElement)measureTooltipElement = document.createElement('div');measureTooltipElement.setAttribute('id', 'lengthLabel');//设置测量提⽰要素的样式measureTooltipElement.className = 'tooltip tooltip-measure';//创建⼀个测量提⽰的覆盖标注measureTooltip = new ol.Overlay({element: measureTooltipElement,offset: [0, -15],positioning: 'bottom-center'});//将测量提⽰的覆盖标注添加到地图中kpst._this.addOverlay(measureTooltip);}//格式化测量长度var formatLength = function (line) {//定义长度变量var length;//计算平⾯距离length = Math.round(line.getLength() * 100) / 100;//定义输出变量var output;//如果长度⼤于1000,则使⽤km单位,否则使⽤m单位if (length > 100) {output = (Math.round(length / 1000 * 100) / 100) + ' ' + 'km'; //换算成KM单位} else {output = (Math.round(length * 100) / 100) + ' ' + 'm'; //m为单位}return output;};//格式化测量⾯积var formatArea = function (polygon) {//定义⾯积变量var area;//获取平⾯⾯积area = polygon.getArea();// }//定义输出变量var output;//当⾯积⼤于10000时,转换为平⽅千⽶,否则为平⽅⽶if (area > 1000) {output = (Math.round(area / 1000000 * 100) / 100) + ' ' + 'km<sup>2</sup>';} else {output = (Math.round(area * 100) / 100) + ' ' + 'm<sup>2</sup>';}return output;};//添加交互绘图对象addInteraction();}// 清除提⽰对象function clear() {source.clear()kpst._this.getOverlays().clear();kpst._this.removeLayer(vector);kpst._this.removeControl(scaleLineControl);}kpst._this.measure = measurekpst._this.clear = clear以上就是本⽂的全部内容,希望对⼤家的学习有所帮助,也希望⼤家多多⽀持。

  1. 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
  2. 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
  3. 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。

Openlayers使用地图数据
[摘要]针对小型应用程序使用地图数据量小的问题,采用基础图层并对影像数据进行数字化。

[关键词] openlayers 地图数据瓦片数据
openlayers是由metacarta公司开发的,用于webgis客户端的javascript包。

它实现访问地理空间数据的方法都符合行业标准,比如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等。

也可以用简单的图片作为源。

在做gis项目时一个地图能使得应用程序变得更漂亮,对于一些小型的应用程序就不必
花大笔的钱去购买地图数据。

我们可以采用以下的方式来实现。

如果想从本地访问瓦片数据的话,首先需要解决的问题是从一些公共地图服务中获取瓦片数据。

在这里将使用工具
/?page_id=66下载地图的瓦片数据。

瓦片数据下载到本地之后,可以看到瓦片的数据命名
“m_14_13519_6253.png”,其中m后面的14代表的目前的缩放级别,“13519”代表的是瓦片数据的横坐标,“6253”代表的是瓦片数据的纵坐标。

对于google maps用的是墨卡托投影方式,将地图投影成了一个40075016.685578488?m的正方形坐标的形式,然后根据缩放级别将这个正方形分割成不不同粒度的小正方形,这种分割的形式采用的是四叉树索引的方式进行。

具体的分割如下图所示。

首先在level 0级别的时候,就是将这个正方形划分为一个256像素的图片,如果化成米的形式的话,就是40075016.685578488
的正方形,从这里可以计算出比例为:40075016.685578488/256 = 156543.033928041(米/像素)。

对于level 1级别时,然后再将这个正方形划分为一个4个256像素的正方形,此时计算出的比例为:40075016.685578488/512 = 78271.51696402(米/像素)。

对于openlayers来说,首先会向wms服务发送一个请求,这个请求会有一个bbox参数,参数的形式是这个box的左上角坐标和右下角坐标的值,对于后来服务来说,就是将这个box的图片发送到前台去显示。

对于要使用本地的瓦片数据,根据上面对于瓦片数
据的命名方式我们可以知道需要求三个参数:缩放级别 zoom、横坐标 x和纵坐标的值 y。

而对于请求来说,只有bbox的值,所以需要根据根据bbox的值来求出x,y和缩放级别的值zoom。

首先从前台来说,展现的总图片应该是一个360°×360°的正方形的图片,这是对于缩放级别为一级的来说的;对于一个bbox中的经纬度,可以计算出缩放级别:
java代码:
double mapunit = 360/(x1-x0);//156543.033929687
double z = math.log(mapunit)/math.log(2);
long zoom = math.round(z);
计算出缩放级别之后,然后根据公式x = ((20037508.343 * 2 * ( x0 + 180 ) / 360 ) / pixelresolution)/256可以计算出x的坐标,同理根据公式y = ((20037508.343 * 2 * ( y0 + 90 ) / 360 ) / pixelresolution)/256可以计算出y的坐标,根据计算结果,可以直接访问到这个缩放级别的的256×256的图片,然后用openlayer将图片展现到前天的界面中来。

关于javascript代码如下:
javascript code :
function init(){
map = new openlayers.map(“map”,{numzoomlevels :
5,minscale:216281.173********,restrictedextent: extent });
map.maxextent = new openlayers.bounds(-180, -90, 180, 270);
var ol_wms = new yer.wms(
“basic map”,
“test”,
{layers: “basic”,format:
“image/png”},{transitioneffect: resize’}
);
map.addlayers([ol_wms]);
selectcontrol = new
openlayers.control.selectfeature(layer);
map.addcontrol(selectcontrol);
selectcontrol.activate();
map.addcontrol(new yerswitcher()); map.zoomtomaxextent();
}
如上述代码所属,在前台添加一个wsm的图层,他会想后台发送一个请求,这个请求参数是一个bbox,然后根据请求过来的参数进行分析,计算出需要返回给前台的图片的名称。

上述过程能够完成一个地图底图的应用,如果需要将显示相关信息的话,可以将点信息存数到数据库中或者是文本文件中,然后在使用openlayer的vector图层添加上去。

var layer = new yer.vector(“pois”, { strategies: [new openlayers.strategy.bbox({resfactor: 1.1})],
protocol: new openlayers.protocol.http({
url:“textlayer”,
format: new openlayers.format.text()
})
});
如果是wgs1984的坐标体系的话,需要将坐标进行简单的转换,对于经度来说,和之前的一样,而对于纬度来说,首先换算成莫非托投影形式,然后将换成[-180,90,180,270]的坐标形式,转换算法如下:
x = math.log(math.tan((90 + latitude) * math.pi / 360)) / (math.pi / 180) * 20037508.343 / 180
x = x+ 20037508.343) * 360 / (20037508.343 * 2)– 90
最后这些都会添加到地图上,形式一个与业务相关的地图信息系统。

这样的实现方式可以满足一些只需要底图数据的系统。

参考文献:
[1]
/webgis8/archive/2010/11/24/1887168 .html.
[2]
/view/eb91573610661ed9ad51f3c5.html .
注:本文中所涉及到的图表、注解、公式等内容请以pdf格式阅读原文。

相关文档
最新文档