OpenLayers地图api

openlayers开发中遇到的问题

最近做了一个web平台，其中有一个地图服务的模块，包含了一些常见的地图操作和轨迹功能，经讨论最终选择了openlayers4作为地图引擎，这里将开发过程中遇到的问题和解决方案贴出来供大家参考，小弟第一次写博客
remy0817·2020-08-15 19:33

vue + openlayers 实现省市区的描边界与区域填充 (后续)

{{item.features[0].properties.name}}.cityList{width:98%;text-align:center;border-collapse:separate;border-spacing:8px;display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;.item{pa
royal-·2020-08-15 19:28

openlayers 导出png格式

newol.layer.Tile({source:newol.source.OSM()}),newol.layer.Vector({source:newol.source.Vector({url:'https://openlayers.org
qq_45658025·2020-08-15 19:57

vue页面 单独引入外部cdn 或 地图api 方式

-->import{portData}from"../../services/mixins";//importAMapfrom'AMap';import{mixinsToast}from"@/services/mixins";importplatformApifrom'@/servicesApi/platformApi/platformApi'exportdefault{mixins:[mixin
折梦扳手·2020-08-15 19:57

openlayers 显示标记好的坐标点

openlayers显示标记好的坐标点今天由于特殊情况接触到这个新的javascript地图库，openlayers官网英文文档（脑袋疼）废话不多说开搞！
我是小卡车呀·2020-08-15 19:50

Openlayers记录（七）利用ol3进行缓冲区的空间相交分析

Openlayers记录（七）利用ol3进行缓冲区的空间相交分析1效果实现代码首先需要添加引用文件jsts.js,坐标问题阴影proj4.js：//空间分析varproj=newol.proj.Projection
无邪不斜·2020-08-15 19:45

openlayers判断点击的经纬度坐标是否在图层中

点击地图或者鼠标在地图上面滑动时所经过的坐标是否在否个图层上map.on('pointermove',function(e){isLocationArr=newArray();//转换为webmerctor投影vardestinationPro="EPSG:3857";//地理原始投影varsourcePro='EPSG:4326';varfeatureCoords=ol.proj.transfo
uNlanD·2020-08-15 19:45

Openlayers记录（二）热力图heatmap。

Openlayers记录（二）热力图heatmap。
无邪不斜·2020-08-15 19:44

OpenLayers记录（六）模糊查询数据，列表显示并点击定位

OpenLayers记录（六）模糊查询数据，列表显示并点击定位1实现效果2实现代码/**************模糊查询**************///监听回车事件functiononKey(e){vareve
无邪不斜·2020-08-15 19:44

Openlayers记录（三）iClient for ol 实现聚合标签专题图。

Openlayers记录（三）iClientforol实现聚合标签专题图。
无邪不斜·2020-08-15 19:44

WebGIS开发基于Openlayers_地图添加与默认控件添加删除

1.代码与显示效果AccessibleMap放大缩小旋转复位varmap=newol.Map({layers:[newol.layer.Tile({source:newol.source.OSM({wrapX:false})})],target:'map',controls:ol.control.defaults({attributionOptions:/**@type{olx.control.A
刘彩虹·2020-08-15 19:04

OpenLayers在线调用天地图并绘制点状符号进行标记

OpenLayers在线调用天地图并绘制点状符号进行标记在做web开发时，需要用openlayers调用天地图作为底图进行开发，并绘制一些点、线、面图形进行标记。
努力搬砖的giser·2020-08-15 19:04

使用openlayers加载OSM地图

一，安装olcnpmiol-S二，在components文件夹下面新建olmap.vueimport'ol/ol.css'import{Map,View}from'ol'importTileLayerfrom'ol/layer/Tile'importOSMfrom'ol/source/OSM'exportdefault{data(){return{};},mounted(){newMap({tar
~李疆·2020-08-15 19:29

vue使用百度地图API通过经纬度定位子公司的分布情况

1.引入百度地图秘钥：2.完整代码：importcrudPublicfrom'@/api/public'exportdefault{name:'MapChart',data(){return{json_data:[]}},created(){this.$nextTick(()=>{this.getMapData()})},mounted(){setTimeout(()=>{//this.initM
MrsTing·2020-08-15 19:29

openlayers绘制自定义点线面样式,带清除功能Vue版

openlayers绘制自定义点线面样式,带清除功能初学openlayers有不足之处还望轻喷,多谢项目用的是vue,elementUI,以及scss啊…本来点线面都录制了一个gif图,因为某些原因只剩下一个线的了
我小子真帅·2020-08-15 19:27

OpenLayers3 地图图层(Layers) 详解

在OpenLayers中，图层是使用layer对象表示的，主要有热度图层(heatmaplayer)、图片图层(imagelayer)、切片图层(tilelayer)和矢量图层(vectorlayer)
何木木·2020-08-15 19:25

OpenLayers基础

OpenLayers基础基本概念：Map((Layer(Source),View()))**Map:**是OpenLayers的核心部分，被放到target容器中。
汪大玉最美丽·2020-08-15 19:53

Openlayers扩散的动态点（水纹效果）

在openlayers中制作危险源标识可以需要动态扩散的点（有很多种方法可以加入jpg动图，也可以写css动画）这里提供一种思路用openlayer自带的方法写并给予详细的方法注释供初学者学习（所有jar
RNG_Never give up·2020-08-15 19:53

openlayers 实现风场效果图

开发环境：openlayers5参考：https://github.com/Esri/wind-jshttps://github.com/blissvisitor/wind-layerhttps://github.com
搬砖的人生·2020-08-15 19:49

openlayers 轨迹回放

参考：https://openlayers.org/en/latest/examples/feature-move-animation.html?
搬砖的人生·2020-08-15 19:49

基于ol-plot的openlayers 5 的标绘地图

代码基于以下版本做修改获得，因为公司的原因，并不是用vue.js开发，用的是jquery，别问为什么，问就是公司技术不肯革新，公司小，没成本和人力做新技术的引进和研发。https://github.com/sakitam-fdd/ol-plot/tree/masterhttps://sakitam-fdd.github.io/ol-plot/据说一下版本支持ol6https://github.co
搬砖的人生·2020-08-15 19:49

openlayers6【十九】vue HeatmapLayer热力图层实现热力图效果详解

参数2.2实现热力图3.完整代码4.添加删除map图层的方法5.热力图自身的get，set方法1.写在前面本问下面有矢量图层设置的区域，和热力图层设置的热力图的效果，区域绘制效怎么设置详细内容可以访问openlayers6
@必意玲·2020-08-15 19:43

openlayers6【十六】vue overlay类实现gif动态图标效果详解

文章目录1.写在前面2.效果图3.使用overlay类，地图添加动态图标4.css设置gif图标5.完整代码1.写在前面openlayer里面支持gif图标上图的只有overlay类可以实现，矢量图层Vector不能设置动态的gif图标，只能设置静态的png，jpg文件，或者base64等数据overlay类的常见使用场景更多可以看看这篇文章地图覆盖物overlay三种常用用法popup弹窗，ma
@必意玲·2020-08-15 19:43

openlayers6【十七】vue VectorLayer矢量图层画地图省市区，多省市区(粤港澳大湾区)效果详解

文章目录1.VectorLayer矢量图层的理解2.openlayers通过坐标点画中国地图2.1准备边界的data数据2.2准备china.json的数据文件2.3实现区域描边方法详解2.4完整代码4
@必意玲·2020-08-15 19:43

openlayers6【十五】地图样式 Style类详解

文章目录1.写在前面2.ol.style属性及子类2.1可以配置的选项2.2子类（针对矢量要素）3.ol.style样式举栗详解3.1geometry：要素的属性3.2.fill：填充样式3.3stroke：边界线条3.4image：图片样式3.5.text-文字3.6.ol.style设置动态样式4.写在最后1.写在前面地图样式是由style类控制的，其包含了地图样式的方方面面，例如，填充色、图
@必意玲·2020-08-15 19:43

openlayers 6【四】地图图层Layers详解

文章目录1.什么是图层？？？1.1线状图层1.2点状图层1.3面状图层2.图层存在一个或者多个3.Layers的常见属性4.Layers各种图层及图层类型4.1`Graticule`地图上覆盖的网格标尺图层4.2`HeatMap`，热力图层4.3`Vector`，矢量图层4.4`ImageLayer`单张图片的矢量图层4.5`VectorTileLayer`，矢量瓦片图层4.6`WebGLPoin
@必意玲·2020-08-15 19:42

openlayers 6【二】Map地图详解，初始化一个map地图

目录1.map参数详情参考2.话不多说，先看渲染出来的效果2.在vue环境下，创建一个Map地图3.代码分析4.说在后面1.map参数详情参考官方文档：https://openlayers.org/en
@必意玲·2020-08-15 19:42

openlayers6【五】地图图层数据来源 source 详解

source数据源都有哪些类型2.source用法实例2.1ol.source.Vector的使用（矢量图层的数据来源）2.2ol.source.Image的使用（提供单一的图片地图）3.写在后面1.写在前面在openlayers6
@必意玲·2020-08-15 19:42

openlayers 删除点 ol/source/Vector.js.VectorSource.removeFeature解决方案

背景：openlayers实现地图打点，根据数据的变化修改点的位置data//点的经纬度coordinates:[//{x:37.12638163,y:15.1353712537},//{x:82.56253054272383
@必意玲·2020-08-15 19:42

OpenLayers教程：图形绘制之设置图形的样式

OpenLayers可以对整个矢量图层统一设置样式，也可以单独对某个要素设置样式，本文介绍对整个矢量图层设置样式。
不睡觉的怪叔叔·2020-08-15 19:41

OpenLayers教程三：地图控件之缩放控件

目录一、地图控件简介二、普通缩放控件三、滑块缩放控件四、缩放至特定位置控件五、修改控件样式一、地图控件简介OpenLayers封装了很多控件用于对地图进行操作、显示地图信息等。
不睡觉的怪叔叔·2020-08-15 19:40

OpenLayers教程九：多源数据加载之瓦片地图原理一

目录一、瓦片地图简介二、LOD一、瓦片地图简介瓦片地图（也叫切片地图）源于一种大地图解决方案，就是在多个比例尺下配置地图，然后提前把每个比例尺下的地图绘制为小块图片（瓦片），保存在服务器上用于缓存的目录中。这样客户端在访问地图时，可以直接获取需要的小块图片拼接成整幅地图，而不是由服务器动态创建（实时创建）出一幅图片再发送到客户端，从而极大提高了访问速度。瓦片地图起始于谷歌地图。在2005年前后谷歌
不睡觉的怪叔叔·2020-08-15 19:40

OpenLayers教程五：地图控件之坐标拾取控件和鹰眼控件

目录一、坐标拾取控件二、鹰眼控件一、坐标拾取控件很多时候我们想要实时获取鼠标光标指示处对应的坐标，就像高德地图的坐标拾取：https://lbs.amap.com/console/show/pickerOpenLayers
不睡觉的怪叔叔·2020-08-15 19:40

GeoServer官方教程：矢量切片

二、矢量切片格式三、安装GeoServer的矢量切片插件四、发布GeoWebCache中的矢量切片五、创建OpenLayers应用程序六、为矢量切片修改样式一、为什么使用矢量切片（vectortiles
不睡觉的怪叔叔·2020-08-15 19:40

OpenLayers教程十六：多源数据加载之WMS（一）

目录一、WMS规范简介二、请求WMS服务的元数据二、请求WMS服务的地图图像四、请求WMS服务的地图要素信息一、WMS规范简介在WebGIS中，有多种方法在网页浏览器中显示地图：瓦片地图——事先将地图切割成瓦片，需要时再发送给客户端，瓦片可以存储在服务器或者本地矢量地图——将具有空间信息和属性信息的数据（比如GeoJSON、KML等）发送给浏览器，然后在浏览器渲染，数据可以存储在服务器或者本地矢量
不睡觉的怪叔叔·2020-08-15 19:40

OpenLayers教程八：多源数据加载之数据组织

那么在GIS对数据加载、存储、分析与操作这几个过程中，我们首先讨论在由OpenLayers构建的WebGIS系统中，数据如何合理加载。
不睡觉的怪叔叔·2020-08-15 19:40

OpenLayers教程四：归属控件与全屏控件

目录一、归属控件二、全屏控件经过上一篇文章的介绍，大家一定对OpenLayers的地图控件有一定了解了，现在接着介绍归属控件和全屏控件。
不睡觉的怪叔叔·2020-08-15 19:40

OpenLayers教程十四：多源数据加载之离线瓦片地图

本文转载自：http://weilin.me/ol3-primer/ch05/05-04.html其实离线瓦片地图和在线瓦片地图是一样的原理，都是瓦片。只是离线瓦片地图存储在本地，而且它的存取方式，可以由开发者自己来定义，而在线瓦片地图则不一定。在不理解原理的情况下，很多人拥有了离线瓦片，却不知道如何加载，所以这里单独来讲解。示例的瓦片就只有一张。如果放大或者缩小，就可能看不到地图瓦片了：瓦片：l
不睡觉的怪叔叔·2020-08-15 19:40

OpenLayers教程六：地图控件之旋转控件与比例尺控件

目录一、地图旋转控件二、比例尺控件一、地图旋转控件地图旋转控件（ol.control.Rotate）默认被自动加入到地图中，所以每一个使用OpenLayers创建的地图中都包含了旋转控件。
不睡觉的怪叔叔·2020-08-15 19:40

openlayers 利用draw交互组件实现框选功能，并显示框选经纬度

Titlebody,html{width:100%;height:100%;margin:0;font-family:"MicrosoftYaHei"}#map,#info{width:60%;height:60%;}框选范围框选范围:左上角坐标:经度：右下角坐标:经度：纬度：纬度：varstyle=newol.style.Style({fill:newol.style.Fill({color:'
码踏飞燕qaq·2020-08-15 19:09

OpenLayers官方教程二：实现简单的地图显示

目录一、下载OpenLayers二、构建简单的地图应用三、OpenLayers的DOM元素组织结构经过上一篇文章对OpenLayers的简单了解以后，现在让我们来实现一个简单的地图显示Demo。
不睡觉的怪叔叔·2020-08-15 19:08

OpenLayers多源数据加载六：各种瓦片地图加载的总结

查看OpenLayers的API文档可以发现，瓦片坐标从左向右递增，从下向上递增：因此，用OpenLayers来加载TMS规范的瓦片需要对ol.tilegrid.TileGrid类做出
不睡觉的怪叔叔·2020-08-15 19:08

OpenLayers官方示例详解十六之伪造点（Synthetic Points）

目录一、示例简介二、代码详解一、示例简介本示例首先随机生成20000个点数据，并加入到地图中，然后实现了将离鼠标最近的点高亮显示的功能。二、代码详解SyntheticPointsvarcount=20000;varfeatures=newArray(count);vare=18000000;//随机生成20000个点要素for(vari=0;i
不睡觉的怪叔叔·2020-08-15 19:07

OpenLayers教程：多源数据加载之WMTS

目录一、WMTS简介二、WMTS的接口2.1、GetCapabilities2.2、GetTile2.3、GetFeatureInfo三、加载ArcGIS产品发布的WMTS服务数据3.1、加载ArcGISOnline发布的WMTS服务数据3.2、加载ArcGISServer发布的WMTS服务数据四、加载GeoServer发布的WMTS服务数据五、加载天地图的WMTS服务数据六、总结一、WMTS简介
不睡觉的怪叔叔·2020-08-15 19:07

OpenLayers多源数据加载五：OpenLayers瓦片加载的原理

OpenLayers提供了两个类ol.Map类和ol.WebGLMap类来构建地图，ol.Map类使用canvas进行图像渲染，ol.WebGLMap类使用webgl进行图像渲染。
不睡觉的怪叔叔·2020-08-15 19:07

OpenLayers官方示例详解十三之叠置层（Overlay）

目录一、示例简介二、代码详解一、示例简介这个示例展示了如何使用叠置层（ol.Overlay）。这个示例借助了第三方库jQuery和Bootstrap。二、代码详解Overlay#marker{width:20px;height:20px;border:1pxsolid#088;border-radius:10px;background-color:#0FF;opacity:0.5;}#vienna
不睡觉的怪叔叔·2020-08-15 19:07

openlayers从数据库加载坐标点

页面请求      itsLayer.setSource(newol.source.Vector({         format:newol.format.GeoJSON(),         url:"two/showpoint.do?leaves="+zoom+"&layers="+ layerArr[i]       }));java后台接收。。。。。。StringBuffersb=new
咕噜咪·2020-08-15 19:06

vue框架用OpenLayers实现地图裁剪，定位

由于做大屏，公司想简单的做一个地图显示只想显示湖北省的地图于是就有了下面的骚操作个人记录html姓名：{{maptypeTab.makerObj.name}}机构名称：{{maptypeTab.makerObj.orgaName}}地理位置：{{maptypeTab.makerObj.loc}}jsimport'ol/ol.css';//初始化加载olimport{Map,View}from'ol
前端真好玩·2020-08-15 19:05

openlayers摸爬滚打 5.openlayers使用GeoJSON绘制点、线

上一篇了解了GeoJSON的格式在项目中我获取到后台坐标数据后，构建了GeoJSON数据，然后通过openlayers展示点绘制线示例代码如下：openlayers学习-5.openlayers使用GeoJSON
自挂东南只·2020-08-15 19:04

openLayers叠加geoserverWMS服务

1：代码展示openlayers.map{height:100%;width:100%;}varlayers=[newol.layer.Tile({source:newol.source.TileWMS
炉火纯青-旺·2020-08-15 19:04
上一页 42 43 44 45 46 47 48 49 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他