WebGIS
文章平均质量分 50
WEBIS专栏
裘千仞不会水上漂
这个作者很懒,什么都没留下…
展开
-
Cesium从入门到放弃:模型压平(含全部源码)
简单实现Cesium模型压平功能,Cesium1.84以上不需要修改源码原创 2023-05-11 15:57:00 · 3539 阅读 · 6 评论 -
Cesium 自定义shader——数字城市
Cesium 自定义shader——数字城市原创 2022-09-16 09:55:36 · 1256 阅读 · 1 评论 -
Cesium渲染矢量瓦片的思路
Cesium渲染矢量瓦片的思路原创 2022-09-15 10:12:59 · 1473 阅读 · 0 评论 -
Cesium加载GeoServer离线瓦片数据
Cesium加载GeoServer离线瓦片原创 2022-09-01 16:18:35 · 1064 阅读 · 0 评论 -
Cesium从入门到放弃13:鼠标操作习惯设置
Cesium默认左键平移,中键旋转,右键缩放,但是这些功能都是可以绑定到任意键上的。以下是将中键和右键功能互换的代码://设置中键放大缩小 viewer.scene.screenSpaceCameraController.zoomEventTypes = [ Cesium.CameraEventType.WHEEL, Cesium.CameraEventType.MIDDLE_DRA...原创 2020-04-22 16:03:31 · 1766 阅读 · 3 评论 -
Cesium从入门到放弃11:模拟地球自转
let viewer = undefinedfunction icrf() { if (!viewer || viewer.scene.mode !== Cesium.SceneMode.SCENE3D) { return; } const icrfToFixed = Cesium.Transforms.computeIcrfToFixedMatrix( viewer...原创 2020-04-22 15:57:01 · 1916 阅读 · 3 评论 -
Cesium从入门到放弃10:判断点是否在球的背面
const ellipsoid=Cesium.Ellipsoid.WGS84;const camera=viewer.camera;const point =Cesium.Cartesian3.fromDegrees(110,40)const occluder=new Cesium.EllipsoidalOccluder(ellipsoid,camera.position)const vi...原创 2020-04-22 15:45:08 · 2000 阅读 · 0 评论 -
Cesium从入门到放弃10:gif图片投影
Cesium官方给了将视频投影到几何体的Demo,不得不说第一眼看到还是比较惊艳的,那么Cesium能不能将gif图片也投影到几何体呢,答案是不能像视频一样直接投影,但是如果我们借助一些其它工具,还是能实现这个功能的。大概就是这个效果下面以billboard加载gif图片为例展开说明,如果你要投影到其它图形,原理都是一样的。Cesium Billboard如何加载gif图片?1. 实现思路...原创 2020-04-20 16:22:18 · 2374 阅读 · 4 评论 -
Cesium从入门到放弃9:近景天空盒(不改源码)
先上效果图Cesium近景默认的天空盒只有相机距离较远时才能看到,在很多小场景下(比如智慧城市等)默认的天空盒可能无法满足用户的需求,所以近景天空盒的需要就诞生了,如果想要不改源码实现Cesium近景天空盒就需要重写SkyBox类,下面贴出全部代码。//以下代码复制自Cesium源码的SkyBox,然后做了一点点修改。//SkyBoxOnGround.js(function () { ...原创 2020-04-07 19:00:05 · 5745 阅读 · 12 评论 -
Cesium从入门放弃8:模型编辑Demo
就是这个东西1.添加模型const url = "Apps/model/leida.glb";const pos = Cesium.Cartesian3.fromDegrees(110, 40, 150);const matrix = Cesium.Transforms.eastNorthUpToFixedFrame(pos);const model = viewer.scene.pr...原创 2020-04-02 20:47:38 · 5166 阅读 · 7 评论 -
Cesium从入门放弃7:模型矩阵变换
前言如何将模型添加到Cesium,这不是本文重点,如果对此有疑惑请访问Cesium从入门到放弃6:模型上球,不管是3dtileset还是gltf,矩阵变换并没有区别,本文以glft为例。矩阵变换是一个很复杂的工作,涉及的内容也特别多,所以我打算以实例为驱动。首先,添加模型的方法我定义为:const url='my-gltf-model.gltf'const viewer=new Cesiu...原创 2020-03-04 16:31:41 · 11239 阅读 · 3 评论 -
Cesium从入门到放弃6:模型加载
前方Cesium支持的模型有两种:一是gltf/glb,二是3dtileset,其它格式的模型需要转换成这两种格式才能在Cesium上添加,通常来说大数据的模型一般使用3dtileset,因为它是做了LOD在gltf,性能更好。...原创 2020-03-04 14:51:26 · 6975 阅读 · 4 评论 -
Cesium交互绘图组件Cesium-Draw@3.x使用说明(支持最新Cesium啦~)
cesium-draw 4.0.0已发布,支持Vue3.x, Vue2.x请使用cesium-draw 3.x版本原创 2020-01-02 19:02:21 · 8438 阅读 · 44 评论 -
Cesium从入门到放弃5:屏幕坐标转世界坐标的方法对比
Cesium从屏幕坐标(pixel)获得世界坐标(cartesian)的方法大概有三种。1.camera.getPickRay(pixel)2.camera.pickEllipsoid(pixel)3.scene.pickPosition(pixel)它们的区别如下:1.pickEllipsoid获得的是二维坐标,即高永远为0,当视高较大时(经测试,这个值大约为80万m),不严格为0,是...原创 2019-12-31 18:53:49 · 1776 阅读 · 0 评论 -
Vue+Cesium从入门到放弃4:基于Cesium的地图量算工具
基于Cesium实现的地图量算工具,包括距离量算,面积量算和高度量算。代码已经放到github了,欢迎star,fork!!!原创 2019-12-13 17:27:17 · 3027 阅读 · 3 评论 -
Cesium+Vue从入门到放弃4:Cesium矩阵变换
Cesium+Vue从入门到放弃3:Cesium矩阵变换前言Cesium矩阵相关方法前言Cesium支持将标准格式的模型添加到场景中,但这仅仅是基本操作,如果要基于模型实现更复杂更炫的功能,那么对模型做整体或局部的变换是不可避免的(虽然Cesium生来不是为此的),这篇文章旨在探索利用Cesium实现模型的矩阵变换原理及方法。Cesium矩阵相关方法Cesium矩阵相关的类有Matrix,...原创 2019-12-12 16:37:29 · 1497 阅读 · 2 评论 -
Cesium交互绘图组件Cesium-Draw使用说明
仿百度地图添加marker,支持自定义样式,支持编辑和删除,动态绘制线和多边形,支持图形编辑,可以修改和删除节点。原创 2019-10-10 15:25:36 · 8085 阅读 · 8 评论 -
Vue+Cesium从入门到放弃:踩坑
1.Cannot find module “.”解决方法:在webpack.basic.conf.js中添加unknownContextRegExp: /^.\/.*$/2.paused before potential out-of-memory crash场景:Cesium加载Ajax请求到的Geojson文件.。原因:Cesium加载Ajax请求的结果,导致Ajax不能释放内存。...原创 2019-04-19 09:31:56 · 5809 阅读 · 5 评论 -
Vue+Cesium从入门到放弃:拾贝
我知道你在找它,如果没有你打我.取消Cesium版权信息原创 2019-04-23 19:11:57 · 1902 阅读 · 0 评论 -
Vue+Cesium从入门到放弃2:Cssium加载各种地图服务
Vue+Cesium从入门到放弃2:Cssium加载各种地图前言Cesium加载google earth地图Cesium加载天地图Cesium加载高德地图Cesium加载自己的地图服务TMSWMSWMTSWFSCesium加载本地图片原创 2019-04-17 19:50:56 · 9176 阅读 · 1 评论 -
Leaflet学习之路二——在地图上绘制要素(点、线、多边形)
添加注记绘制点绘制线绘制多边形绘制弹出框 首先,我们有一个地图 L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png? access_token={accessToken}', { maxZoom: 18, id: 'mapbox.streets',原创 2018-05-09 22:04:49 · 24540 阅读 · 8 评论 -
Leaflet学习之路三——地图控件
Leaflet有四个控件:zoom,contribution,layers,scale。1.zoomzoom控件是默认打开的,添加的代码如下L.control.zoom({zoomInTitle:'放大', zoomOutTitle:'缩小'}).addTo(map);其默认位置为左上角,也可以自己设置,共四种参数:topleft, topright, bottomleft,b...原创 2018-05-10 19:33:05 · 5234 阅读 · 1 评论 -
Leaflet学习之路四——地图事件
leaflet的地图事件可以分为以下几类: 1. 图层事件:baselayerchange,overlayadd,overlayremove,layeradd,layerremove2.地图状态改变事件 load,upload,move,zoom,zoomed,moveed,resize等3.弹出框事件 popupopen,popupclose,autopanstart4....原创 2018-05-10 20:21:21 · 6374 阅读 · 2 评论 -
Leaflet学习之路五——动态绘制图形(点、线、圆、多边形)
动态绘点动态绘线 动态绘多边形动态绘点动态绘点就是在鼠标点击位置添加一个固定半径的圆map.on('click',function(e){L.circle(e.latlng,{radius:100,color:'red',fillColor:'red',fillOpacity:1})})如果要绘制一个任意半径的圆,整个过程分为三步:鼠标按下:确定圆心按住拖动...原创 2018-05-10 22:55:47 · 30583 阅读 · 31 评论 -
openlayers基础(一)——Map
openlayers是一个开源免费的js库,用于在网页中实现地图的动态显示和交互。一起看看官方对openlayers的介绍。OpenLayers makes it easy to put a dynamic map in any web page. It can display map tiles, vectordata and markers loaded from any source....原创 2018-09-18 20:37:03 · 21527 阅读 · 7 评论 -
openlayers学习之路(二)——地图控件
ol原创 2018-10-27 23:44:23 · 763 阅读 · 0 评论 -
OpenLayer基础(二)——图层(layer)
在openlayers中,Layer是Map的必须组成,也是核心要素,今天学习利用openlayers加载各种不同类型的地图数据。内容包括:利用openlayers加载瓦片数据;利用openlayers加载图片数据利用openlayers加载矢量数据利用openlayers加载矢量瓦片数据1.Layerol定义了四种基本的图层类型,分别是Tile、Image、Vector、Vect...原创 2018-11-04 05:05:29 · 10542 阅读 · 2 评论 -
GeoServer基础及数据发布
GeoServer发布地图服务1.GeoServer概述2.GeoServer安装及相关设置2.1 安装2.2 Data setting2.2.1 Layer Preview2.2.2 Workspace2.2.3 Stores2.2.4 Layer2.2.5 Layer Group3.矢量数据发布3.1 创建Stores3.2 创建Layer3.3 Preview Layer4.栅格数据发布4....原创 2018-12-19 15:53:03 · 8700 阅读 · 0 评论 -
GeoServer发布数据库中的空间数据表
如何利用GeoServer将数据库中的数据发布成地图服务1.矢量数据发布2.栅格数据发布2.1 安装`Image Mosaic JDBC`扩展2.2 发布PostGIS中的raster数据实际工作中,数据存储在本地的情况应该不多,大多数都是存储在数据库中,那么Geoserver如何以数据库作为数据源发布地图服务呢,GeoServer支持绝大多数主流的空间数据库,比如PostGIS、H2、ArcS...原创 2018-12-20 22:37:01 · 4677 阅读 · 4 评论 -
GeoServer样式(style)设置
GeoServer样式style设置GeoServer Style定义CSS StyleCSS Style安装CSS Style定义应用自定义样式利用其它软件配图并将Style导入GeoServer利用udig利用QGISGeoServer Style定义GeoServer样式支持SLD、CSS、YSLD、MBStyle四种方式定义Style,默认支持的SLD方式,其它三种需要扩展,SLD通过...原创 2018-12-22 00:54:03 · 23301 阅读 · 7 评论 -
PostGIS+GeoServer+leaflet/openlayers系列
Post+GeoServer+leaflet/openlayers文章整理黑发不知勤学早,白首方悔读书迟。只有在用的时候才会发现自己的知识是多么匮乏,最近打算系统学习一下PostGIS+GeoServer+Leaflet,也许还会涉及到Openlayers,把学习的内容做个笔记,希望可以帮到有需要的人,水平有限,不当之处请指教。Ubuntu从源码编译安装PostGISPostGIS导...原创 2018-12-22 15:37:34 · 1635 阅读 · 0 评论 -
leaflet通过WFS服务加载geoserver 矢量数据
leaflet通过WFS服务加载geoserver 矢量数据1.前言2.从geoserver获得geojson数据3.geoserver跨域配置4.根据请求结果生成layer5.完整代码1.前言leaflet默认支持的服务只有WMS,因此不能加载WFS数据,但是leaflet提供了另一个方法geoJson,它的作用是从一个geojson文件中加载地图,所以利用leaflet加载WFS数据的一个...原创 2019-01-14 04:21:26 · 6129 阅读 · 2 评论 -
GeoServer rest接口的python实现
基于Python实现Geoserver的rest接口前言通过rest接口操作geoserverGeoServer-rest-pythonGeoServer-rest-python的总体结构安装Quick start操作workspace(添加、删除、修改及查询)操作datastore操作coveragestore操作layer操作Style前言前面学习GeoServer发布数据的时候,我就一直...原创 2019-01-09 06:09:25 · 3736 阅读 · 9 评论 -
Leaflet插件整理——Tile/image layers插件
1. [前言](#(#前言)2. [Basemap providers](#Basemap providers插件)3. [Basemap formats插件](Basemap formats插件)1.前言Leaflet以体积小、轻量著称,但这也是它的缺点,和openlayers相比,Leaflet主体程序实现的功能非常少,比如加载leaflet默认只支持WMS服务,好在它有丰富的插件...原创 2019-01-15 00:11:58 · 3883 阅读 · 0 评论 -
Vue+Cesium从入门到放弃1:动态绘图(点、线、多边形)
Vue+Cesium从入门到放弃-:动态绘图(点、线、多边形)(marker)前言博主又开新系列啦!!!毕业前学了3个月的postgresql+geoserver+leaflet准备工作后大展拳脚,事实证明我还是太年轻啊,因为我学的一个也没用到,因为公司项目以三维为主,于是我又开始了Vue+Cesium从入门到放弃之路,相比二维,三维平台还不是很成熟,很多在二维下很容易实现的功能在三维...原创 2019-03-15 17:48:50 · 15930 阅读 · 24 评论 -
Cesium学习备忘录
1.球移动事件camera.moveStart.addEventListener(function() { }); camera.moveEnd.addEventListener(function() { });2.球缩放事件viewer.camera.changed.addEventListener(function(percentage) { ++i;...原创 2019-03-18 19:48:50 · 713 阅读 · 0 评论 -
Leaflef学习之路一——地图显示
研究生三年一晃而过,找工作的时候才发现自己什么都不知道,我的专业是地图学与地理信息系统,研究方向是大数据和分布式计算,研究生阶段研究了两年的spark找工作的时候发现用人单位根本不鸟我,大数据?我们有计算机专业的,要你干嘛,没办法只能退而求其次还能不能找个WebGIS开发的工作,面试官问:Leaflet会吗?openlayers会吗?geoserver会吗?vue.js会吗?不会,但是我可以...原创 2018-05-09 20:38:45 · 5925 阅读 · 3 评论