Openlayers使用地图数据
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二维地图使用教程

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 是一个开源的地图 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格式来读取和解析地理数据。
你可以使用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方法摘要: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加载天地图和⾼德地图⽬录⼀、天地图部分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以上就是本⽂的全部内容,希望对⼤家的学习有所帮助,也希望⼤家多多⽀持。
openlayer中addoverlay的用法

openlayer中addoverlay的用法OpenLayers中addOverlay方法的用法OpenLayers是一个强大的开源JavaScript库,用于在Web浏览器中创建互动地图应用程序。
它提供了丰富的功能和工具,能够轻松地集成地图、标注、图层等元素,并实现与地图的交互。
其中,addOverlay方法是OpenLayers库中一个非常实用的功能,用于在地图上添加覆盖层。
覆盖层是地图上的一个元素,不会随地图的缩放和平移而发生变化。
它可以用于在地图上显示额外的信息、标记特定的位置、展示地理数据等。
addOverlay方法的作用就是向地图中添加一个覆盖层。
使用addOverlay方法的语法如下:```map.addOverlay(overlay)```其中,map是OpenLayers地图对象,overlay是要添加的覆盖层对象。
要使用addOverlay方法,首先需要创建一个Overlay对象,可以使用OpenLayers中的Overlay类来实现。
Overlay类有几个重要的属性和方法,以下是创建一个Overlay对象的基本步骤:1. 创建要显示在地图上的HTML元素或DOM对象。
2. 创建一个Overlay对象,并将HTML元素或DOM对象作为参数传递给构造函数。
3. 根据需要设置Overlay对象的其他属性,如位置、大小、偏移量等。
4. 使用map.addOverlay(overlay)将Overlay对象添加到地图中。
下面是一个示例,演示如何使用OpenLayers中的addOverlay方法:```JavaScript// 创建地图var map = new OpenLayers.Map("map");// 创建地图图层var baseLayer = new yer.OSM();map.addLayer(baseLayer);// 创建覆盖层var overlayElement = document.createElement("div");overlayElement.innerHTML = "这是一个覆盖层";overlayElement.style.width = "100px";overlayElement.style.height = "50px";overlayElement.style.backgroundColor = "rgba(255, 255, 255, 0.5)";var overlay = new OpenLayers.Overlay({element: overlayElement,position: new OpenLayers.LonLat(0, 0).transform("EPSG:4326", "EPSG:900913"),size: new OpenLayers.Size(100, 50),offset: new OpenLayers.Pixel(-50, -25),autoPan: true});// 将覆盖层添加到地图中map.addOverlay(overlay);```在这个示例中,首先创建了一个简单的地图对象,并添加了一个OSM图层。
openlayers foreachfeature 用法 -回复

openlayers foreachfeature 用法-回复OpenLayers是一个开源的JavaScript库,用于显示地理空间数据在Web 上进行交互。
其提供了丰富的功能和工具,包括地图展示、标注、交互、空间查询等。
本文将重点介绍OpenLayers中的foreachFeature方法的用法和功能。
foreachFeature方法是OpenLayers中一个非常有用的方法,它可以轻松地对地图中的每个要素进行迭代并执行相应的操作。
无论是在初始化地图时加载要素,还是在用户与地图进行交互时更新要素,foreachFeature 方法都可以帮助开发者处理要素数据。
下面我们将一步一步回答有关foreachFeature方法的用法和使用步骤。
第一步:创建地图对象和要素图层。
在使用foreachFeature方法之前,我们首先需要创建一个OpenLayers 地图对象,并创建一个要素图层用于存储要素数据。
要素图层可以包含多个要素。
javascriptvar map = new ol.Map({target: 'map',layers: [new yer.Tile({source: new ol.source.OSM()})],view: new ol.View({center: ol.proj.fromLonLat([0, 0]),zoom: 4})});var vectorLayer = new yer.Vector({source: new ol.source.Vector()});map.addLayer(vectorLayer);第二步:创建要素并加入要素图层。
接下来,我们可以创建一些要素,并将它们添加到要素图层中。
要素可以是点、线、面等地理空间对象。
javascriptvar features = [new ol.Feature({geometry: new ol.geom.Point(ol.proj.transform([0, 0],'EPSG:4326', 'EPSG:3857')),name: 'Point 1'}),new ol.Feature({geometry: new ol.geom.Point(ol.proj.transform([10, 10], 'EPSG:4326', 'EPSG:3857')),name: 'Point 2'}),new ol.Feature({geometry: new ol.geom.Point(ol.proj.transform([20, 20], 'EPSG:4326', 'EPSG:3857')),name: 'Point 3'})];vectorLayer.getSource().addFeatures(features);第三步:使用foreachFeature方法迭代要素并执行操作。
Openlayers绘制地图标注

Openlayers绘制地图标注本⽂实例为⼤家分享了Openlayers绘制地图标注的具体代码,供⼤家参考,具体内容如下1、标注的简介标注简单点说就是通过图标、⽂字等⽅式将我们想展⽰的内容显⽰在地图上,着重突出⼈们所关注的专题内容,从⽽为⽤户提供个性化的地图服务;2、标注⽅式在Openlayers3⾥⾯,有两种对地理位置点进⾏标注的⽅法,⼀种是通过创建⽮量图层然后设置其样式的⽅法,还有⼀种就是创建Overlay覆盖层的⽅法;对于第⼀种⽅式,本质上创建的还是⼀个⽮量对象,只是将其表现形式更换了⼀下,⽤Style样式进⾏包装;⽽第⼆种⽅式则是创建的⼀个单独的覆盖层,然后通过设置其属性进⾏某些信息的展⽰;⾄于具体使⽤哪⼀种⽅式,还是得根据具体来看;3、代码实现<!DOCTYPE html><html xmlns="/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><title></title><script src="../lib/jquery/jquery.js"></script><script src="../lib/ol/ol.js"></script><link href="../css/ol.css" rel="stylesheet" /><style type="text/css">body, html, div, ul, li,img{border:none;padding:0px;margin:0px;}#menu{width:100%;height:20px;padding:5px 10px;left:10px;font-size:14px;font-family:"微软雅⿊";}.checkbox{margin:5px 15px;}.marker{width:20px;height:20px;border:1px solid #088;border-radius:10px;background-color:#0FF;opacity:0.5;}.address{text-decoration:none;color:#aa3300;font-size:14px;font-weight:bold;text-shadow:black 0.1em 0.1em 0.2em;}</style><script type="text/javascript">$(function () {//北京地理坐标var beijing = ol.proj.fromLonLat([116.28, 39.54]);//武汉地理坐标var wuhan = ol.proj.fromLonLat([114.21,30.37]);//初始化地图var map = new ol.Map({target: 'map',layers: [new yer.Tile({source:new ol.source.OSM()})],view: new ol.View({center: beijing,zoom: 6,minZoom:2})});//创建标签的样式var createLabelStyle = function (feature) {//返回⼀个样式return new ol.style.Style({//把点的样式换成ICON图标image: new ol.style.Icon({//控制标注图⽚和⽂字之间的距离anchor: [0.5, 60],//标注样式的起点位置anchorOrigin: 'top-right',//X⽅向单位:分数anchorXUnits: 'fraction',//Y⽅向单位:像素anchorYUnits: 'pixels',//偏移起点位置的⽅向offsetOrigin: 'top-right',//透明度opacity: 0.75,//图⽚路径src: '../images/label/blueIcon.png'}),//⽂本样式text: new ol.style.Text({//对齐⽅式textAlign: 'center',//⽂本基线textBaseline: 'middle',//字体样式font: 'normal 14px 微软雅⿊',//⽂本内容text: feature.get('name'),//填充样式fill: new ol.style.Fill({color: '#aa3300'}),//笔触stroke: new ol.style.Stroke({color: '#ffcc33',width: 2})})});};//初始化要素var iconFeature = new ol.Feature({//点要素geometry: new ol.geom.Point(beijing),//名称属性name: '北京市',//⼈⼝属性population: 2115});//为点要素添加样式iconFeature.setStyle(createLabelStyle(iconFeature));//初始化⽮量数据源var vectorSource = new ol.source.Vector({//指定要素features:[iconFeature]});//初始化⽮量图层var vectorLayer = new yer.Vector({//数据源source:vectorSource});//将⽮量图层添加到map中map.addLayer(vectorLayer);//初始化覆盖层标注var marker = new ol.Overlay({//位置坐标position: wuhan,//覆盖层如何与位置坐标匹配positioning: 'center-center',//覆盖层的元素element: document.getElementById('marker'),//ToDo 此处不能⽤JQuery⽅式$('#marker')获取元素//事件传播到地图视点的时候是否应该停⽌stopEvent:false});//将覆盖层添加到map中map.addOverlay(marker);//设置覆盖层的title属性marker.getElement().title = '武汉市';//初始化⽂本覆盖层var text = new ol.Overlay({//位置position: wuhan,//覆盖层的元素element: document.getElementById('address')});//将⽂本覆盖层添加到map中map.addOverlay(text);//设置⽂本覆盖层的内容为之前创建的覆盖层的title属性text.getElement().innerText = marker.getElement().title; //地图的点击事件map.on('click', function (evt) {//获取单选按钮的选项var type = $('input[name="label"]:checked').val();//获取位置坐标var point = evt.coordinate;//如果类型是⽮量标注则添加⽮量标签,否则添加覆盖标签 if (type == 'vector') {addVectorLabel(point);} else if (type == 'overlay') {addOverlayLabel(point);}});//添加⽮量标签function addVectorLabel(coordinate) {//初始化⼀个新的点要素var newFeature = new ol.Feature({geometry: new ol.geom.Point(coordinate),name: '标注点'});//设置点的样式newFeature.setStyle(createLabelStyle(newFeature));//将当前要素添加到⽮量数据源中vectorSource.addFeature(newFeature);}//添加覆盖标注function addOverlayLabel(coordinate) {//创建⼀个div元素var elementDiv = document.createElement('div');//设置div元素的样式类elementDiv.className = 'marker';//设置div元素的title属性elementDiv.title = '标注点';//获取id为label的div标签var overlay = document.getElementById('label');//将新创建的div标签添加到overlay中overlay.appendChild(elementDiv);//创建⼀个a标签元素var elementA = document.createElement('a');//设置a标签的样式类elementA.className = 'address';//设置a标签的链接地址elementA.href = '#';//设置a标签的超链接⽂本setInnerText(elementA, elementDiv.title);//将a标签元素添加到div标签元素中elementDiv.appendChild(elementA);//新建⼀个覆盖层var newMarker = new ol.Overlay({//设置位置为当前⿏标点击的坐标position: coordinate,//设置覆盖层与位置之间的匹配⽅式positioning: 'center-center',//覆盖层元素element: elementDiv,//事件传播到地图视点的时候是否应该停⽌stopEvent:false});//将覆盖层添加到map中map.addOverlay(newMarker);//新建⼀个⽂本覆盖层var newText = new ol.Overlay({//设置位置为当前⿏标点击的坐标position: coordinate,//覆盖层元素element:elementA});//将⽂本覆盖层添加到map中map.addOverlay(newText);}//设置⽂本内容function setInnerText(element,text) {if (typeof element.textContent == 'string') {element.textContent = text;} else {element.innerText = text;}}});</script></head><body><div id="menu"><label class="checkbox"><input type="radio" name="label" value="vector" checked="checked" />Vector Label</label><label class="checkbox"><input type="radio" name="label" value="overlay" />Overlay Label</label></div><div id="map"></div><div id="label" style="display:none"><div id="marker" class="marker" title="Marker"><a class="address" id="address" target="_blank" href="">标注点</a> </div></div></body></html>4、结果展⽰初始化页⾯选中第⼀个单选按钮,在地图页⾯上的任何地⽅点击,将会添加⽮量标注选中第⼆个单选按钮,则在页⾯任意地⽅单击,将添加覆盖标注以上就是本⽂的全部内容,希望对⼤家的学习有所帮助,也希望⼤家多多⽀持。
openlayers 语法

OpenLayers 语法OpenLayers是一个用于创建交互式地图的JavaScript库。
它的语法和对象结构是JavaScript风格的,同时包含一些专有的API和概念。
以下是OpenLayers中的一些基本概念和语法示例:1.创建Map对象在OpenLayers中,首先需要创建一个Map对象来容纳地图。
这个对象需要指定一个HTML元素(通常是一个<div>)作为地图的容器。
javascriptvar map = new OpenLayers.Map("map_div");2.添加图层地图由多个图层组成,每个图层包含一种类型的地理数据(例如街道、地形、卫星图像等)。
你可以通过调用addLayer方法来向地图添加图层。
Javascript3.控制图层可见性你可以通过调用图层的setVisibility方法来控制图层的可见性。
javascriptlayer.setVisibility(false); // 隐藏图层layer.setVisibility(true); // 显示图层4.地图缩放和中心点设置你可以通过调用zoomTo或setCenter方法来设置地图的缩放级别和中心点。
javascriptmap.zoomTo(5); // 设置地图缩放级别为5map.setCenter(new OpenLayers.LonLat(100, 0), 5); // 设置地图中心点为(100, 0),缩放级别为55.添加控件OpenLayers提供了许多内置的控件,例如缩放滑块、图层切换器等。
你可以通过调用addControl方法向地图添加控件。
javascriptvar zoom = new OpenLayers.Control.Zoom();map.addControl(zoom);zoom.activate();6.处理事件你可以通过监听地图和图层的事件来响应用户交互。
openlayersarcgis调用方法

openlayersarcgis调用方法OpenLayers是一个开源的JavaScript库,用于在Web浏览器中显示地图。
而ArcGIS则是由Esri提供的一套以Web为基础的GIS(地理信息系统)解决方案。
通过结合使用OpenLayers和ArcGIS,可以在Web应用程序中使用ArcGIS提供的功能和数据。
下面将介绍如何在OpenLayers中调用ArcGIS的方法。
1. 引入OpenLayers和ArcGIS的库文件首先,需要在HTML文件中引入OpenLayers和ArcGIS相关的库文件。
如下所示:```html<!DOCTYPE html><html><head><style>#mapwidth: 100%;height: 500px;}</style></head><div id="map"></div><script src="main.js"></script></body></html>```2.创建地图容器在JavaScript文件中,需要先创建一个地图容器。
以下代码创建了一个具有默认视图和基本控件的地图容器:```javascriptvar map = new ol.Maptarget: 'map',layers:new yer.Tilesource: new ol.source.OSM})],view: new ol.Viewcenter: ol.proj.fromLonLat([0, 0]),})});```3. 添加ArcGIS图层现在可以添加ArcGIS的图层到地图中。
通过使用ArcGIS的REST API,可以加载ArcGIS Server服务的图层。
以下代码示例加载了一个ArcGIS Server服务的图层:```javascriptvar layer = new yer.Tilesource: new ol.source.TileArcGISRest})});map.addLayer(layer);```4. 添加ArcGIS要素除了加载图层,还可以在地图中添加ArcGIS要素。
openlayers 编辑点线面的原理

一、 openlayers简介openlayers是一个开源的地图库,它可以通过JavaScript在网页上显示各种类型的地图,并且提供了丰富的交互功能。
它允许用户在地图上绘制点、线、面等对象,并进行编辑。
本文将重点介绍openlayers 中编辑点、线、面的原理。
二、 openlayers中编辑点、线、面的基本原理1. Feature在openlayers中,地图上的点、线、面等对象都被称为Feature。
每个Feature都有自己的属性和几何形状。
2. Geometry在openlayers中,Feature的几何形状由Geometry来表示。
Geometry可以是Point(点)、LineString(线)、Polygon(面)等类型。
3. Interactionopenlayers中提供了多种交互工具,用于在地图上对Feature进行编辑。
常用的交互工具包括Modify、Draw、Snap等。
三、编辑点的原理1. 添加点用户可以通过鼠标点击地图,在指定位置添加点。
当用户点击地图时,openlayers会创建一个新的Point类型的Feature,并将其显示在地图上。
2. 移动点用户可以通过鼠标拖拽已有的点,从而移动点的位置。
openlayers会根据用户的操作,更新点的位置,并重新渲染地图。
3. 删除点用户可以通过交互工具中的删除功能,删除地图上已有的点。
openlayers会在用户确认删除操作后,将对应的Feature从地图上移除。
四、编辑线的原理1. 绘制线用户可以通过交互工具中的绘制功能,在地图上绘制新的线。
当用户开始绘制线时,openlayers会创建一个新的LineString类型的Feature,并在用户绘制线的过程中动态更新其形状。
2. 修改线用户可以通过交互工具中的修改功能,对已有的线进行编辑。
用户可以拖拽线的节点,改变线的形状。
openlayers会根据用户的操作,更新线的形状,并重新渲染地图。
openlayers调用瓦片地图分析

openlayers调⽤⽡⽚地图分析⽹上有诸多资料介绍openlayers如何调⽤百度地图或者是天地图等常见互联⽹地图,本⽂作者使⽤的是不是常见的互联⽹⽡⽚,现将调⽤过程进⾏整理与⼤家分享。
⼀. 切⽚层级:地图切⽚都是分级的,不同层级的⽐例尺不同、显⽰信息的详细程度不同。
⽐例尺:图上距离/实际距离,不同层级的⽐例尺不同。
⾏列号:固定层级下,地图切⽚位于第⼏⾏第⼏列。
切⽚原点:切⽚原点⼀般有两种:1、左上⾓;2、左下⾓。
分辨率:⼀个像素对应的实际距离。
⼆.分辨率计算分辨率和⽐例尺是⼀⼀对应的,这之间有个计算公式:切⽚⽐例尺=1:(分辨率*dpi/0.0254)对于平⾯坐标,dpi⼀般取90.714,如果是经纬度dpi=90.714*111194.65191(天地图就是这种)三.openlayers调⽤⽡⽚先直接上代码:<!doctype html><html lang="en"><head><link rel="stylesheet" href="https:///en/v4.3.3/css/ol.css" type="text/css"><style>.map {height:100%;width: 100%;}</style><script src="https:///en/v4.3.3/build/ol.js" type="text/javascript"></script><title>OpenLayers example</title></head><body><div id="map" style="width: 100%;height: 100%"></div><script>// ⾃定义分辨率和⽡⽚坐标系var resolutions=[1.980325938,0.990162969,0.495081485,0.247540742,0.123770371,0.061885186,0.030942593,0.015471296,0.007735648,0.003867824,0.001933912,0.000966956,0.000483478,0.000241739,0.00012087,6.04348E-05,3.02174E-05,1.51087E-05,7.55434E-06,3.77717E-06];var tilegrid = new ol.tilegrid.TileGrid({origin: [-252.3165,-253.7895], // 设置原点坐标resolutions: resolutions // 设置分辨率});// 创建地图的数据源var gisSource = new ol.source.TileImage({projection: 'EPSG:4326',tileGrid: tilegrid,tileUrlFunction: function(tileCoord, pixelRatio, proj){var z = tileCoord[0];var x = tileCoord[1];var y = tileCoord[2];return "http://192.168.0.233/GIS/bin?services=default&row="+y+"&col="+x+"&level="+z;}});// 地图图层var gisMapLayer = new yer.Tile({source: gisSource});// 创建地图var map = new ol.Map({layers: [gisMapLayer,//地图切⽚格⽹,调试使⽤new yer.Tile({source: new ol.source.TileDebug({projection: 'EPSG:4326',tileGrid: baiduSource.getTileGrid()})})],view: new ol.View({center: [118.386,31.366],projection: 'EPSG:4326',zoom: 3}),target: 'map'});// 显⽰坐标控件var mousePositionControl=new ol.control.MousePosition({coordinateFormat:ol.coordinate.createStringXY(4),projection:"EPSG:4326",className:"custom-mose-position",target:document.getElementById("mouse-position"),undefinedHTML:" "});map.addControl(mousePositionControl);</script></body></html>View Code⽹络上有很多类似调⽤百度地图、天地图的代码,我找了⼀个调⽤百度地图的代码,在这基础上修改的。
opnelayers边界值计算

opnelayers边界值计算在OpenLayers中,边界值计算通常指的是地图的边界范围计算。
这在地图显示和交互中非常重要,因为它可以帮助我们确定地图的显示范围,以及在地图上添加新的要素时确定它们的位置。
首先,我们可以通过OpenLayers的API来获取地图的边界值。
OpenLayers提供了一个叫做`getExtent`的方法,它可以用来获取当前地图视图的边界范围。
这个边界范围通常以经度和纬度的方式表示,我们可以通过这个范围来确定地图显示的区域。
另外,OpenLayers还提供了一些工具和方法来帮助我们计算地图上特定要素的边界值。
比如,我们可以使用`getGeometry`方法来获取要素的几何信息,然后通过计算几何信息的坐标范围来确定要素的边界值。
除了获取地图范围和要素范围,边界值计算还可以涉及到地图投影的转换。
在OpenLayers中,地图投影的转换是一个比较复杂的问题,因为地图通常会使用不同的投影来显示不同的区域。
在进行边界值计算时,我们需要确保在不同投影之间进行正确的坐标转换,以便得到准确的边界值。
此外,边界值计算还可能涉及到地图上的交互操作,比如拖拽地图、缩放地图等。
这些操作会改变地图的显示范围,因此在进行边界值计算时需要考虑这些交互操作对地图边界值的影响。
总的来说,边界值计算在OpenLayers中涉及到地图范围的获取、要素范围的计算、地图投影的转换以及地图交互操作的影响等多个方面。
通过合理地使用OpenLayers提供的API和工具,我们可以准确地进行边界值计算,并在地图应用中实现更加精确和灵活的地图显示和交互效果。
openlayers坐标与经纬度转化方法

openlayers坐标与经纬度转化⽅法
openlayers中获取图层点位坐标⽅法为
curFeature.getGeometry().getCoordinates()//此⽅法返回⼀个数组,x轴与y轴坐标。
常⽤坐标系为 WGS84,全称World Geodetic System 1984,是为GPS全球定位系统使⽤⽽建⽴的坐标系统。
投影projection有2种:
1、EPSG:4326 全球通⽤
2、EPSG:3857 web地图专⽤ openlayers默认的
地图坐标转化
坐标转换,它的第⼀个参数是ol.Coordinate类型的坐标,后⾯两个参数依次是当前坐标所⽤的坐标系,及转换后的坐标所⽤的坐标系,ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857')就能把EPSG:4326的坐标[104.06, 30.67] //第⼀个参数为第⼆参数的坐标经纬度第⼆个参数为被转化的坐标系第三个参数为需要被转化为的坐标系
ol.proj.transform([104.06, 30.67], 'EPSG:4326', 'EPSG:3857')
ol.proj.transform([12964910.690853572,4884172.646815963],'EPSG:3857','EPSG:4326');。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 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格式阅读原文。