E-COM-NET
首页
在线工具
Layui镜像站
SUI文档
联系我们
推荐频道
Java
PHP
C++
C
C#
Python
Ruby
go语言
Scala
Servlet
Vue
MySQL
NoSQL
Redis
CSS
Oracle
SQL Server
DB2
HBase
Http
HTML5
Spring
Ajax
Jquery
JavaScript
Json
XML
NodeJs
mybatis
Hibernate
算法
设计模式
shell
数据结构
大数据
JS
消息中间件
正则表达式
Tomcat
SQL
Nginx
Shiro
Maven
Linux
Openlayer
openlayer
s [六] 地图交互 interaction 详解
interaction简介在
OpenLayer
s6中,
爱玩亚索的程序员
·
2024-01-19 06:21
交互
javascript
webgis
前端
vue.js
用原型实现Class的各项语法
直到公司开始了一个webgis项目,使用
openlayer
s。看了下
openlayer
s的代码,整个api都是用Class构建的。
快乐非自愿
·
2024-01-17 15:58
javascript
原型模式
开发语言
Openlayer
s克里金插值计算等值面与图层裁剪
Openlayer
s克里金插值计算等值面与图层裁剪计算等值面letWFSVectorSource=newVectorSource();letWFSVectorLayer=newVectorLayer({
BJ-Giser
·
2024-01-15 11:19
openlayers
前端
javascript
1、Vue3.0 第一个地图
OpenLayer
s是一个用于开发WebGIS客户端的高性能、功能丰富的JavaScript库,用于在Web上创建交互式地图。
星星编程
·
2024-01-14 20:01
OpenLayer
s创建一个新的Vector图层并添加覆盖物,并监听图层事件
1、创建图层并添加到地图上varlayer=map.getLayersBy("name",'基础图层');//1.设置图层默认样式letbaseStyle=new
OpenLayer
s.Style({fillColor
朱凤丽
·
2024-01-11 14:17
【WebGIS初学到入职】(七)用
OpenLayer
s绘制热力图
今天就继续用
OpenLayer
s6来做一个热力图的效果吧。
ReBeX
·
2024-01-10 12:23
【WebGIS初学到入职】
javascript
html
GeoServer +
openlayer
s
GeoServer安装前提有java环境安装地址https://geoserver.org/release/stable/此处以二进制下载为例下载后解压D:\ProgramFiles(x86)\geoserver-2.21.0-bin\binhttp://localhost:8080/geoserver进入服务使用默认用户名admin和密码geoserver登陆图源准备百度网盘下载地图软件全能地图
努力学习,努力爱你!
·
2024-01-09 01:44
geoserver
前端
linux
javascript
VUE依赖ol版本问题:geotiff.js Unexpected token
1、问题VUE项目中,使用
Openlayer
使用版本为6.4.0。package.json中如下:"dependencies":{..."ol":"^6.4.0",...}之前项目运行都很正常。
qgbihc
·
2024-01-09 01:13
踩坑记
vue.js
javascript
250:vue+
openlayer
s 加载geotiff文件,并在地图上显示
第250个点击查看专栏目录本示例的目的是介绍演示如何在vue+
openlayer
s中加载geotiff文件,并在地图上显示。这里使用到了WebGLTile图层和GeoTIFF脚本模块。
还是大剑师兰特
·
2024-01-09 01:12
#
vue.js
前端
javascript
四章-34-矢量地图高亮选中区
本文基于腾讯课堂老胡的课《跟我学
Openlayer
s--基础实例详解》做的学习笔记,使用的
openlayer
s5.3.xapi。
彩云飘过
·
2024-01-07 09:27
Geoserver服务器添加.shp类型地图
1相关软件主要有:地图服务Geoserver、地图展示
Openlayer
s、地图编辑μDig、地图参考ArcGIS之ArcMap、地图获取MapInfo。
kaizq
·
2024-01-07 00:07
2023年终总结
这一年的收获与总结 这一年其实我的大部分时间都在做GeoServer的二次开发或者
OpenLayer
s中的效果渲染。基于公司自有的数据,进行了发布,并在GeoServer
AI·GIS
·
2024-01-03 10:21
杂谈
2023
年终总结
gis
OpenLayer
s - Overlay简介 (八)
Overlay是什么让HTML元素显示在地图上某个位置。他和控件很像都是在地图上添加可见元素,不同的是,它不是根据屏幕位置固定的,而是与地理坐标相关联,因此平移地图将移动Overlay。常用的大致有三类,弹窗、标注、文本信息。每个覆盖物都会生成对应的HTML元素,所以我们也可以使用css来修改去样式。overlay常用属性id,覆盖物的唯一标识,便于getOverlayById方法取得相应的ove
nie-ny
·
2023-12-31 14:47
地图学习
前端
javascript
html5
OpenLayer
s - 图层透视效果 (九)
简介本文主要讲解的是,通过控制图层,层级和大小来实现图层透视功能。主要使用图层监听事件prerender监听图层渲染之前,postrender监听图层渲染之后。实现DEMO初始化地图Document.map{height:500px;width:100%;}//图层varroads=newol.layer.Tile({source:newol.source.XYZ({url:'https://we
nie-ny
·
2023-12-31 14:47
地图学习
javascript
前端
css
OpenLayer
s - 加载静态图片(十二)
简介本文讲解,如何使用
OpenLayer
s在载静态图片上添加标记,预览图片。主要使用ol.source.ImageStatic用于显示单个静态图像的图层源。
nie-ny
·
2023-12-31 14:47
地图学习
css3
javascript
前端
OpenLayer
s - Map详解 (二)
Map是什么是
OpenLayer
s的核心组件。用于初始化地图对象。初始化地图(Map),需要一个视图(view)、一个或多个图层(layer),和一个地图加载的目标HTML标签(target)。
nie-ny
·
2023-12-31 14:17
地图学习
javascript
html
html5
OpenLayer
s - control简介 (六)
在
Openlayer
s中多数Controls直接可以在地图上添加,比如Navigation(导航栏)。第二类是需要放在Div元素中才能用。
nie-ny
·
2023-12-31 14:17
地图学习
c#
javascript
ui
OpenLayer
s - interaction简介 (七)
Interaction是什么Interaction是用来控制地图的。没看错它和控件一样的作用。不过它们的区别是控件触发都是一些可见的HTML元素触发,如按钮、链接等;交互功能都是一些设备行为触发,都是不可见的,如鼠标双击、滚轮滑动,手机设备的手指缩放等。Interaction,是一个虚基类,不负责实例化,交互功能都继承该基类。常用交互功能doubleclickzoom,双击地图进行缩放;draga
nie-ny
·
2023-12-31 14:17
地图学习
前端
javascript
OpenLayer
s - 入门 (一)
那么前端地图展示,图层控制就需要一个开源的框架来开发,我一下就相中了
OpenLayer
s(其实是公司要求)。
nie-ny
·
2023-12-31 14:16
地图学习
前端
javascript
开发语言
OpenLayer
s-Map事件
OpenLayer
的MapEvent在Event.js文件的
OpenLayer
s.Events中定义。
a18826265589
·
2023-12-31 14:13
OpenLayer
s-绘制图元
本文介绍使用
OpenLayer
s.Control.DrawFeature和
OpenLayer
s.Handler.Polygon来绘制Polygon图元。绘制Point和Line与此类似。
a18826265589
·
2023-12-31 14:13
javascript
ViewUI
OpenLayer
s-添加Marker
在
OpenLayer
sMap添加Marker。
a18826265589
·
2023-12-31 14:13
javascript
ViewUI
OpenLayer
s-Vector图层Feature选择工具
1、创建Vector图层1varvlayer=new
OpenLayer
s.Layer.Vector("VectorLayer");2map.addLayer(vlayer);2、创建SelectTool1
a18826265589
·
2023-12-31 14:13
javascript
ViewUI
【
openlayer
s-2】数据源与图层
目录一、瓦片地图1、加载在线地图2、加载离线瓦片地图二、静态地图三、矢量地图
openlayer
s可加载以下三种格式数据源:ol.source.Tile对应的是瓦片数据源,现在网页地图服务中,绝大多数都是使用的瓦片地图
WXG1011
·
2023-12-31 14:42
GIS中心
前端
【
openlayer
s-3】加载图标
目录1、通过overlay方式添加2、通过overlay+css方式3、通过Feature+style方式实现在
OpenLayer
3中添加图标有两种方式,一种是通过overlay方式,另一种是通过Feature
WXG1011
·
2023-12-31 14:42
GIS中心
前端
openlayer
s - 03 点位标注功能
本例实现对地图中的部分点位进行标注,点击标注可以显示基本信息,缩放后会适当对点位进行聚合1.实现1.将获取到的所有点位的坐标数组传入以下函数,根据数据创建点位要素(feature);2.设置聚合参数(Cluster);3.创建新的图层,将要素加入图层并配置相关样式;4.提前定义好详情显示的popover弹窗,创建覆盖物(Overlay),将popover弹窗设置到覆盖物内;5.监听点击事件获取点击
大兵的猫
·
2023-12-31 14:12
openlayers
Vue
JavaScript
javascript
前端
开发语言
【
OpenLayer
s-1】添加地图
坐标系:目前
OpenLayer
s3支持两种投影,一个是EPSG:4326,等同于WGS84坐标系;另一个是EPSG:3857,经常用于web地图。一个是全球通用的,一个是web地图专用的。
WXG1011
·
2023-12-31 14:12
GIS中心
前端
openlayer
s - 02 区域绘制功能
1.定义容器圆形框选多边形框选2.声明方法//地图资源图层tileLayer=newTileLayer({//source:newOSM(),//不建议使用,实际开发中会有问题source:newXYZ({url:"http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}",//
大兵的猫
·
2023-12-31 14:41
openlayers
Vue
javascript
html
vue.js
前端
【
openlayer
s-4】事件
常用鼠标事件:地图鼠标左键单击事件,对应的类为ol.Map,事件名为singleclick。地图鼠标左键双击事件,对应的类为ol.Map,事件名为dblclick。地图鼠标点击事件,对应的类为ol.Map,事件名为click。地图鼠标移动事件,对应的类为ol.Map,事件名为pointermove。地图鼠标拖拽事件,对应的类为ol.Map,事件名为pointerdrag。地图移动事件,对应的类为o
WXG1011
·
2023-12-31 14:10
GIS中心
html
前端
javascript
Openlayer
s 根据坐标点画点线圆多边形
根据坐标点画点线圆多边形,代码如下GeometrytypePointLineStringPolygonCircleNoneBezier绘制绘制圆形绘制线段绘制多边形绘制单个点清除所有清除指定///地图部分varmap=newol.Map({//设置地图图层layers:[raster,vector],//让id为map的div作为地图的容器target:‘map’,overlays:[overla
竹林1028
·
2023-12-30 19:08
基于Geoserver发布地图
基于geoserver和
Openlayer
s就可以构建一个免费的开源GIS项目。Geoserver发布地图的步骤为:Geoserver启动启动Geoserver,并登陆。
淘淘小窝
·
2023-12-29 00:07
openlayer
加载高德地图(EPSG:3857)和GeoJSON图层(EPSG:4326)
概述基于
openlayer
实现高德底图(墨卡托投影,3857)和GeoJSON图层(4326坐标系)的叠加显示,并实现GeoJSON图层的数据变换。
imxiezy
·
2023-12-27 16:51
信息可视化
前端
iClient for JavaScript如何以mvt矢量瓦片的形式加载数据服务
刘大这里写目录标题前言1.iServer中的预览页面2.iClientforJavaScript加载2.1构建Style2.2iCient加载2.2.1Leaflet&MapboxGL2.2.2
OpenLayer
s
supermapsupport
·
2023-12-26 20:48
WebGIS
javascript
开发语言
iClient
Openlayer
s根据kml文件绘制地图
亲测可用//按需导入的相关配置import{Style,Stroke,Fill}from"ol/style";import{VectorasVectorLayer}from"ol/layer";import{VectorasVectorSource}from'ol/source';importKMLfrom'ol/format/KML';...//颜色配置varstyles=newStyle({f
飞天巨兽
·
2023-12-26 09:43
笔记
javascript
前端
arcgis
vue
kml
openlayer
s聚合打点并显示多种图标
openlayer
s聚合打点并显示多种图标背景:公司项目中存在一个业务场景,在地图上显示多种图标,但是由于坐标太多就不能使用简单的打点的做法,就希望使用聚合打点效果,首先我们想到是写一个方法有几种图标就执行几次
是小钟
·
2023-12-22 03:15
技术学习笔记
javascript
前端
html5
openlayers
四章-41-使用WebGL渲染海量矢量要素
本文基于腾讯课堂老胡的课《跟我学
Openlayer
s--基础实例详解》做的学习笔记,使用的
openlayer
s5.3.xapi。
彩云飘过
·
2023-12-19 14:14
Vite + Vue3 +
OpenLayer
s 切换地图容器
Vite+Vue3+
OpenLayer
s切换地图容器本文简介Vite+Vue3+
OpenLayer
s切换地图容器将地图切换到不同容器里展示。
德育处主任
·
2023-12-19 12:59
Cesium 加载 Geoserver WMS 图层以及条件查询和切换图层样式
CesiumGeoserver图层条件过滤与
Openlayer
s略有不同,不过原理是一样的。也是利用Geoserver的CQL_FILTER实现功能。本文包括图层样式核心代码、完整代码
非科班Java出身GISer
·
2023-12-18 13:29
Cesium
学习教程
cesium
wms条件过滤
cesium
wms样式切换
cesium
wms属性查询
geoserver
条件查询
geoserver
样式切换
openlayer
s和canvas结合使用报画布污染问题
2.尝试本地测试前端跨域代理图层发布地址,结果报错500.3.图层由
openlayer
加载到页
九霄123
·
2023-12-16 16:18
vue
前端
javascript
Geoserver 安装后
openlayer
预览自带的示例图层,空白不显示
先说原来安装的版本环境:jdk17+Geoserver2.23.1和jdk18+Geoserver2.18.0都会遇到报错500,预览示例不显示,嗯额鹅鹅鹅鹅鹅鹅饿,气死了。。。。。。。。。。,but找到处理办法了。查看geoserver状态报500错误;而且打不开这个srs选择文件弹窗。(这是正常的)最后各种分析,应该是版本不兼容;果断下载jdk8+Geoserver2.21.3;然后按步骤安装
小杨啵啵
·
2023-12-04 19:07
Geoserver
OpenLayer
s 实现画点、画线、画面、画圆
本文将实现如何用
openlayer
s在地图上画点、线、面、圆,创建地图可参考我的上一篇文章Vue+
OpenLayer
s创建地图并显示鼠标所在经纬度1、页面2、代码点线多边形圆importVectorSourcefrom"ol
L221545
·
2023-12-04 16:54
OpenLayers
vue.js
OpenLayer
库的学习入门总结
前言:作者跟随视频学习ol库的调用与功能实现,进行初步总结与回顾。声明:参考新中地的文档,进行作者日后复习再次学习的简化。1、WebGIS简介GIS的核心概念GIS(GeographicInformationSystem)是一种用于存储、分析、管理和展示地理数据的计算机系统。以下是GIS中的一些核心概念:坐标系:地理数据通常以某种坐标系的形式存储,如经纬度坐标系或投影坐标系。地理数据:GIS中的数
Ian1025
·
2023-12-04 02:31
学习
javascript
json
html5
css3
前端
前端框架
可视化有关JS官网链接
Three.js中文教程|参考手册|使用指南|动画特效实例|踏得网threejs中文网:Three.js中文网WebGL教程:http://www.webgl3d.cn/WebGL/gis地图web端
Openlayer
s
麦兜_冰夕
·
2023-12-01 23:56
数据可视化
mapTalks中文api
threejs中文api链接
开源GIS平台空间数据管理与发布技术研究
介绍了在PostGIS中管理矢量数据的方法,在QuantumGIS中调整地图样式并生成MapFile文件的方法,介绍了使用MapServer根据MapFile文件显示地图的方法,在开源WebGIS框架
OpenLayer
weixin_30293135
·
2023-11-29 16:27
php
javascript
操作系统
ViewUI
Vite + Vue3 +
OpenLayer
s 同步两个地图基础操作
Vite+Vue3+
OpenLayer
s同步两个地图基础操作一、本文简介Vite+Vue3+
OpenLayer
s同步两个地图基础操作两个独立的容器,使用了不同的图源。
德育处主任
·
2023-11-29 04:07
openlayer
绘制过程添加提示文字
在
OpenLayer
s中,getViewport()是一个地图对象的方法,用于获取地图的viewport元素。
我有柚子茶噢
·
2023-11-28 05:29
openlayer
绘制
openlayer
s 加载KML文件
在设置style样式时,发现不起作用,需要设置一个属性extractStyles:falseimportVectorLayerfrom'ol/layer/Vector'importVectorSourcefrom'ol/source/Vector'importKMLfrom'ol/format/KML'createWFS(option){constWFS=newVectorLayer({sourc
MarvinCHN
·
2023-11-26 13:09
Vue +
Openlayer
s 绘制多边形及展示
官网{{isDraw?"绘制区域":"重新绘制"}}import"ol/ol.css";import{Map,View}from"ol";import{ImageasImageLayer,VectorasVectorLayer}from"ol/layer";import{ImageStatic,VectorasVectorSource}from"ol/source";import{getCente
小小并不小
·
2023-11-26 12:34
Vue
openlayers
vue
javascript
Vue+
OpenLayer
s实现多边形绘制及转折点样式标识
Vue+
OpenLayer
s实现多边形绘制及转折点样式标识在本文中,我们将介绍如何使用Vue.js和
OpenLayer
s库来实现多边形的绘制,并且通过在每个转折点上添加圆点标识来增强其可视化效果。
星光璀璨技术之心
·
2023-11-26 12:03
vue.js
前端
javascript
js
OpenLayer
s实战,WebGL图层鼠标经过要素高亮显示,根据变量自动修改WebGL图层要素的透明度、大小和颜色
专栏目录:
OpenLayer
s实战进阶专栏目录前言本章讲解
OpenLayer
s使用WebGL图层情况下,鼠标经过要素高亮显示,根据变量自动修改WebGL图层要素的透明度、大小和颜色的功能。
汤姆猫不是猫
·
2023-11-26 05:44
#
webgl
javascript
vue.js
OpenLayers
WebGL图层样式动态生成
webgl图层高亮显示
鼠标经过webgl要素
上一页
1
2
3
4
5
6
7
8
下一页
按字母分类:
A
B
C
D
E
F
G
H
I
J
K
L
M
N
O
P
Q
R
S
T
U
V
W
X
Y
Z
其他