openlayers5

OpenLayers5实现点击地图查询要素信息

WebGIS开发中，点击查询是最常用的一种查询方式。本文从开源框架的角度，从前台到服务端到数据库等多个角度，多种方式实现点击查询。1、map的click事件该方法，通过鼠标在地图上点击的坐标，与当前矢量图层做相交分析查询，得到查询的要素及其所属的Layer对象import'ol/ol.css';importMapfrom'ol/Map';importViewfrom'ol/View';import
WebGiser·2023-10-22 01:46

OpenLayers5在EPSG:4326下以m为单位画圆

varcircleIn3857=newCircle(transform([121.4659,31.2],'EPSG:4326','EPSG:3857'),1000,'XY');varcircleIn4326=circleIn3857.transform('EPSG:3857','EPSG:4326');
鬼马行天·2023-08-21 11:40

OpenLayers5绘制点、线、面

Geometrytype PointLineStringPolygonCircleNoneimportMapfrom'ol/Map';importViewfrom'ol/View';importTileLayerfrom'ol/layer/Tile';importVectorLayerfrom'ol/layer/Vector';importOSMfrom'ol/source/OSM';i
WebGiser·2023-08-01 14:27

cesium加载GeoWebCache发布的ArcGIS切片（WMS和WMTS）

Geoserver2.16.1配置GeoWebCache发布ArcGISServer瓦片_晚秋10的博客-CSDN博客根据上篇文章，配好GeoWebCache发布ArcGISServer瓦片后，可以在openlayers5
晚秋10·2023-04-06 21:53

OpenLayers5通过改变STYLES属性的方式改变地图服务的样式

切换地图样式//通过修改STYLES属性，进而修改地图服务样式importMapfrom'ol/Map.js';importViewfrom'ol/View.js';importTileLayerfrom'ol/layer/Tile.js';importTileWMSfrom'ol/source/TileWMS.js';exportdefault{name:"TestOL",data(){retu
WebGiser·2023-04-05 08:03

WebGIS开发-openlayers5入门(2)

上节我们讲述如何将地图展示在页面，本节我们继续学习如何在地图上进行图形的绘制，废话不多说，开撸。基本流程newmap()---买块地newVectorLayer()、newTileLayer()---盖个房newFeature()---建个屋newPolygon()、newLineString()、newPoint()---整点家具newStyle()---搞搞装修流程有了，接下来一步一步进行代码
Hi___World·2023-03-09 23:07

openlayers5使用GeoJSON数据渲染热力图

GIS开发中会遇到需要使用热力图Heatmap的时候，openlayers5官方示例给出的是kml文件描述的热力图数据，开发中接触更多的还是GeoJSON格式，本文就使用GeoJSON格式来实现一个热力图
耗子在简书·2023-02-02 04:21

MapServer+OpenLayers5+Vue实现栅格图层数据查询

0、先上效果图1、Mapserver基础与配置【注意：以下内容默认已经安装了MapServer4.0及以上版本，WebGIS使用Openlayers5作为请求和地图渲染库，ol-ext作为弹窗UI】1.1
Oruizn·2022-08-15 00:26

Openlayers4加载WMS地图

最新的Openlayers已经升级到了Openlayers5。
此爱如少年·2020-08-18 09:50

openlayers5部分使用细节

近期使用openlayers5开发wmts自切地图的加载和切换，自定义样式，要素信息读取加载wmts自定义地图//加载地图(wmts服务)functioninitMap(){//1.设置空间参考坐标系使用哪个坐标系取决于加载的地图服务坐标系与地图服务不同
zhuzhuCode·2020-08-15 20:13

openlayers5+webpack4.x（热更新）配置ES6的开发环境、解决ol5的import问题

最近在学习一些开源的地图api，openlayers5，在使用的时候发现按照官网的import无法根本无法使用。这是因为import是ES6的语法。
gis_rc·2020-08-15 20:15

openlayers5实战--踩坑总结

1.接口返回圆心坐标和半径，直接通过newCircle(center,radius)添加圆形feature变小问题。解决办法：newFeature()的geometry参数不能直接赋值newCircel()得到的geometry，要通过‘ol/geom/Polygon.js’中的fromCircle方法将newCircel()得到的geometry转化一遍然后赋值给newFeature()的geo
weixin_33872566·2020-08-15 20:23

openlayers5之弹窗---POPUP

Overlay#marker{width:20px;height:20px;border:1pxsolid#088;border-radius:10px;background-color:#0FF;opacity:0.5;}#vienna{text-decoration:none;color:white;font-size:11pt;font-weight:bold;text-shadow:bla
花舞月咏潭·2020-08-15 19:16

openlayers5显示谷歌在线地图

.map{height:400px;width:100%;}OpenLayersexample加载谷歌地图window.onload=function(){vargoogleMapLayer=newol.layer.Tile({source:newol.source.XYZ({url:'http://www.google.cn/maps/vt/pb=!1m4!1m3!1i{z}!2i{x}!3i{
花舞月咏潭·2020-08-15 19:16

openlayers5加载点要素

.map{height:400px;width:100%;}OpenLayersexampleMyMapvarlabelCoords_org=[112.73,38.42];varlabelCoords=ol.proj.transform(labelCoords_org,"EPSG:4326","EPSG:3857");varfeature=newol.Feature({geometry:newol
花舞月咏潭·2020-08-15 19:16

openlayers5加载百度在线地图

body,#mainMap{border:0px;margin:0px;padding:0px;width:100%;height:100%;font-size:13px;}
花舞月咏潭·2020-08-15 19:16

openlayers 实现风场效果图

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

OpenLayers 5 使用GeoJSON数据渲染热力图

GIS开发中会遇到需要使用热力图Heatmap的时候，openlayers5官方示例给出的是kml文件描述的热力图数据，开发中接触更多的还是GeoJSON格式，本文就使用GeoJSON格式来实现一个热力图
战斗中的老胡·2020-08-15 19:55

OpenLayers5中无法import解决方法

本文参考此文：https://blog.csdn.net/qq_35505699/article/details/80858425OpenLayers5版本中引用ol.js的方式是import，如果直接复制官网例子到HTML中是无法运行的，由于import是ES6中的语法，因此无法直接copy运行，除非完整下载官网示例。根据不同情况，有2种解决方法：一、项目确定有联网环境。可以按照官网的例子，使用
masonqiang·2020-08-15 18:01

OpenLayers5在EPSG:4326投影坐标系下测量长度和面积

ol/sphere里有getLength()和getArea()可以用来测量距离和区域面积，默认的投影坐标系是EPSG:3857,其中有个options的参数，可以设置投影坐标系。使用时,可以先把几何图形转换成‘EPSG:3857’的投影方式，然后再使用getLength和getArea。也可以设置options参数，下面是代码：//地图使用的是EPSG:4326投影坐标系/***格式化长度输出*
鬼马行天·2020-08-15 18:00

OpenLayers5加载GeoServer WMS、WMTS服务

软件版本OpenLayers5.3.3GeoServer2.16.0关于GeoServer如何发布WMS、WMTS服务请参考上一篇文章GeoServer数据服务发布及切片。如果您对什么是WMS、WMTS不太清楚的话，请参考WMS、WFS、WCS、WMTS服务。WMS数据加载直接上代码，代码中有详细的注释说明。需引入一下OL包：importTileLayerfrom'ol/layer/Tile';i
giscoder·2020-08-15 18:54

openlayers5中用iconfont作为图标

概述前面有文章openlayers4中用font设置图标样式就iconfont在ol5中的使用做了一个尝试，后面有很多童鞋问我说实现不了，一直没有时间去做一个详细的测试，最近在做了诸多测试后，觉得这种方式比较靠谱，在此分享出来，希望对用到的童鞋有所帮助和启示。实现思路实现的思路流程图如下：实现后效果实现后效果如下：实现代码Ol3wmsbody,#map{border:0;margin:0;padd
LZU-GIS·2020-08-15 18:45

Openlayers5 + Geoserver 实现wfs的属性查询与空间查询

简介：使用Openlayers5.3,通过Geoserver实现wfs服务矢量的查询参考官方例子：https://openlayers.org/en/latest/examples/vector-wfs-getfeature.html我的Geoserver工作区截图如下，命名空间URI可以自定义，后面要用。属性查询代码如下：//首先定义一个空的矢量图层，设置样式并添加到当前map中varvecto
Fred240011·2020-08-15 13:37

WebGIS开发-openlayers5入门(1)

前言：初学GIS开发是痛苦的，复杂的API加上复杂的样式算法和交互功能，总让人感觉到无从下手。从事GIS开发有一段时间，整理了一些基础，和自己所理解流程，希望能够帮助到需要的人。准备工作：我们采用Vue端进行开发，省去基本Vue搭建部分，直接在文件中入手初始化地图初始化mapOpenLayers采用面向对象方式开发，对于前端来说比较容易上手。下面着手初始化数据：import{Map,View}fr
Hi___World·2020-08-14 19:19

openlayers之轨迹回放

支持播放、暂停、播放速度、停止等操作技术openlayers5适用3.x、4.x、6.x原生js，可以改为其他
gisdoer·2020-08-11 16:48

openlayers5加载wmts(切片地图Web服务(OpenGIS Web Map Tile Service))

WMTSbody,#map{border:0px;margin:0px;padding:0px;width:100%;height:100%;font-size:13px;}#map{width:100%;height:100%border:1pxsolidred;}varcenter=ol.proj.transform([112.73,38.42],"EPSG:4326","EPSG:3857"
花舞月咏潭·2020-08-07 18:05

openlayers5加载天地图

WMTSbody,#map{border:0px;margin:0px;padding:0px;width:100%;height:100%;font-size:13px;}#map{width:100%;height:100%border:1pxsolidred;}varcenter=ol.proj.transform([112.73,38.42],"EPSG:4326","EPSG:3857"
花舞月咏潭·2020-07-30 00:59

OpenLayers5加载Geoserver发布的WMS服务(shp数据)

Geoserver发布的shp数据，发布后利用openlayers查看，显示数据，url如下:http://localhost:8080/geoserver/wzf/wms?service=WMS&version=1.1.0&request=GetMap&layers=wzf:wafangdianshi_0&styles=&bbox=121.22186889019105,39.3193565358
WebGiser·2020-06-25 07:22

OpenLayers5加载Geoserver发布的WMS服务（tiff数据）

Geoserver发布的tiff数据，发布后利用openlayers查看，显示数据，url如下:http://localhost:8080/geoserver/wzf/wms?service=WMS&version=1.1.0&request=GetMap&layers=wzf:geotiff_coverage&styles=&bbox=121.49993249855318,39.71067241
WebGiser·2020-03-24 00:10

openlayers5中用iconfont作为图标

概述前面有文章openlayers4中用font设置图标样式就iconfont在ol5中的使用做了一个尝试，后面有很多童鞋问我说实现不了，一直没有时间去做一个详细的测试，最近在做了诸多测试后，觉得这种方式比较靠谱，在此分享出来，希望对用到的童鞋有所帮助和启示。实现思路实现的思路流程图如下：实现思路实现后效果实现后效果如下：效果1效果2实现代码Ol3wmsbody,#map{border:0;mar
lzugis·2019-12-06 10:14

vue+openlayers5展示GeoServer发布的WMTS地图

首先，openlayers5使用了ES6语法，使用的js文件需要import一个一个引入。
前端后台都不精·2019-04-23 16:10
上一页 1 下一页
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他