openlayers教程第三讲-项目快速实战(一)

合集下载

OpenLayers3实现轨迹回放

网络错误503请刷新页面重试持续报错请尝试更换浏览器或网络环境
OpenLayers3实现轨迹回放
function PathBack() { var PVLayer = new yer.Vector({ source: new ol.source.Vector({}) }); var pointList = new Array(); map.addLayer(PVLayer); $.ajax({ type: "get", url: "images/zb.json", async: false, contentType: "application/json; charset=utf-8", dataType: "json", success: function (data) { var obj = data.T_Project; for (var i = 0; i < obj.length; i++) { var pointFeature = new ol.Feature({ geometry: new ol.geom.Point(ol.proj.transform([parseFloat(obj[i].x), parseFloat(obj[i].y)], 'EPSG:4326', 'EPSG:3857')) }) var propertieList = new Array(); // propertieList.push(obj[i].ID, obj[i].x, obj[i].y, obj[i].Note); propertieList.push(obj[i].ID, obj[i].x, obj[i].y); pointFeature.setProperties(propertieList); if (pointFeature != null) { pointList.push(pointFeature); } }

openlayers视频教程第一讲-概述

名称
ARC/INFO
开发单位美国环境系统研究所（ESRI）美国 MapInfo Corporation 美国 INTERGRA PH(鹰图)公司加拿大阿波罗科技集团、北京东方泰坦科技有限公司美国 Caliper公司
简介
影响广、功能强、市场占有率高。ARC/INFO可运行于各种平台上，包括 SUN Solaris、SGI IRIX、DigitaI Unix、HP UX、IBM AIX、Windows NT （Intel/Alpha）等。在各种平台上可直接共享数据及应用。 ARC/INFO实行全方位的汉化，包括图形、界面，数据库，并支持NLS（Native Language System），实现可重定义的自动语言本地化。完善丰富的产品线；稳定的产品性能；广泛的业界支持；广大的用户群体；良好的易用性，产品贴近用户；与其他技术的良好融合；良好的可持续发展；极高的新技术敏感度；良好的本地化技术支持；极高的性价比。提供了一整套功能强大的分析工具，包括属性和空间查询、缓冲区、空间叠加和专题分析。使用GeoMedia 的数据库服务器技术，你可以方便的对多种空间数据格式同时进行分析。GeoMedia 是唯一适合进行 what-if分析的工具，因为它可以让你在同一个分析管道中使用多个操作，该管道中的数据发生任何变化，分析结果都会自动变更。
a.什么都不输入直接查询所有车辆及设备的最后位置状态 b.输入设备安装绑定的手机号查询该设备的最后位置状态
c.输入设备安装绑定的手机号及时间段查询该设备的位置轨迹

1.采用互联网公开地图服务◦ 地图，高德地图，google地图，QQ地图，世纪高通地图，阿里云地图，51 地图，搜狗地图。内网安全及断网问题无法解决。

openlayers 的circle方法

文章标题：深度探索openlayers中的circle方法1. 引言在前端地图开发领域，openlayers是一个非常优秀，功能强大的地图开源库。

其中的circle方法作为其中的一个重要功能，可以在地图上绘制圆形要素，并进行相关的交互和样式设置。

本文将深入探讨openlayers中的circle方法，从基础知识到高级应用，全面解读这一功能的用法和潜力。

2. 基础知识在openlayers中，使用circle方法可以绘制一个圆形要素。

通过指定圆心坐标、半径距离等参数，可以轻松创建一个定位精准的圆形要素，并将其添加到地图上进行展示。

对于地图展示中需要标注特定区域的场景，这一功能非常实用，可以帮助用户快速定位和识别地理位置。

3. 高级应用除了基本的绘制功能之外，circle方法还支持丰富的交互和样式设置。

可以通过设置不同的样式、颜色、透明度等属性，让圆形要素在地图上呈现出不同的视觉效果。

还可以添加交互事件，实现对圆形要素的点击、悬浮等操作，为用户提供更加丰富和直观的地图体验。

4. 深入理解通过对circle方法的深入使用，可以发现它在地图展示和交互方面有着非常大的潜力。

可以结合动态数据，实时更新圆形要素的位置和属性，实现实时监控和展示；还可以结合其他图层，实现更加复杂的地图数据展示和切换。

circle方法不仅仅是简单的绘图工具，更是一个可以灵活运用的地图开发利器。

5. 个人观点作为openlayers中的重要功能之一，circle方法在地图开发中有着举足轻重的地位。

其简单易用的特点，加上丰富的扩展能力，使得它成为了开发者们实现地图展示需求的利器。

在今后的开发过程中，我将更加深入地学习和使用这一功能，结合实际项目需求，发挥出它的最大潜力。

6. 总结通过本文对openlayers中circle方法的深度探索，我们不仅了解了其基础知识和使用方法，还深入理解了其高级应用和潜力。

在地图开发中，灵活运用circle方法将为我们带来更加丰富和多样的地图展示效果，为用户提供更加直观和便捷的地理信息展示和交互体验。

openlayers imagestatic 用法 -回复

openlayers imagestatic 用法-回复OpenLayers是一个用于创建互动式地图的JavaScript库。

它提供了许多功能强大的工具，帮助开发人员构建各种类型的地图应用程序。

其中之一就是`ImageStatic`类，它允许开发人员将静态图像添加到地图上。

在接下来的文章中，我们将介绍`ImageStatic`类以及它的用法，详细解释如何将静态图像添加到OpenLayers地图中。

首先，让我们来简要了解一下`ImageStatic`类。

`ImageStatic`是OpenLayers库中的一个类，它用于在地图上添加静态图像。

静态图像可以是任何格式的图片，例如JPEG、PNG等。

使用`ImageStatic`类，可以将静态图像作为地图的背景图或覆盖物添加到地图上。

这为开发人员提供了一种灵活的方式来呈现地图上的静态内容。

要在OpenLayers中使用`ImageStatic`类，首先需要引入OpenLayers 库。

你可以从OpenLayers的官方网站上下载最新版本的库文件。

一旦你将库文件引入到你的项目中，你就可以开始使用`ImageStatic`类了。

在使用`ImageStatic`类之前，我们需要创建一个地图实例。

可以使用`new`关键字创建一个OpenLayers的`Map`对象。

这个`Map`对象将作为容器，用于存放地图元素和图层。

javascriptvar map = new ol.Map({target: 'map',layers: [添加地图图层],view: new ol.View({设置地图的视图})});一旦你创建了地图实例，你就可以使用`ImageStatic`类了。

下面是一个简单的示例，演示了如何使用`ImageStatic`类将一张静态图像添加到地图上。

javascriptvar imageLayer = new yer.Image({source: new ol.source.ImageStatic({url: 'path/to/image.jpg',imageSize: [width, height],imageExtent: [minX, minY, maxX, maxY]})});map.addLayer(imageLayer);在上面的示例中，我们首先创建了一个`yer.Image`对象，作为用于包含静态图像的图层。

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

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。

openlayers中单击获取要素

本⽂链接：⽬录⼀、引⾔以前在做arcgis js开发的时候，就开始纠结单击获取要素使⽤哪种⽅法，当时是因为arcgis server正好提供了arcgis定制的服务IdentifyTask，所以当时⽤了arcgis server查询的。

总结⼀下查询⽅法有如下⼏种：这四种各有优缺点，下⾯详细介绍前两种⽅法，后⾯两种⽅法涉及到的知识⽐较多，不⽅便展开，仅提供思路==⼆、前台⽅法1、interaction中select⽅法针对⽮量数据源，openlayers中提供了select交互类⽅⾯⿏标选择。

1./*overlay*/2.// Popup showing the position the user clicked3.var popup = new ol.Overlay({4.element: document.getElementById('popup'),5.autoPan:true,6.autoPanMargin:100,7.positioning:'center-right'8.});9.map.addOverlay(popup);10.11./*select*/12.var selectSingleClick = new ol.interaction.Select();13.map.addInteraction(selectSingleClick);14./*前端第⼀种*/15.selectSingleClick.on('select', function(e) {16.var features=e.target.getFeatures().getArray();17.var element = popup.getElement();18.if (features.length>0)19.{20.var feature=features[0];21.var type=feature.getGeometry().getType();22.var property=feature.getProperties();23.var coordinate = ol.extent.getCenter(feature.getGeometry().getExtent());24.var hdms="点名："+property["Text"];25.hdms=hdms+"<br/>";26.hdms = hdms+"图层名：:"+property["Layer"];27.hdms=hdms+"<br/>";28.hdms = hdms+"位置:"+coordinate[0]+"-"+coordinate[1];29.30.$(element).popover('destroy');31.popup.setPosition(coordinate);32.// the keys are quoted to prevent renaming in ADVANCED mode. 33.$(element).popover({34.'placement': 'top',35.'animation': false,36.'html': true,37.'content': hdms38.});39.$(element).popover('show');40.}41.else42.{43.$(element).popover('destroy');44.45.}46.47.});这⾥popup是个overlay覆盖物，⽤于弹出框显⽰得到的feature要素。

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框选（画图）得到在选框内的要素，并标注出这些要素的名称Demo（可直接运行）

openlayers框选（画图）得到在选框内的要素，并标注出这些要素的名称Demo（可直接运⾏）<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="https:///en/v5.3.0/css/ol.css" /><script type="text/javascript" src="https:///en/v5.3.0/build/ol.js"></script><title>Document</title></head><body><div id="selectedFeatures" style="margin: 20px;min-height: 100px;"></div><div id="map"></div><script>var beijing = ol.proj.fromLonLat([116.28, 39.54]);var map = new ol.Map({target: 'map',layers: [new yer.Tile({source: new ol.source.OSM()})],view: new ol.View({center: beijing,zoom: 4})});//实例化⽮量点要素，通过⽮量图层添加到地图容器中//这样就实现了预先加载图⽂标注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.addLayer(vectorLayer);//⽮量标注样式设置函数，设置image为图标ol.style.Iconfunction createLabelStyle(feature){// console.log(feature);return new ol.style.Style({text: new ol.style.Text({textAlign: 'center', //位置textBaseline: 'bottom', //基准线font: 'normal 12px 微软雅⿊', //⽂字样式text: feature.get('name'), //⽂本内容fill: new ol.style.Fill({ //⽂本填充样式（即⽂字颜⾊)color: '#000'}),stroke: new ol.style.Stroke({color: '#F00',width: 2})})});}var coordinate1 = [10806361.310845079, 3942927.667062532]; //⿏标单击点的坐标var coordinate2 = [11540156.782382771, 4539747.983913189] //⿏标单击点的坐标var coordinate3 = [12225032.55581795, 3982063.4255445423] //⿏标单击点的坐标var arr =[coordinate1,coordinate2,coordinate3]//新建⼀个要素ol.Featurearr.forEach((ar,index) => {var newFeature = new ol.Feature({geometry: new ol.geom.Point(ar), //⼏何信息name: '标注点'+index});newFeature.setStyle(createLabelStyle(newFeature)); //设置要素样式vectorSource.addFeature(newFeature);});var draw = new ol.interaction.Draw({source: vectorLayer.getSource(),type:"Circle",style:new ol.style.Style({// 将点设置成圆形样式image: new ol.style.Circle({// 点的颜⾊fill: new ol.style.Fill({color: '#F00'}),// 圆形半径radius: 5}),// 线样式stroke: new ol.style.Stroke({color: '#0F0',lineCap: 'round', // 设置线的两端为圆头width: 5})}),geometryFunction: ol.interaction.Draw.createBox() // 使画出来的现状为矩形});map.addInteraction(draw);draw.on('drawend',function(evt){var polygon = evt.feature.getGeometry();setTimeout(function(){ //如果不设置延迟，范围内要素选中后⾃动取消选中，具体原因不知道var extent = polygon.getExtent()var features = vectorLayer.getSource().getFeaturesInExtent(extent); //先缩⼩feature的范围var str = "";for(var i=0;i<features.length;i++){var newCoords = features[i].getGeometry().getCoordinates();if (features[i].get("name")) {str += "<div class=\"selectedItem\" οnclick='showDeviceOnMap(\""+features[i].getId()+"\");'>"+features[i].get("name")+"</div>"; }}document.getElementById('selectedFeatures').innerHTML = str},300)})</script></body></html>。

OpenLayers白皮书

OpenLayers白皮书贵州怡景汇博科技有限公司2012年6月目录：文档说明： (3)OpenLayers简介 (4)技术原理和实现 (4)运行环境： (4)基本要素： (4)地图表现形式： (5)位图层 (6)矢量图层 (7)技术特征 (7)1、Map地图容器 (8)2、Layer图层 (8)3、Control控件 (8)4、矢量元素 (9)5、数据源 (9)6、面向对象框架 (9)7、WFS-T (10)应用领域 (10)术语解释 (11)文档说明：本文档描述了OpenLayers的基本框架和功能特征。

通过对这些功能的组合运用，或者在其框架上做二次开发，可以搭建一个健壮的WebGIS系统。

文档主要内容OpenLayers简介技术原理和实现技术特征Map地图容器Layer图层Control控件矢量元素数据源面向对象框架WFS-T应用领域OpenLayers简介OpenLayers 是MetaCarta公司采用纯JavaScript开发的用于在主流浏览器上展示地图数据的包，用于WebGIS客户端，通过BSD License 发行。

OpenLayers 为构建富客户端地理信息应用实现了一套JavaScript API，类似Google Maps和微软的Virtual Earth的APIs，和他们有个重要的不同点是，OpenLayers是完全开源和免费的。

通过OpenLayers可以很轻松地在web页中创建一个动态的地图。

OpenLayers是一个用于浏览器地图展示的开源js库，用于在您的浏览器中实现地图浏览的效果和基本的zoom，pan等功能。

OpenLayers APIs采用动态类型脚本语言JavaScript编写，同时借用了Prototype.js框架和Rico库的一些解决方案，实现了类似与Ajax功能的无刷新更新页面，能够带给用户丰富的桌面体验（它本身就有一个Ajax类，用于实现Ajax功能），而应用于Web浏览器中的DOM（文档对象模型）由JavaScript实现，同时Web浏览器（比如IE，FF等）都支持DOM ，所以客户端不存在浏览器依赖性。

OpenLayers案例一

OpenLayers案例⼀序OpenLayers 是⼀个专为Web GIS 客户端开发提供的JavaScript 类库包，⽤于实现标准格式发布的地图数据访问。

例⼦<!doctype html><html lang="en"><head><link rel="stylesheet" href="../css/ol.css"> <?--链接⼀个外部样式表--><style>.map2 { <?--前边的点必不可少-->height: 400px;width: 100%;}</style><script src="../build/ol.js"></script> <?--链接⼀个外部脚本⽂件--><title>OpenLayers 3 example</title></head><body><h2>My Map</h2><div id="map" class="map2"></div> <?--ID如⼈的⾝份证，唯⼀标⽰（1对1）。

Class如⼈穿的⾐服，⽤于定义这个DIV的样式（n对1），这⾥⽤到了上⾯stype定义的map2样式--> <script>var map = new ol.Map({target: 'map',layers: [new yer.Tile({source: new ol.source.MapQuest({layer: 'sat'})})],view: new ol.View({center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),zoom: 4})});</script></body></html>运⾏图⽰为了调⽤map，⼀个web页⾯需要做3件事情：调⽤OpenLayers<div>map容器 (<div>标签⽤来定义⽂档中的分区或节)JavaScript新建map调⽤OpenLayers第⼀部分是调⽤JavaScript库。

Openlayer参考文档介绍

Maps............................................................................................................................................................................ 24 Raster Layers ............................................................................................................................................................... 24 Marker Layers ............................................................................................................................................................. 24 Events and Controls .................................................................................................................................................... 24 Vector Layers .............................................................................................................................................................. 25 Editing Tools ................................................................................................................................................................ 25

openlayers3实现车辆轨迹回放

openlayers3实现车辆轨迹回放本⽂实例为⼤家分享了openlayers 3实现车辆轨迹回放的具体代码，供⼤家参考，具体内容如下先上效果：利⽤ openlayers 3地图的 postcompose 事件监听地图的重绘注意：此代码是我在Vue 的methods ⾥⾯写的测试⽅法，并不能直接运⾏，请在理解的基础上测试。

vm 为vue的this对象注释已经很丰富了，先做个备份，后期会编辑加⼊⼀点详解。

实现代码：html：<div id="menu"><label for="speed" style="font-weight: bold;">运动速度: <input id="speed" type="range" min="1" max="20" step="1" value="10" /></label><button id="start-animation">开始运动</button></div><!-- 注：此代码仅为上⾯速度条和按钮--核⼼代码:startMove:function () {var vm=this;var map=vm.map;vm.clearOverlayers("beijing_sq");//中间站var stops=[[12909554.6597,4933234.84552], //14[12909824.6852,4931594.7854], //43[12910026.8837,4930523.89946], //63[12910870.563,4929357.26511] //85];var stopMakers = new Array();for(var i=0;i<4;i++){var s = new ol.Feature({type: 'stop',geometry: new ol.geom.Point(stops[i])});stopMakers.push(s);}var Coordinates=vm.path;//将离散点构建成⼀条折线var route = new ol.geom.LineString(Coordinates);//获取直线的坐标var routeCoords = route.getCoordinates();var routeLength = routeCoords.length;var routeFeature = new ol.Feature({type: 'route',geometry: route});var geoMarker = new ol.Feature({type: 'geoMarker',geometry: new ol.geom.Point(routeCoords[0])});var startMarker = new ol.Feature({type: 'icon',geometry: new ol.geom.Point(routeCoords[0])});var endMarker = new ol.Feature({type: 'icon',geometry: new ol.geom.Point(routeCoords[routeLength - 1])});var styles = {'route': new ol.style.Style({stroke: new ol.style.Stroke({width: 6,color: '#F2C841'}),fill:new ol.style.Fill({color:"#F6E3A3"})}),/*'icon': new ol.style.Style({image: new ol.style.Icon({anchor: [0.5, 1],src: require()})}),*/'geoMarker': new ol.style.Style({/*image: new ol.style.Circle({radius: 7,snapToPixel: false,fill: new ol.style.Fill({ color: 'black' }),stroke: new ol.style.Stroke({color: 'white',width: 2})})*/image: new ol.style.Icon({src: require('../../assets/map/left_red_car.png'),rotateWithView: false,rotation: -Math.atan2(routeCoords[0][1]-routeCoords[1][1], routeCoords[0][0]-routeCoords[1][0]), scale:0.3,})}),'stop':new ol.style.Style({image:new ol.style.Circle({radius:10,snapToPixel:false,fill:new ol.style.Fill({ color:'red'}),stroke:new ol.style.Stroke({color:'white',width:2})})})};var animating = false;var speed, now;var speedInput = document.getElementById('speed');var startButton = document.getElementById('start-animation');var vectorLayer = new yer.Vector({id:'carLayer',source: new ol.source.Vector({features: [routeFeature, geoMarker, startMarker, endMarker,stopMakers[0],stopMakers[1],stopMakers[2],stopMakers[3]] }),style: function (feature) {//如果动画是激活的就隐藏geoMarkerif (animating && feature.get('type') === 'geoMarker') {return null;}return styles[feature.get('type')];}});//var center = ol.proj.fromLonLat([115.981,40.451]);map.addLayer(vectorLayer);// 要素移动var moveFeature = function (event) {var vectorContext = event.vectorContext; //HTML5 Canvas context，ol.render.canvas.Immediate的对象var frameState = event.frameState; //freme 的状态if (animating) {var elapsedTime = frameState.time - now; //elapsedTime 已过时间//通过增加速度，来获得lineString坐标var index = Math.round(speed * elapsedTime / 1000); //已经⾛了多少个点//console.log("#########",routeCoords[index]);if (index >= routeLength) {stopAnimation(true);return;}//fixme ---------------if( index < 14){flashFeature(0);}if( index == 14){changeStyle(0, 1);}if(index > 14 && index <43){flashFeature(1);}if(index == 43){changeStyle(1, 2);}if(index > 43 && index <63){flashFeature(2);}if(index == 63){changeStyle(2, 3);}if(index > 63 && index <85){flashFeature(3);}if(index == 85){changeStyle(3, 3);}//fixme--------------------var dx,dy,rotation,carStyle;if(routeCoords[index] && routeCoords[index+1]){dx=routeCoords[index][0]-routeCoords[index+1][0];dy=routeCoords[index][1]-routeCoords[index+1][1];rotation = Math.atan2(dy,dx);//console.log("***********",rotation);carStyle= new ol.style.Style({image: new ol.style.Icon({src: require('../../assets/map/left_red_car.png'),rotateWithView: false,rotation: -rotation,scale:0.3,})});var currentPoint = new ol.geom.Point(routeCoords[index]); //当前点var feature = new ol.Feature(currentPoint);//Render a feature into the canvas.// Note that any zIndex on the provided style will be ignored - features are rendered immediately in the order that this method is called. // If you need zIndex support, you should be using an yer.Vector insteadvectorContext.drawFeature(feature, carStyle);}}//继续动画效果map.render();};function changeStyle(previous,next) {//console.log(stopMakers[previous]);stopMakers[previous].setStyle(new ol.style.Style({image: new ol.style.Circle({radius: 10,snapToPixel: false,fill: new ol.style.Fill({color: 'green'}),stroke: new ol.style.Stroke({color: 'white',width: 2})})}));}var colors=['red','green'];var colorIndex=0;function flashFeature(index) {var color;colorIndex++;colorIndex=colorIndex % 30;if(colorIndex < 15){color=colors[0];}else {color = colors[1];}stopMakers[index].setStyle(new ol.style.Style({image: new ol.style.Circle({radius: 10,snapToPixel: false,fill: new ol.style.Fill({color: color}),stroke: new ol.style.Stroke({color: 'white',width: 2})})}));}function startAnimation() {if (animating) {stopAnimation(false);} else {animating = true;now = new Date().getTime(); /** 开始时的时间*/speed = speedInput.value;startButton.textContent = '结束运动';//隐藏geoMarkergeoMarker.setStyle(null);//设置显⽰范围//map.getView().setCenter(center);map.on('postcompose', moveFeature); /** postcompose事件-- 地图渲染时都会触发 */map.render();}}/*** @param {boolean}结束动画*/function stopAnimation(ended) {animating = false;startButton.textContent = '开始运动';//如果动画取消就开始动画var coord = ended ? routeCoords[routeLength - 1] : routeCoords[0];/** @type {ol.geom.Point} */(geoMarker.getGeometry()).setCoordinates(coord);//移除监听map.un('postcompose', moveFeature); /** 解除postcompose 事件 */}startButton.addEventListener('click', startAnimation, false);}以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。

2015 OpenLayers_3_入门教程详细版

layers:[
yer.Tile({
title:"Global Imagery",
source:newol.source.TileWMS({
url:'/geowebcache/service/wms',
params:{LAYERS:'bluemarble',VERSION:'1.1.1'}
1.2.2
OpenLayers带有一个默认的样式表，指定地图相关的元素应如ห้องสมุดไป่ตู้显示，我们明确的将样式表引用到map.html页面中。
OpenLayers不对地图的大小做预定义，因此在默认样式表之后，我们需要包括至少一个自定义样式声明来说明地图在页面上的空间。
<linkrel="stylesheet"href="ol3/ol.css"type="text/css">
})
})
],
不用担心对以上的语法不了解，图层创建在后续章节中会有详细的介绍。最重要的是理解地图显示的是图层的集合。为了显示一副地图，至少需要添加一个图层。
最后一步是定义视图，指定投影、中心点，放大级别，在该示例中，还指定了maxResolution，以确保请求的范围不超过GeoWebCache能处理的范围。
],
view:newol.View({
center: [0,0],
zoom:2
}),
target:'map'
});
</script>
O
1 地图显示
1
在openlayers中，Map是图层、各种交互以及处理用户交互控件的集合，地图由三个基本成分生成：标记，样式声明和初始化代码。以下是一个完整的OpenLayers3地图示例。

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键时通过⿏标来进⾏旋转地图。

vue集成openlayers加载geojson并实现点击弹窗教程

vue集成openlayers加载geojson并实现点击弹窗教程本⽂实例为⼤家分享了vue+openlayers加载geojson并实现点击弹窗教程，供⼤家参考，具体内容如下第⼀步：安装vue-clicnpm install -g @vue/cli第⼆步：新建⼀个项⽬1.新建项⽬（vue-openlayers为项⽬名）,并选择default模版vue create vue-openlayers2.安装openlayerscnpm i -S ol第三步：写业务代码1.删除掉HelloWorld.vue 新建 olmap.vue组件components/olmap.vue代码：<template><div id="map" ref="rootmap"><div class="vm"><div id="popup" class="ol-popup" ref="popup"><a href="#" id="popup-close" class="ol-popup-closer" @click="closePopup"></a><div class="popup-content"><table id="routeBox"><tbody><tr></tr><tr><td>所在图层：</td><td>{{layerName}}</td></tr><tr><td>handle：</td><td>{{handle}}</td></tr><tr><td>块名称：</td><td>{{blockName}}</td></tr></tbody></table></div></div></div></div></template><script>import "ol/ol.css";import { Map, View } from "ol";// import TileLayer from "ol/layer/Tile";import VectorLayer from "ol/layer/Vector";// import OSM from "ol/source/OSM";import VectorSource from "ol/source/Vector";// import Feature from "ol/Feature";import GeoJSON from "ol/format/GeoJSON";import Style from "ol/style/Style";import Stroke from "ol/style/Stroke";import Fill from "ol/style/Fill";// import Select from "ol/interaction/Select"// import {bbox} from 'ol/loadingstrategy';import Point from "ol/geom/Point";import { transform } from "ol/proj";import Text from "ol/style/Text";import Overlay from "ol/Overlay";export default {data() {return {map: null,allFeatures: null,layerName: null,blockName: null,handle: null,overlayer: null,};},mounted() {this.initMap()},methods: {initMap(){var extent = [11285.0710*******,20056.574012374178,61290.31172946711,33996.47243386325];var wfsVectorSource = new VectorSource({url: 'http://localhost:8082/geoserver/workhome/ows?service=WFS&version=1.0.0&request=GetFeature&typeName=workhome%3A28f&outputFormat=application%2Fjson', format: new GeoJSON(),// features: Feature,// strategy: bbox})var wfsVectorLayer = new VectorLayer({style: new Style({stroke: new Stroke({// color: 'blue',color: 'rgba(30,144,255)',width: 3}),fill: new Fill({color: 'rgba(0, 0, 255, 0.1)'})}),source: wfsVectorSource,visible:true,})this.map = new Map({target: "map",layers: [wfsVectorLayer],view: new View({center: [31955.4551374715, 28165.253430237015],projection: 'EPSG:3857',zoom: 14}),});// this.map.addLayer()this.map.getView().fit(extent, this.map.getSize());// this.map.getView().setZoom(14);var that = this// 2. 创建Overlay图层that.overlayer = new Overlay({element: this.$refs.popup, // 弹窗标签，在html⾥autoPan: true, // 如果弹窗在底图边缘时，底图会移动autoPanAnimation: { // 底图移动动画duration: 250}})if(timer){clearInterval(timer)}var timer = setTimeout(() =>{var fs = wfsVectorSource.getFeatures()that.allFeatures = fsconsole.log('allFeatures',that.allFeatures)},3000);//Vector第⼀种单击事件// var selectSingleClick = new Select();// this.map.addInteraction(selectSingleClick);// selectSingleClick.on('select', function(e) {// // var p = e.mapBrowserEvent.coordinate// // console.log('p',p)// console.log(e)// var features=e.target.getFeatures().getArray();// if (features.length>0)// {// console.log('length',features.length)// var feature=features[0];// console.log('feature',feature)// })//Vector第⼆种单击事件this.map.on('singleclick',mapClick);function mapClick(e){var p = e.coordinatevar p1 = new Point(transform(p, 'EPSG:3857', 'EPSG:4326')).getCoordinates();console.log(p)console.log('this.allFeatures.length',that.allFeatures)for(let j=0;j<that.allFeatures.length-1;j++){var b1 = new Point(transform(that.allFeatures[j].getGeometry().getClosestPoint(p), 'EPSG:3857', 'EPSG:4326')).getCoordinates(); var b2 = new Point(transform(that.allFeatures[j+1].getGeometry().getClosestPoint(p), 'EPSG:3857', 'EPSG:4326')).getCoordinates(); var x1 = that.getDistance(p1[0],p1[1],b1[0],b1[1]);var x2 = that.getDistance(p1[0],p1[1],b2[0],b2[1]);let fea = that.allFeatures[j+1]if(x1<x2){that.allFeatures[j+1] = that.allFeatures[j]that.allFeatures[j] = fea}}let a = that.allFeatures[that.allFeatures.length-1]that.overlayer.setPosition(p)that.map.addOverlay(that.overlayer)a.setStyle(that.polygonStyle())that.map.getView().setCenter(p)console.log(a)}},// 关闭弹窗closePopup: function(){console.log(this)// 把弹窗位置设置为undefined，并清空坐标数据this.overlayer.setPosition(undefined)this.currentCoordinate = null},//计算两点之间距离getDistance: (lat1, lng1, lat2, lng2)=>{lat1 = lat1 || 0;lng1 = lng1 || 0;lat2 = lat2 || 0;lng2 = lng2 || 0;var rad1 = lat1 * Math.PI / 180.0;var rad2 = lat2 * Math.PI / 180.0;var a = rad1 - rad2;var b = lng1 * Math.PI / 180.0 - lng2 * Math.PI / 180.0;var r = 6378137;return r * 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) + Math.cos(rad1) * Math.cos(rad2) * Math.pow(Math.sin(b / 2), 2))) },//设置⾼亮样式polygonStyle: ()=>{var style = new Style({fill: new Fill({ //⽮量图层填充颜⾊，以及透明度color: 'rgba(220, 20, 60, 1)'}),stroke: new Stroke({ //边界样式lineDash:[6],//注意:该属性为虚线效果，在IE10以上版本才有效果color: '#FF0000',width: 2}),text: new Text({ //⽂本样式font: '20px Verdana,sans-serif',// text:feature.attr.dmaName,fill: new Fill({color: '#FF0000'})})});return style;}}};<style>#map{height:100%;}/*隐藏ol的⼀些⾃带元素*/.ol-attribution,.ol-zoom { display: none;}.ol-popup {position: absolute;background-color: #fff;-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2)); filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));padding: 15px;border-radius: 10px;border: 1px solid #cccccc;bottom: 12px;left: -50px;min-width: 280px;}.ol-popup:after,.ol-popup:before {top: 100%;border: solid transparent;content: " ";height: 0;width: 0;position: absolute;pointer-events: none;}.ol-popup:after {border-top-color: #fff;border-width: 10px;left: 48px;margin-left: -10px;}.ol-popup:before {border-top-color: #cccccc;border-width: 11px;left: 48px;margin-left: -11px;}.ol-popup-closer {text-decoration: none;position: absolute;top: 2px;right: 8px;}.ol-popup-closer:after {content: "✖";}</style>App.vue代码：<template><div id="app"><olmap /></div></template><script>import olmap from './components/olmap.vue'export default {name: 'app',components: {olmap}}</script><style>*{padding:0; margin:0;}html,body{height: 100%;}#app {height: 100%;}</style>2.运⾏npm run serve以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。