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开源地图引挚发布离线地图
如何用OpenLayers开源地图引挚发布离线地图这里以吉林省吉林市地图为例，说明如何用OpenLayers开源地图引挚发布离线谷歌卫星地图。
在万能地图下载器中，选择吉林省吉林市显示行政区划，然后点击“下载”按钮，可以新建任务。
在新建任务对话框中选择需要下载的级别，一般是从当前行政区划显示的级别开始选择（这里是第9级），一直接选择到第19级（国内19级清晰度效果最佳，19级以上基于19级放大），由于数据量非常大，这里只为了说明如何用OpenLayers开源地图引挚发布离线卫星地图的方法，因此这里以选择到第13级为例。
在“新建任务”对话框中，点击“导出设置”可以设置相关导出参数，我们可以选择导出大图、导出瓦片和导出离线包等三种方式。
由于这里我们用OpenLayers开源地图引挚发布离线卫星地图需要用的是瓦片格式，因此这里选择“导出瓦片”选项。
新建任务详细参数说明，请参阅：新建地图下载任务参数说明在“导出瓦片”选项的相关参数中，我们选择瓦片格式为“TMS瓦片”、文件格式为PNG，坐标坐标投影为墨认的“WGS84 Web 墨卡托投影”，选择“边界范围裁剪”，背景颜色为“透明”背景。
导出瓦片详细参数说明，请参阅：导出瓦片参数说明分别点击“确定”按钮开始下载任务，下载并自动导出后可以看到导出的瓦片目录为8到12级而不是我们选择的9到13级，这是因为软件中的级别编号是从1开始，而标准的TMS瓦片命名规则都是从0开始，因此该情况属于正常情况，瓦片的行列号编号规则同理。
将下载的地图瓦片目录复制到OpenLayers开源地图引挚发布离线地图的源码示例中。
用专业的WebGIS开发工具Visual Studio Code可以打开源代码进行功能开发。
Visual Studio Code下载安装教程，请参阅：如何安装WebGIS开发工具Visual Studio Code双击OpenLayers开源地图引挚发布离线地图源码中的“map.html”文件，可以在浏览器中打开查看在线地图。
二维图制作范围绘制及使用教程
二维图制作范围绘制及使用教程一、目的：为使无卫图项目在项目制作范围的确定上更方便快捷，使用此教程文档帮助客户在确定制作范围的过程中更好地与本公司沟通和确认，以利于项目的顺利执行与签单，特制作此文档说明。
二、适用范围a)无卫星图项目制作范围的勾画b)卫星图难以辨认或者不习惯于用卫星图确定制作范围的项目三、抄送对象a)公司所有销售人员b)意向客户c)签单客户四、具体操作流程：1.打开，进入后出现如下图界面：2.点击“创建和共享我的地图”3.弹出如下页面，继续点击“创建新地图”4.此时会弹出一个登陆页面，若已有google帐号，则用老帐号登陆，若还没有帐号，请申请新帐号。
5.登陆后将返回到创建新地图的版面，重新创建新地图6.点击后在左边栏位置会出现相关标题与说明，右边是中国地图，在中国地图找到您所需要制作的区域及位置，比如以山西太原为例：7.使用放大缩小功能找到您所需要的位置，放大到您适当的级别大小后点击多边形按钮即可绘制制作范围，沿需要绘制的范围依次点击各个拐点，如上图8.若有范围在画面范围之外，可点击鼠标左键拖动地图继续绘制，9.继续绘制范围，画完后使终点与起始点重合以达到闭合的区域，会跳出如上图所示的提示框，在提示框内输入标题与说明点击确定10.点击确定后左边栏会出现太原制作范围的多边形，若项目只需要一个范围，则可编辑左边栏的标题与说明然后点击完成，若还有分开的另一个甚至多个范围，则继续点击多边形按钮，重复上述流程操作，直至所有范围绘制完成11.上图为绘制完三个区域范围后的效果12.完成后，在“由我创建”中会显示您创建的地图，在右边栏可以点击链接，将出现该范围的地址13.复制该地址，发予本公司，本公司即可按照所绘制的范围进行测量面积和确定项目制作范围注：制作范围边界需以可辨认的道路、河流为界，否则将会直接影响到项目面积测量以及制作范围确认过程中不必要的争议，同时对项目的及时、准确完成造成很大影响。
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教程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中获取图层点位坐标⽅法为
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');。
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>天地图就可以显⽰出来了。
二维地图的开发设计与维护(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包。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
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提供的类库当中，它还使用了类库Prototype.js 和Rico 中的部分组件，为地图浏览操作客户端增加Ajax效果。
2 Openlayers基本使用方法Openlayers是使用Javascript编写的脚本，与网页设计技术密切相关，因此在使用之前需要掌握一定得相关知识，例如html、css、javascript等。
编辑工具推荐使用：EditPlus。
1）下载并拷贝源代码即相关文件到Openlayers官方网站下载源代码压缩包，解压后可以看到其中的一些目录和文件。
需要拷贝的文件和目录有：根目录下的【OpenLayer.js】文件、根目录下的【lib】目录、根目录下的【img】目录、根目录下的【theme】目录。
将这4项内容拷贝到你网站的Scripts目录下（当然，这个只是例子，自己的网站程序目录结构自己说了算，只要保证OpenLayers.js，/lib，/img，/theme在同一目录中即可）。
（注：在以后的使用过程中不可避免的要对原始功能进行扩展、修改，这时候可能要重写一些类和方法，建议重写的和新建的类都写到一个新的js文件中，尽量不要在原始Openlayers.js 中进行修改。
）2）在页面中引用JS创建一个网页作为使用openlayers查看地图的页面，这个页面可以是html静态页面，也可以是jsp、aspx等动态页面，这个根据自己网站的需要选择。
在网页的head部分添加对openlayers.js的引用，如下：<head>......<script src="../lib/OpenLayers.js"></script><script type="text/javascript">//在此处编写代码</script>......</head>（注：Openlayers.js的路径以自己网站程序的实际路径为准，自己将要编写的代码可以写在本页面，也可以写到一个单独的外部js文件中。
测试时js代码写到本页面如上标红的位置即可，后期整理时将页面中的js代码全部整理到外部js文件中）3）创建地图OpenLayer.Map对象在要显示的网页中创建一个用于显示地图对象的div，给它起个ID，比如“div_map”。
你有必要再写一些CSS限定#div_map的宽度和高度。
然后在js代码中编写如下内容：（其中的参数“div_map”可以是id，也可以是ElementObject，当然id更加方便一些。
另外，在实际应用中，map最好声明成全局变量，便于在其他方法里调用）4）添加图层显示地图向地图中添加图层，通常情况下使用yer的子类来完成图层的初始化。
OpenLayers提供的Layers扩展子类如图：以WMS 为例，实例化图层对象的js 如下： var wms_layer = new yer.WMS( "OpenLayers WMS","/wms/vmap0", {layers: 'basic'} );map.addLayers(wms_layer);//将layer 实例对象添加到map 对象中此处可以简单理解为要以WMS 的格式实例化一个图层类，其中的网址为地图服务的路径参数。
（若要使用自己的地图服务或本地图片资源，则需要自己构造或重写一个yer 的子类，并对其中的getUrl 方法按既定规则进行重写）一个map 对象可以添加多个layer 对象，若希望添加多个layer 对象（如：layer1, layer2, layer3），可用多次调用map.addLayers(),也可以以数组方式添加：5)添加控件Openlayers 定义了很多可以直接使用的控件，这些控件都是Openlayers.Control类的子类。
我们可以根据自己的应用需求修改控件的功能或直接自定义自己的控件。
控件是通过加载到地图上而起作用的，也算地图表现的一部分。
同时，控件需要对地图发生作用，所以每个控件也持有对地图（map对象）的引用。
下面给出调用控件的实例代码：（注：以上代码是控件最基本的调用方式，在进行开发时根据需要可能要对控件定义各种复杂的初始化参数，在没有设置参数时，控件的实例对象会以默认参数形式呈现，顺便说一句，OpenLayers中的控件有些是需要图标的，可以看到，像EditingToolbar；有些是不需要的图标的，当然也看不到，像OpenLayers. Control. DragPan）6）一个完整的演示代码<html><head><title>创建一个简单的电子地图</title><script type="text/javascript" src="../lib/OpenLayers.js "></script><script type="text/javascript">function init() {var map = new OpenLayers.Map("div_map ");var wms_layer = new yer.WMS( "OpenLayers WMS","/wms/vmap0", {layers: 'basic'} );map.addLayers(wms_layer);map.zoomToMaxExtent();//设定视图缩放地图程度为最大var MyControl = new yerSwitcher();map.addControl( MyControl);}</script></head><body onload="init()"><div id=" div_map " style="width: 100%; height: 100%;"></div></body></html>3 源代码总体结构分析如图所示为Openlayers官网API Documentation的索引结构截图，从中我们可以初步了解一下Openlayers面向对象源代码的整体组织结构（一级一级继承）。
我们看到在类的顶层“高高在上”的是OpenLayers，它为整个项目实现提供名称空间（JavaScript语言没有名称空间一说，但是它确实有自己的机制实现类似的功能，后面会说明），它直接拥有一常量VERSION_NUMBER，以标识版本。
文档中的类是按字母顺序排列的，以下也按这个顺序进行分析。
⏹Ajax：顾名思义，用于实现Ajax功能，只是OpenLayers的开发者们把它单独写到一个类里了，其中用到了Prototype.js框架里的一些东西。
同时，设计的时候也考虑了跨浏览器的问题。
⏹BaseTypes：这里定制了OpenLayers中用到的string，number 和function。
比如，OpenLayers. String. startsWith，用于测试一个字符串是否一以另一个字符串开头；OpenLayers. Number. limitSigDigs，用于限制整数的有效数位；OpenLayers. Function.bind，用于把某一函数绑定于对象等等。
⏹Console：OpenLayers.Console，此名称空间用于调试和把错误等输出到“控制台”上，需要结合使用../Firebug/firebug.js。
⏹Control：我们通常所说的控件类，它提供各种各样的控件，比如图层开关LayerSwitcher，编辑工具条EditingToolbar等等。
⏹Events：用于实现OpenLayers的事件机制。
具体来说，OpenLayers中的事件分为两种，一种是浏览器事件，例如mouseup,mousedown之类的；另外一种是自定义的，如addLayer之类的。
OpenLayers中的事件机制是非常值得我们学习的，后面将具体讨论。
⏹Feature：我们知道：Feature是geography 和attributes的集合。
在OpenLayers中，特别地OpenLayers.Feature 类由一个marker 和一个lonla组成。