openlayers6

openlayers [六] 地图交互 interaction 详解

interaction简介在OpenLayers6中，
爱玩亚索的程序员·2024-01-19 06:21

【WebGIS初学到入职】（七）用OpenLayers绘制热力图

今天就继续用OpenLayers6来做一个热力图的效果吧。
ReBeX·2024-01-10 12:23

GIS入门，开源 JavaScript二维地图引擎OpenLayers介绍

vue整合OpenLayers6入门教程：《Vue+OpenLayers入门教程汇总目录》vue整合OpenLayers6实战中文教程，包含大量OpenLayers官方文档没有涉及到的实际开发案例：《Vue
汤姆猫不是猫·2023-11-26 05:40

OpenLayers实战，WebGL图层根据Feature要素的变量动态渲染多种颜色和不同直径大小的圆形和圆点图形，适用于大量圆形圆点渲染不同颜色不同大小

WebGL图层样式运算符详解系列OpenLayers入门，OpenLayers6的WebGLPoin
汤姆猫不是猫·2023-11-23 04:05

OpenLayers实战，WebGL图层根据Feature要素的变量动态渲染多种颜色的三角形，适用于大量三角形渲染不同颜色

WebGL图层样式运算符详解系列OpenLayers入门，OpenLayers6的WebGLPoi
汤姆猫不是猫·2023-11-23 04:35

OpenLayers入门，OpenLayers6的WebGLPointsLayer图层样式和运算符详解，四种symbolType类型案例

专栏目录：OpenLayers入门教程汇总目录前言本章讲解使用OpenLayers6的WebGL图层显示大量点情况下，列举出所有WebGLPointsLayer图层所支持的所有样式运算符大全。
汤姆猫不是猫·2023-11-23 04:33

openlayer中控制图层的显示和隐藏

参考：openlayers6【十二】vue切片图层TileLayer切换地图底图，图层叠加效果_范特西是只猫的博客-CSDN博客_vue图层叠加方式一：Layer.setVisible(true)一种是通过
疆~·2023-11-14 08:49

openlayers6图形标绘（一）

openlayers6使用ol.interaction.Draw对象进行标绘，具体方法分为创建页面基本元素、调用地图基本服务、创建并添加标绘图层、添加具体ol.interaction.Draw对象。
wchwdog13·2023-11-13 15:54

OpenLayers地图基本概念（Map、View、Layer、Source四种基本类型）和背景介绍，OpenLayers官方文档翻译，OpenLayers官方中文教程，OpenLayers中文指南

vue整合OpenLayers6入门教程：《Vue+OpenLayers入门教程汇总目录》vue整合OpenLayers6实战中
汤姆猫不是猫·2023-11-01 01:13

基于Vue的Openlayers6自定义测量组件，直接拿来用

基于Vue的Openlayers6自定义测量组件，直接拿来用功能需求实现主要API源代码在做WebGIS项目开发时，往往都有一个测量的基础功能，这个功能虽然不算太难，但是往往确花费不少的时间去完成，以前都是基于
GIS小猪·2023-10-27 22:26

openlayers6加载各种地图服务

MapService.js代码/*各种地图服务的公共接口*/importTileLayerfrom'ol/layer/Tile';importXYZfrom'ol/source/XYZ';importWMTSfrom'ol/source/WMTS';importTileWMSfrom'ol/source/TileWMS';importTileImagefrom"ol/source/TileImag
WebGiser·2023-10-20 01:32

OpenLayers6（3）：Vue导出图片时报错“Uncaught DOMException: Failed to execute ‘toDataURL on ‘HTMLCanvasElement”

1.版本OpenLayers：6.4.32.导出时候遇到报错3.原因分析原因：openlayers中加载的图层中存在不允许跨域的图层；解决：找到相应的图层，添加crossOrigin:'anonymous'，处理跨域问题；//切片-图层exportfunctionaddlocalTileLayer(title,url,proj='EPSG:3857'){consttileLayer=newTile
碰碰qaq·2023-10-17 11:11

WebGIS地图相关学习笔记

进阶问题Web地图服务规范(WMS、WMTS、TMS)简析_surpassLiang的博客-CSDN博客_wmts地图服务EPSG:4326EPSG:3857的区别openlayers6【十】EPSG:
⑥②·2023-08-31 17:41

openlayers6 添加道路图层 并点击道路高亮显示

第一种方法首先，在初始化地图时，创建一个新的VectorLayer对象，并将其添加到地图上。这个新图层将用于高亮显示选中的道路。例如：this.highlightLayer=newVectorLayer({zIndex:9999,source:newVectorSource({features:[]}),style:newStyle({stroke:newStroke({color:'#ff000
CV工程师!!·2023-08-15 08:21

openlayers6 显示矢量框（已知四个点坐标）

没有四角坐标创造四角坐标getPolygon(row){/*右上角坐标经度*/letrightUpLon=row.dmUrLon;/*右上角坐标纬度*/letrightUpLat=row.dmUrLat;/*左上角坐标经度*/letleftUpLon=row.dmUlLon;/*左上角坐标纬度*/letleftUpLat=row.dmUlLat;/*右下角坐标经度*/letrightDownLon
膨胀的泡·2023-08-12 09:33

openlayers6：入门基础（二）之加载图层

#前言APIDocs：https://openlayers.org/en/latest/apidoc/Tutorials：https://openlayers.org/en/latest/examples/底图资源1：tileLayers底图资源2：openwhatevermap#一、瓦片图层OpenLayers支持从OSM、Bing、MapBox、Stamen和其他任何XYZ瓦片资源中提取地图瓦
Dawn_www·2023-08-08 13:29

openlayers6：入门基础（一）

#前言资源：OpenLayers3示例资源：OpenLayers_3_入门教程完整版.pdf#下载官网：https://openlayers.org/download/这里根据自己所需点击下载即可（1）-dist.zip仅包括开发库（开发与调试的js库、css样式），文件大小约1M；（2）.zip包括开发库、开发库代码、示例、API等所有的开发资源，文件大小约27M；在进行具体开发时，引用Open
Dawn_www·2023-08-08 13:58

OpenLayers实战进阶专栏目录，OpenLayers实战案例，OpenLayers6实战教程

前言本篇作为OpenLayers实战进阶教程的目录，用于整理汇总专栏所有文章，方便查找。OpenLayers是前端最流行的JS二维地图引擎之一。反馈建议OpenLayers系列-交流专区，建议和问题反馈Openlayers实战进阶Openlayers实战，Openlayers如何设置米作为作为圆形的真实半径，解决圆形半径跟随地图缩放同时缩放的失真问题轨迹和迁徙图Openlayers实战，Openl
汤姆猫不是猫·2023-08-01 08:02

openlayers6 显示mapserver影像

letmapfile=row.dmImageOverview+"//"+row.dmImageId+".map";leturl=this.global.MAPSERVER_PATH;letwmsParam={map:mapfile,LAYERS:row.dmImageId,transparent:true};letrouteLayer=newthis.TileLayer({name:row.dmI
膨胀的泡·2023-08-01 00:24

OpenLayers入门教程汇总目录，OpenLayers教程，OpenLayers中文文档，OpenLayers手册，OpenLayers6文档教程，OpenLayers7中文手册

前言本篇作为OpenLayers入门教程的目录，用于整理汇总专栏所有文章，方便查找。OpenLayers是唯一可以支撑百万数据量点位的JS二维地图引擎。学前必读OpenLayers入门系列-交流专区，建议和问题反馈介绍Gis开发入门，OpenLayers、Leaflet、Maplibre-gl和Cesiumjs地图引擎介绍以及几种地图服务vms、vmts介绍入门HTML网页原生如何使用OpenLa
汤姆猫不是猫·2023-07-28 20:20

OpenLayers6（5）：基于kriging.js实现插值渲染图

1版本OpenLayers：6.4.32相关配置importkrigingfrom'@sakitam-gis/kriging';3使用kriging.js3.1数据准备待准备数据以通用的geojson数据格式即可待插值得矢量点数据：本例使用河南省XXX点数据待插值的范围边界数据：本例使用河南省边界3.2样本训练Thetrainmethodinthekrigingobjectfitsyourinpu
碰碰qaq·2023-06-21 05:18

openlayers6 mapserver加载地图底图

import'ol/ol.css'import{Map,View,Feature}from'ol'importVectorLayerfrom"ol/layer/Vector";importVectorSourcefrom"ol/source/Vector";importTileLayerfrom"ol/layer/Tile";importTileWMSfrom'ol/source/TileWMS'
膨胀的泡·2023-04-14 10:31

OpenLayers加载不同类类型的天地图(矢量图、影像图、地形图)并实现动态切换效果

一、涉及技术及数据开发库：OpenLayers6、Jquery地图源：天地图(矢量图、影像图、地形图)二、实现思路及代码1.初始化地图，加载三种类型的天地图源作为底图varTiandiMap_vec=newol.layer.Tile
动立信息服务·2023-03-29 19:16

基于openlayers6的基本地图操作--5. 测距测面

参考官网例子，修改封装成measure.jsimportDrawfrom'ol/interaction/Draw';import{unByKey}from'ol/Observable.js';importOverlayfrom'ol/Overlay';import{getArea,getLength}from'ol/sphere.js';import{LineString,Polygon}from
初见_JS·2023-03-24 03:43

OpenLayers如何获取手动绘制的GeoJson数据

记录下使用OpenLayers6遇到的问题和解决方案。2.需求最近在做一个智能选址的功能，有一个需求是需要在地图上绘制一个几何多边形后获取绘制形状的GeoJson数据
前端小黑·2023-03-23 14:23

openlayers6 踩坑系列（三）绘制和编辑（矩形，圆，多边形，点，线）

重要：博客内使用地图全替换为WMap，想使用的请参考我这篇博客（WMap）最近在做矢量图形这一块，发现圆形和多边形，都可以使用openlayers自带的Modify类进行编辑，然后随意放大缩小旋转，但是矩形尤为特别，因为矩形属于Polygon，也是多边形的一种,但是却实现不了矩形的编辑，为此，我以下做了最全的矢量图主动绘制、根据坐标点绘制和编辑的功能，有不懂的可以评论哦，我一般都会看的~（因为是我
林大大哟·2023-01-07 20:17

OpenLayers6学习笔记（四）—— 图层切换

importReact,{useRef,useState,useEffect}from'react';import{Map,View}from'ol';importTileLayerfrom'ol/layer/Tile';import{defaults}from'ol/control';import{fromLonLat}from'ol/proj';import{OSM,Stamen,BingMa
·2022-10-20 22:20

OpenLayers6学习笔记（二）—— 地图控件

一.控件简介归属控件（Attribution）：展示地图资源的版权或归属，默认加入到地图中。全屏控件（FullScreen）：控制地图全屏展示。坐标拾取控件（MousePosition）：显示鼠标所在地图位置的坐标。鹰眼控件（OverviewMap）：地图的一个概览图。比例尺控件（ScaleLine）：地图比例尺。旋转控件（Rotate）：控制地图旋转，默认加入到地图中，alt+shift+左键旋
·2022-10-18 11:50

OpenLayers6学习笔记（一）—— 初始化一个地图

一.OpenLayers概述Map、Layer、Source和View是OpenLayers框架体系中的核心类，几乎所有的动作都围绕这几个核心类展开，以实现地图的加载与其相关操作。在OpenLayers框架体系中：把整个地图看作一个容器（Map），核心为地图图层（Layer），每个图层有对应的数据源（Source），并且由地图视图（View）控制地图表现。地图容器上还支持一些与用户交互的控件（Co
·2022-10-12 16:08

openlayers6之地图覆盖物overlay详解

1.overlay简述overlay是覆盖物的意思，顾名思义就是在地图上以另外一种形式浮现在地图上，这里很多同学会跟图层layers搞混淆，主要是放置一些和地图位置相关的元素，常见的地图覆盖物为这三种类型，如：popup弹窗、label标注信息、text文本信息等，而这些覆盖物都是和html中的element等价的，通过overlay的属性element和html元素绑定同时设定坐标参数——达到将
·2021-09-15 14:10

openlayers6之地图覆盖物overlay三种常用用法(popup弹窗marker标注text文本)

目录1.写在前面2.overlay实现popup弹窗2.1vue页面addPopup()方法详解2.2autoPan属性为false效果3.overlay实现label标注信息4overlay实现text文本信息5.附上完整代码1.写在前面常见的地图覆盖物为这三种类型，如：popup弹窗、label标注信息、text文本信息等。上篇讲了overlay的一些属性方法事件等，这篇主要讲overlay三
·2021-09-15 14:10

WebGIS引擎现状与未来

一引言作为十年GIS老兵，常常遇到同行或领导的灵魂拷问，“为什么我们不用google地图啊，我看它的3D很好啊”，“OpenLayers6支持3D吗？”
遥想公瑾当年·2021-04-12 19:09

openlayers6 快速定位（已知四个点坐标）

rapidPositioning(row){letpolygon=此处省略newPolygon();this.map.getView().fit(polygon,{padding:[170,50,30,150]});},已知四点坐标，初始化多边形，自动定位到多边形即可。
膨胀的泡·2021-01-26 09:11

openlayers6 使用ol.map＞ol.view center属性无效及解决方案

openlayers6使用ol.map>ol.viewcenter属性无效及解决方案原因分析：原因分析：Theinitialcenterfortheview.Ifauserprojectionisnotset
少年啦1997·2020-10-09 23:35

angular使用openlayers6以及加载百度地图

angular中使用openlayers本来是没什么难度的，但是如果要加载百度地图还是有些问题的，在openlayers3中坐标是从原点右上递增，而openlayers6中是右下递增，这就导致使用百度地图作为底图时出现图层错乱的问题
不要葱花·2020-09-30 22:39

Openlayers6 Examples学习笔记（9）

文章目录TopoJSON（加载TopoJSON数据）EditableArcGISRESTFeatureService（可编辑的ArcGISREST要素服务）TranslateFeatures（移动要素）SelectmultipleFeatures（选中多个要素）TileJSON（加载TileJSON数据）VectorTileSelection（矢量瓦片选中要素）ArcGISRESTFeatureS
何去何从2857·2020-09-15 23:25

openLayers6系列理论基础——View篇

openLayers6系列理论基础——View篇view视图是初始化地图Map时候必要的三要素之一，这个对象的作用主要是控制地图与人的交互，如缩放等一、实例化一个view对象newol.View({options
小湾生产队队长·2020-09-15 23:47

关于使用openlayers6和leaflet同时加载高德和百度的问题记录（leaflet篇）

先说leaflet,leaflet默认使用的坐标系是EPSG:3857，百度地图：使用百度坐标系高德地图：火星坐标系（GcJ02）leaflet是默认支持GcJ02的，而且leaflet提供了这个插件L.tileLayer.chinaProvider，可以引入高德、谷歌、天地图，不用经过转化。但是百度坐标就需要进行额外的转化:代码如下（本人只是个代码搬运工~~）/***百度地图底图调用插件*@au
翠莲·2020-08-15 20:46

解决openlayers6加载百度地图出现偏移问题

1、问题ol6加载百度地图出现的问题2、原因由于openlayers6加载地图的方式是右下递增，原先是右上递增，所以在原先加载百度地图的基础之上，将tileUrlFunction中的y坐标变为原先的相反数即可
43685945·2020-08-15 20:01

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.画省，市，区的边界效果4.1如：四川省（下载对应的geojson数据）4.2如：成都市，金牛区（下载对应的geojson数据）5.画多省市区(粤港澳大湾区)效果1.VectorLayer矢量图层的
@必意玲·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

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

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

openlayers6【十四】ol.proj类实现EPSG:3857和EPSG:4326坐标转换

openlayers6【十】EPSG:3857和EPSG:4326区别详解ol.proj类主要实现以下功能，说通俗点就是实现坐标转换的类。转换为指定的
@必意玲·2020-08-15 19:36

React 集成 OpenLayers6 加载天地图、百度、谷歌图层入门篇

一、请先学习OpenLayers入门篇es6之第一个地图链接:https://blog.csdn.net/qq_17025903/article/details/104843667二、天地图矢量图层加载创建TiandituMap.jsTiandituMap.cssTiandituMap.jsimportReactfrom'react';import'ol/ol.css';import{Map,Vi
南归北隐·2020-08-15 19:11

Openlayers源码实践系列：探索layer的渲染机制——从分析OpenLayers 6 的WebGLPointsLayer动画效果实现说起

OpenLayers6之前的老版本是不支持动画渲染的，如果想要实现动画要素效果，需要利用OpenLayers的render机制来实现动画帧的渲染。
战斗中的老胡·2020-08-15 18:38

Openlayers6 Examples学习笔记（10）

文章目录WFS-GetFeature（获取要素，查询过滤）WMSGetLegendGraphic（获取图例）WMS512x256TilesSingleImageWMSWMTS（加载WMTS图层）WMSTime（时间动态更新数据）重点TiledWMSWrapping（WMS瓦片包裹）WMSwithoutProjection（加载未知投影WMS数据）WMTSTileTransitionsWMTSLay
何去何从2857·2020-08-15 18:41

Openlayers6 Examples学习笔记（8）

文章目录SelectFeatures（选中要素）ScaleLine（比例尺控件）SelectFeaturesbyHover（鼠标悬浮高亮选中要素）StaticImage（加载静态图片）SnapInteraction（捕捉交互集成）StamenTiles（Stamen瓦片地图）SyntheticLines（合成线）StreetLabels（路线标注-沿路径轨迹）TeleportingMaps（传送地
何去何从2857·2020-08-15 18:41

Openlayers6 Examples学习笔记（5）

文章目录ViewAnimation（视图动画）GPXDataMapGraticule（地图网格）EarthquakesHeatmap（地震震级热力图）HitToleranceIconColors（自定义图片颜色）VectorLayerHitDetection（矢量图层高亮）IconSymbolizer（图标符号）VectorImageLayer（图层高亮）GeoJSON（加载GeoJSON数据）J
何去何从2857·2020-08-15 18:41
上一页 1 2 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他