openLayers 第10页

Vite + Vue3 + OpenLayers

一、本文简介本文案例使用Vite搭建项目，在Vue3的基础上使用OpenLayers。阅读本文需要有一定Vue3基础。

德育处主任·2023-03-31 22:19

开源WebGIS开发——如何创建一张地图

一、创建一张地图分为五个步骤1、下载openlayers开发包2、创建一个HTML网页并引入openlayers（包括css样式和js文件）3、创建图层对象，引入地图资源ol.Layer（引入OSM地图资源

YUANXLLL·2023-03-31 05:10

openlayers添加标注(含聚合标注)、覆盖物、绘制路线

如何用openlayers加载手绘地图可以看另一篇文章：https://www.jianshu.com/p/0b4fd0173b56一、加载矢量标注及聚合标注通常需要在地图上标注出一些景点、建筑或者公共设施

银月silvermoon·2023-03-31 02:54

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

前言OpenLayers开发库如何实现加载不同类类型的天地图(矢量图、影像图、地形图)并实现动态切换效果，如下图所示。

动立信息服务·2023-03-29 19:16

OpenLayers 6加载各种地图源的方法(天地图、百度、高德、ArcGIS、Bing、OSM、Google等)

前言OpenLayers是一个用于开发WebGIS客户端的JavaScript包。

动立信息服务·2023-03-29 19:45

OpenLayers 引入gif 动态图片（gifler）辅助实现

2022-09-16-17-40-18.gif一、引入gifler.js在public/index.html里面引入(注意：npm引入的不是最新版，有些方法不能使用)二、引入地图importgifImagfrom'@/assets/img/map/1.gif'import'ol/ol.css'import{Map,View,Feature}from'ol'importPointfrom'ol/ge

冰落寞成·2023-03-29 03:42

openlayers源码学习

当深入下去的时候其实发现自己什么都不懂，要时刻提醒自己的无知平均地球半径exportconstDEFAULT_RADIUS=6371008.8;根据2个经纬度点获取距离角度转弧度/***Convertsdegreestoradians.**@param{number}angleInDegreesAngleindegrees.*@return{number}Angleinradians.*/expo

solfKwolf·2023-03-28 22:26

Cesium加载Geoserver发布的WMS、WMTS、TMS服务

1、Cesium加载Geoserver发布的WMS服务（1）登录Geoserver，点击LayerPreview按钮，在右侧某个图层点击OpenLayers按钮。

WebGiser·2023-03-28 17:24

OpenLayers +GeoJSON 绘制省边界

GeoJSON数据阿里云数据可视化平台使用GeoJson数据有两种方式1、在线引入（注意，http是不允许向https发送请求的，想使用的话，保证域名是https或者localhost）constsource=newVectorSource({url:'https://geo.datav.aliyun.com/areas_v3/bound/410000_full.json',format:newG

冰落寞成·2023-03-27 16:27

基于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数据

1.前言因为目前市面上与OpenLayers相关的项目实在太少，大部分也是不会开源的项目，所以每次要找一些资源和教程总是很难。网上的相关资料不是官网的例子就是版本过低的代码。

前端小黑·2023-03-23 14:23

js - canvas事件检测

【背景】canvas事件检测是一个很常见的问题，目前常用的有几种：用isPointInStroke或isPointInPath检测用点击位置与各要素线的距离来进行运算，对面等要素来说比较困难openlayers2

李司徒·2023-03-23 08:03

vue 引入 OpenLayers

一、VUE引入OpenLayersnpminstallol二、初始化一个地图import'ol/ol.css'import{Map,View}from'ol'importTileLayerfrom'ol

冰落寞成·2023-03-22 00:31

openlayers源码分析（2）

FeatureFeature的父类是BaseObject，先从构造函数开始构造函数参数可以是一个Geometry对象或者是一个对象包含属性，但是这个对象必须有个geometry属性，而且值必须是Geometry类型。构造函数前面主要是对私有变量初始化。/***@param{import("./geom/Geometry.js").default|Object=}opt_geometryOrProp

solfKwolf·2023-03-20 03:24

Openlayers中多边形的聚合

持续三天不断尝试之后获得了一些不为人知的辛酸orz关于OpenLayers的Clusterol.source.Clusterol利用这个js对象实现对地图上feature进行聚合展示的控制，所有的features

MMMOOO·2023-03-19 10:13

OpenLayers之图文标记

第一次更新：代码说明：html中是页面的基本骨架添加checkbox标签，用户可以选择VectorLabel或OverlayLabel类型；添加text标签，输入想要添加的文字标记；添加button按钮，用来启动文字标注功能和清除地图上的标注；添加map的div添加标注点的divjs代码实现功能创建ONE类，添加Map属性，并指定相应的默认值；在类中添加DrawingAndTextAnnotati

多智而近妖精·2023-03-18 21:41

openlayers text多背景颜色

image.pngfeature=newol.Feature({geometry:newol.geom.Point([121.359045,31.317679]),});constsymbol={icon:"./img/images/earthquake.png",scale:0.8,textColor:"#fff",font:"14pxCalibri,sans-serif",};feature.

happy_port·2023-03-16 08:08

OpenLayers + TopoJSON 绘制边界

一、准备TopoJson数据可以在DataV.GeoAtlas上下载1663222270105.png二、引入TopoJson数据，并绘制addTopoJson(){console.log(this.geoJSonData)constfeatures=newTopoJSON({featureProjection:'EPSG:4326'}).readFeatures(this.geoJSonData

冰落寞成·2023-03-15 11:54

openLayers点击事件

任何在地图上点击的事件，都是在map.on里面注册事件事件类型参考api：openLayers的api地址：https://openlayers.org/en/latest/apidoc/在api中左侧

壹家全栈·2023-03-14 07:25

openlayers 使用canvas绘制圆形头像图标

记录一个使用canvas将一张图片等比缩放，裁剪为一个圆1、原始图片在这里插入图片描述2、绘制后在地图中呈现的样式在这里插入图片描述3、设置样式的函数/***设置Style*/setStyleOnPersonLocation(feature){constdata=feature.values_varimgUrl='https://person_head_img/avatar.jpg'//绘制圆角矩

奔跑的痕迹·2023-03-12 19:04

openlayers 文字竖直显示

image.pngconststartPoint=[132,28];conststyle=newol.style.Style({text:newol.style.Text({font:"bold14pxCalibri,sans-serif",scale:1,text:"",fill:newol.style.Fill({color:"green"}),}),});["48","小","时","警",

happy_port·2023-03-11 11:54

WebGIS开发-openlayers5入门(2)

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

Hi___World·2023-03-09 23:07

MapBox动态气泡图渲染教程

对于mapbox和openlayers这样的框架来讲，气泡图中的气泡本质上就是一个div，就是将一个dom元素追加到canvas上的固定位置而已。

疯狂的GISer·2023-02-23 13:50

openlayers5使用GeoJSON数据渲染热力图

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

耗子在简书·2023-02-02 04:21

java 调用sql server视图_Geoserver sql查看参数搞乱了postgis函数调用

我已经设置了一个openlayershtml窗口，它与geoserver平台进行通信.Geoserver通过参数视图连接到数据库，其中整个“where”子句是参数.我的问题是，当我在我的数据库上创建一个

菲菲ruby·2023-01-31 11:17

OpenLayers之popup弹出框

代码说明：html文件中添加map的div和弹框的divjs文件中，创建一个覆盖来锚定弹出到地图。创建地图，向地图添加一个单击处理程序以呈现弹出窗口添加一个单击处理程序来隐藏弹出窗口html文件popup弹出框.map{width:100%;height:90%;}.ol-popup{position:absolute;background-color:white;-webkit-filter:d

多智而近妖精·2023-01-31 02:09

移动端使用openlayers加载手绘地图

最近做了个关于手绘地图的项目，使用openlayers渲染，加载速度和渲染效果都很不错。参考资料：openlayers文档地址：https://openlayers.org/en/latest/api

银月silvermoon·2023-01-30 19:58

openlayers3在Vue中鼠标右键取消绘制方法

//本文是介绍右键取消绘制的一种解决方式，以下代码是从其他项目代码中抽取关键部分仅供大致参考，并不是完整的实例代码，请读者注意。//初始化map以及添加一个底图图层initMap(){letself=this;...self.map=addmap(self.center,self.resolutions,self.resolution,self.targetmap);self.addInterac

我是兰小莫·2023-01-30 10:08

Cesium基本图形绘制

之前用openlayers开发二维地图的时候，绘制点、线、面、圆、矩形、椭圆是基本的功能，所以在cesium地图中也可以加入这些功能。

写前端的大叔·2023-01-28 07:10

一、Vue初遇OpenLayers

1、npm安装npminstallol2、HTML代码3、引入openlayers必须组件importMapfrom'ol/Map'importViewfrom'ol/View'import{fromLonLat

Rain_Wuu·2023-01-27 01:20

vue集成openlayers问题

目录vue集成openlayers下载依赖创建地图文件其他APIvueopenlayers绘制数据时鼠标位置偏移问题解决方案总结vue集成openlayers下载依赖cnpmi-Sol创建地图文件按需引入相应的

·2023-01-25 03:30

SpringBoot项目修改JDK后报错(class file version 55.0)

项目中更换JDK，由jdk9换到jdk11报错信息java.lang.UnsupportedClassVersionError:org/zjh/openlayersdemo/OpenlayersdemoApplicationhasbeencompiledbyamorerecentversionoftheJavaRuntime

卑微猿同学·2023-01-10 03:59

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

重要：博客内使用地图全替换为WMap，想使用的请参考我这篇博客（WMap）最近在做矢量图形这一块，发现圆形和多边形，都可以使用openlayers自带的Modify类进行编辑，然后随意放大缩小旋转，但是矩形尤为特别

林大大哟·2023-01-07 20:17

192：vue+openlayers: 选择feature，弹窗操作，删除所选feature

直接复制下面的vue+openlayers源代码，操作2分钟即可运行实现效果；注意如果OpenStreetMap无法加载，请加载其他来练习文章目录示例效果配置方式示例源代码（共16

还是大剑师兰特·2023-01-05 12:35

【GIS开发】OpenLayers在线瓦片数据源汇总

文章目录1、概述2、地图数据源2.1Google2.2OpenStreetMap2.3Thunderforest2.4Mapbox2.5ArcGIS2.6Bing地图2.7高德地图2.8百度地图2.9搜狗地图2.10腾讯地图2.11天地图3、ol.source.Tile结语1、概述瓦片地图（切片地图）源于一种大地图解决方案，针对一整块非常大的地图进行切片，分成很多相同大小的小块地图，在用户访问的时

爱看书的小沐·2022-12-29 20:06

openlayers 点聚合并添加点击事件

openlayers点聚合并添加点击事件222//selfMap.OlMap===map/*监听地图的单击事件，如果点击的是矢量元素则进行相关操作*/selfMap.OlMap.on('click',(

Spinach·2022-12-27 14:05

openlayers学习笔记（一）新手入门干货

openlayers学习笔记（一）新手入门干货一、自言自语的个人感觉。

java_yhz·2022-12-22 03:14

主流webGis框架优劣比较

选择的方式主要是根据业务需求，主要分为:传统GIS业务(Leaflet)，三维业务(Cesium)，互联网展示型(MapboxGL)，老IE浏览器，老业务维护(OpenLayers)。

莫问前程F6·2022-12-20 17:20

(openlayers mapbox supermap cesium)

好奇，你们gis都是怎么上手的，我感觉直接去看官网对于新手来说好难搞呀，而且网上相关的教学资源好少，且大部分是不详细不够系统的...有那种“把学习者当笨蛋的”的资源推荐吗？救救孩子吧，我感觉我要被这个东西搞死了。

Spinach·2022-12-05 22:32

openlayers天地图叠加geoserver图层，并对包含多个图层的图层进行过滤

描述项目要求模拟设备水位，叠加图层显示淹水的区域。运用滚动条来模拟水位，获取该设备的图层列表，再根据模拟数值显示对应图层。一个个叠加图层先筛选后端接口返回的图层，再一个个叠加显示。要求geoserver发布多个图层，再根据数据进行筛选。缺点：需要在geoserver一个范围发布一个图层，一个设备要发布多个图层，太繁琐。this.addView=[{addTime:"2021-08-2317:12:

v_loading·2022-12-02 21:09

利用OPENLAYERS将矢量数据叠加到在线地图上

具体做法是：我们利用QGIS叠加在线地图和已有数据，并生成一个OPENLAYERS的WEBGIS应用。将我们的已有数据叠加到谷歌地图上进行展示。

qq_35582643·2022-12-02 20:57

vue使用天地图、openlayers实现多个底图叠加显示

实现效果：需求：根据返回的经纬度列表通过天地图、openlayers实现底图添加（航道图层、线图层、水深图层）tk：自己申请的密钥安装opelayerscnpmi-Sol#或者npminstallol/

船长在船上·2022-12-02 20:08

关于地图openlayers layers 使用TileArcGISRest发布到环境后图片空白改用 XYZ，以及多个layers叠加

1.原先mapLayer=newTileLayer({visible:true,source:newTileArcGISRest({url:‘’})});所有图片都报了500的错误然后点击还是能够选择到地理位置2.几经波折后改为xyz切片{{clickCenter}}-->import'ol/ol.css';import{Map,View,Feature}from'ol';importTileGr

雪球 ·2022-12-02 20:04

【ol】事件类型

本文主要学习openlayers的Event模块相关源码BaseEventOpenlayers根据W3CDOMLevel2Event接口简化实现了自己的事件类,它只提供了type和target属性以及preventDefault

·2022-11-30 08:10

Vue结合openlayers按照经纬度坐标实现锚地标记及绘制多边形区域

目录前言1.安装openlayers2.引入模块3.地图与弹窗html样式4.data数据定义5.methods方法6.mounted数据加载7.锚地数据获取前言本文介绍vue结合openlayers实现根据返回的经纬度坐标完成锚地标记

·2022-11-21 18:20

Openlayers实现根据半径绘制圆形

目录期望效果写在前面绘制圆形添加圆形标识绘制连线标注距离实现一个什么效果呢，就是在openlayers上面，绘制三个圆形，绘制完成之后，三个圆心连接起来，然后标记出每两个圆心之间的距离。

·2022-11-21 18:19

Vue使用openlayers实现绘制圆形和多边形

目录绘制圆形绘制多边形绘制编辑多边形完成绘制这个地方我就简单点写吧，因为一些东西比较乱，有的包啥的就按照官网API开发文档根据报错提示自己添加就可以了，我这个地方就不重复写了。绘制圆形这里的绘制圆是指当后台返回数据，告诉你以某个经纬度坐标为圆心，或者是顶点，以r为半径绘制，不是鼠标手动绘制。首先绘制圆，首先有一个数据源和一个图层来存放绘制的圆形，这个很简单。然后创建变量自己该就可以，我估计都搞op