- 博客(340)
- 收藏
- 关注
RSS订阅原创 Cesium初学者：如何在本地查看示例、文档
Cesium开发提供了示例和相关的API文档，对于初学者来说，实现一个功能，首先去查看一下官方的示例，比按照功能去互联网上搜索要方便。其他的一些相关的命令，在cesium-1.91\package.json的script节点下，有需要的参照学习。在程序开发中，少不了查看API文档，查找相关的函数，一些类库同时提供了开发示例，能很快学习到对应功能的开发。打开操作系统的命令行工具，切换到解压的目录中，执行命令npm install，安装运行所需要的包文件。点击Sandcastle，打开Cesium的示例链接；
2022-09-13 17:48:42
1208
原创 GIS开发：gdal在nodejs中使用
gdal库是gis开发常用的一个类库，本身是用C/C++进行编写的，同时提供了其他语言的调用接口，nodejs中是以npm的形式进行安装，本地电脑装了个vs2017，导致安装这个包的时候一直在node-gyp报错，安装不上，各种鼓捣，终于把这个gdal包装上了。公众号之前的文章，分享开源mapbox-gl地形生成代码，这是python语言实现的，现在python不怎么用了，电脑上不想装太多的软件环境，考虑用nodejs实现一下，简单的将dem数据转换成rgb的颜色数据。
2022-09-07 17:50:00
1182
原创 glTF-Transform处理gltf模型
glTF-Transform支持读取、编辑、创建gltf2.0格式的三维模型，glTF-Transform提供对三维模型中低细节的快速、可再现和无损控制；glTF-Transform API实现在编辑三维模型时，自动管理数组索引和字节偏移量，这些特性，能够方便对三维模型进行合并、拆分和优化；@gltf-transform/core：核心SDK类库，提供gltf2.0模型创建、读取和编辑的API；@gltf-transform/functions: gltf2.0模型的修改、读取函数API；...
2022-08-26 17:39:45
1390
原创 Three.js开发：高程数据加载
使用Three.js的PlaneGeometry进行实现，PlaneGeometry是一个平面几何的效果，设置长度和宽度值，形成一个方形的范围，按照API的定义，通过设置平面上的多个位置的高度信息，达到高低起伏的效果。通过加载高程数据（dem），显示地形高低起伏，达到良好的立体展示效果；Three.js能够通过设置一系列坐标点的高度，构建成面的形式，显示高程数据。根据图片的颜色数值进行高度计算，按照以上方式进行设置，具体参见。、通过随机数，简单的设置高程的效果。使用canvas进行图片加载。...
2022-08-15 17:40:07
1120
原创 地图加载wmts格式底图的配置
WMS针对提供可定制地图的服务，是一个动态数据或用户定制地图（需结合SLD标准）的理想解决办法。WMTS牺牲了提供定制地图的灵活性，代之以通过提供静态数据（基础地图）来增强伸缩性，这些静态数据的范围框和比例尺被限定在各个图块内。这些固定的图块集使得对WMTS服务的实现可以使用一个仅简单返回已有文件的Web服务器即可，同时使得可以利用一些标准的诸如分布式缓存的网络机制实现伸缩性。配置切片的缩放级别（z）、列数（tilecol &y）、行数（tilerow&x），即可按照规则进行加载。...
2022-08-05 17:42:40
1235
原创 mapbox-gl开发教程（十四）：画圆技巧
mapbox-gl提供了一个画圆的图层方式，图层的类型设置成circle，通过设置circle-radius，实现圆的大小变化，不过这个参数的单位是像素（pixels），在地图缩放的时候，圆一直是像素尺寸，在地图上覆盖的空间面积也不同，不能满足按照地理距离单位的变化。mapbox-gl开发是讲述如何从基础到实际应用进行地图开发的教程，不定时进行持续进行更新，如有疑问，公众号留言进行讨论。...
2022-07-29 09:04:33
1338
原创 超图iServer rest服务之最佳路径分析
http//support.supermap.com8090/iserver/services/transportationanalyst-sample/rest/networkanalyst/RoadNet@Changchun/path.json?在超图地图iServer服务使用过程中，涉及到最佳路径分析，提供的是rest服务，通过传入对应的参数，返回数据的查询结果。查询的条件是输入经过的路径坐标节点，权值字段和转向权值，返回查询的路径结果。根据返回的数据，能够进行路径的勾画。...
2022-07-28 17:12:44
1023
原创 mapbox-gl开发教程（十三）：加载三维面图层（白模）
在地图应用的开发中，加载带高度信息的面数据，显示简单建筑（白模）等效果，在mapbox-gl对应的是填充挤压（fill-extrusion）图层，下边讲一下如何在mapbox-gl加载fill-extrusion图层。mapbox-gl开发是讲述如何从基础到实际应用进行地图开发的教程，不定时进行持续进行更新，如有疑问，公众号留言进行讨论，公众号地理信息技术杂谈。mapbox-gl加载矢量数据，通过两种数据源，一种是矢量切片（vector），另一种是geojson数据，数据源加载完成后，再进行图层的设置。..
2022-07-19 09:05:38
1630
原创 mapbox-gl加载3dtiles渐变模型（视频）
https://mp.weixin.qq.com/s?__biz=MzU2ODYzNzc4OQ==&mid=2247486173&idx=1&sn=76e7fe7cb5550b1488605fa924a1ee71&chksm=fc8baaefcbfc23f986dd553aeb2c8509e359ddc0c97d313b62f9dc44ac7b46d91bb7260b2783&token=635212041&lang=zh_CN#rd
2022-07-14 09:08:58
767
原创 3d-tiles中b3dm文件读取
Batched 3D Model（.b3dm）文件，是3d-tiles中单个模型文件，按照官方的文档，是一些基本信息加上glb（Binary glTF）模型文件，参见下图的官网文件说明。参见官方的文档。清楚此文件的格式，就可以对文件进行操作了。这里使用nodejs语言进行操作，关键的操作步骤如下：按照此种方式，b3dm中包含的glb文件，也能够单独分离出来，直接可以保存成一个文件进行查看。引用内容：https://github.com/CesiumGS/3d-tiles/tree/main/sp
2022-07-06 22:13:52
1061
原创 超图iServer rest服务之feature查询
在超图地图iServer服务使用过程中，涉及到图层中的数据查询，提供的是rest服务，通过传入对应的参数，返回数据的查询结果。http://support.supermap.com:8090/iserver/services/data-world/rest/data/featureResults选择查询的数据集，能够同时查询多个数据集，查询模式分为：ID、SQL、BOUNDS、BUFFER等，能够以字段、空间等形式进行数据的查询，各类查询类型在下边对应的查询条件也不相同。在前端开发中，调用featu
2022-07-01 09:28:47
1313
原创 mapbox-gl开发教程（十二）：加载面图层数据
–mapbox-gl是一个开源、基于webgl技术的前端地图类库–在地图应用的开发中，加载面数据，显示区域、范围等信息，在mapbox-gl对应的是面（fill）图层，下边讲一下如何在mapbox-gl加载线图层数据。mapbox-gl加载矢量数据，通过两种数据源，一种是矢量切片（vector），另一种是geojson数据，数据源加载完成后，再进行图层的设置。以geojson数据为例：面图层颜色设置，对应参数可以使用rgba形式：“fill-color”: “rgba(32, 62, 122, 1
2022-06-29 09:16:40
782
原创 Three.js开发：粗线的画法
Three.js的开发中，画线时，使用THREE.Line或者THREE.LineSegments进行画线时，发现在材质中设置线的宽度并不起作用，在查阅Three.js的文档发现，以上方式，对应的是webgl中gl.LINE_STRIP 或者 gl.LINES，这在一些浏览器渲染时，并不起作用，所以，Three.js扩展了一个画粗线的方法，具体的使用方法如下：相关的类库放在Three.js包的example中，首先引用相应的js文件实现效果如下：引用内容：https://github.com/mr
2022-06-28 09:52:58
1580
原创 polygon中心点四叉树计算测试
https://mp.weixin.qq.com/s?__biz=MzU2ODYzNzc4OQ==&mid=2247486129&idx=1&sn=306b0827c6fbe369fcdcfa400ec8cc5a&chksm=fc8baa83cbfc23958f23100387194f13a25c217439b4198cd8b3723272b5685f0573b1bea49e&token=463482986&lang=zh_CN#rd
2022-06-13 09:43:27
231
原创 mapbox-gl开发教程（十一）：加载线图层
–mapbox-gl是一个开源、基于webgl技术的前端地图类库–在地图应用的开发中，加载线数据，显示道路等信息，在mapbox-gl对应的是线（line）图层，下边讲一下如何在mapbox-gl加载线图层数据。mapbox-gl加载矢量数据，通过两种数据源，一种是矢量切片（vector），另一种是geojson数据，数据源加载完成后，再进行图层的设置。以geojson数据为例：//添加数据源，第一个参数为id线图层属性设置链接：https://docs.mapbox.com/mapbox-gl
2022-06-09 09:21:29
970
1
原创 mapbox-gl开发教程（十）：创建marker
–mapbox-gl是一个开源、基于webgl技术的前端地图类库–mapbox-gl提供了两种在地图上创建点数据的方式，一种是上一章讲的符号图层（symbol），另一种是本章讲的marker，这两种方式有各自的适用场景。符号图层（symbol）是以webgl的形式进行创建加载，数据源是geojson或矢量切片，适合大规模的数据加载，同时数据显示的样式不能过于复杂；marker是以html dom元素的形式进行创建加载，数据源是坐标点，加载的数据量不能太多，要不然会出现卡顿，不过，数据样式很丰富，完全根
2022-06-06 10:17:55
1861
2
原创 Three.js开发：环境贴图效果
Three.js支持环境贴图效果，通过设置场景的背景（background），增强显示效果，环境贴图一般使用全景图，分成6张图片，以立体贴图（CubeTexture）的方式进行加载。官网示例效果：环境贴图添加：在Three.js中设置环境贴图的方式如下： scene.background= new THREE.CubeTextureLoader().setPath('相对目录文件夹，里边包含6张贴图/').load( [ 'posx.jpg',
2022-05-30 12:22:43
2158
原创 mapbox-gl开发教程（九）：加载符号图层（symbol）
开发地图应用时，加载POI等点状数据，显示文字或者图标信息，mapbox-gl对应使用的是符号图层（symbol），下边讲一下如何加载符号图层数据。mapbox-gl加载矢量数据，通过两种数据源，一种是矢量切片（vector），另一种是geojson数据，数据源加载完成后，再进行图层的设置。以geojson数据为例：//添加geojson数据源，第一个参数为idmap.addSource('points', {'type': 'geojson','data': {'type': 'Featur
2022-05-25 12:19:47
1283
2
原创 mapbox-gl开发教程（八）：地图事件
在地图的开发过程中，和地图进行交互，涉及到地图相关的操作事件，mapbox-gl提供了鼠标操作、触摸、地图事件周期等事件以供使用。mapbox-gl的事件是通过on进行添加，off进行移除，还有once只执行一遍即移除，事件的相关示例代码：map.on('click', (e) => {console.log(`地图鼠标点击${e.lngLat}`);});事件能执行off，要把事件单独提出来，listener是必须的：function mapclick(e){ console.
2022-05-23 10:20:32
1604
原创 mapbox-gl开发教程（七）：自搭建后台服务
mapbox-gl开发过程中，设置token调用官网服务，在不使用官方提供的底图情况下，调用了官方的两个服务，一个是精灵图服务，在POI上需要图标的时候使用，另一个是字体服务，在需要地图上显示文字使用，这两个服务的地址，在样式（style）配置的文件中，能看到对应的设置，sprite是配置精灵图地址，glyphs是配置字体服务地址，所以，搭建mapbox-gl的后台服务时，需要将这两个服务进行发布。精灵图的详细信息参见：https://mp.weixin.qq.com/s?__biz=MzU2ODYzN
2022-05-20 09:10:29
431
原创 mapbox-gl开发教程（六）：矢量切片前端样式配置
矢量切片发布完成，需要在前端进行样式配置GIS开发：客户端控制的地图样式，颜色、字号、线宽、填充色、标签图片等属性设置，mapbox-gl样式配置结果是一个json文件，图层比较多时，需要一个可视化的工具进行编辑，国内的高德、百度等在线地图，支持客户端配置地图样式，同时提供了一个在线的可视化配置工具。mapbox-gl作为一个开源的地图类库，提供了一些开源的样式配置工具，Mapbox Studio、MVT Styler、Maputnik等，通过这些可视化的工具，能够对发布的矢量切片数据进行配置，一般都是国
2022-05-13 17:41:44
713
原创 mapbox-gl开发教程（五）：矢量切片(VectorTiles)数据发布
矢量切片数据制作完成后，在前端进行调用的时候，需要在服务器端进行数据发布，根据矢量切片不同的存在形式，发布的方式也不同。分散的矢量切片数据，常用的web服务器软件就能够发布，例如Apache、nginx、tomcat等，根据矢量切片数据后缀名不同，设置不同的MIME类型，下边是nginx的mime.types配置文件添加如下：application/octet-stream pbf;mbtiles格式的切片文件，需要使用支持mbtiles的服务器端软件，GitHub上有相应的开源软件，Geos
2022-05-11 12:00:57
1366
原创 mapbox-gl开发教程（四）：矢量切片数据制作
mapbox-gl主要的渲染方式是加载矢量切片（vectortiles），在前端根据自己设定的图层样式进行实时渲染，这和传统的通过后端制作好底图，发布成图片格式的切片是有区别的。在mapbox-gl的使用过程中，制作自己的矢量切片数据是相当关键的。目前，有多种方式能够进行矢量切片的制作，常用的有QGIS、Geoserver、超图的iServer等，官方也提供了几种开源工具进行矢量切片的制作，这里以tippecanoe为例，简单的列举一下如何进行矢量切片制作：工具地址：https://github.co
2022-05-09 09:09:59
1090
原创 mapbox-gl开发教程（三）：在线影像底图加载
应用系统的地图开发中，首先需要一张底图，才能够在上边进行各类应用的开发，在本身不是专业地图服务提供商时，使用现有的在线影像底图，不失为一种省时、省力的方式。最常见的是 国家地理信息中心 提供的天地图在线数据，保证数据的准确性和实时性。天地图的在线切片数据为例，mapbox-gl如何进行加载：一种是修改的样式（style）配置：let map = new mapboxgl.Map({container: 'map', style:{ "version": 8, "sources": {
2022-05-07 09:27:19
2086
原创 mapbox-gl开发教程（二）：地图主要配置参数说明
在mapbox-gl地图初始化时，能够进行一些参数，下边将关键参数进行说明，未涉及的请参见mapbox-gl官方文档：options.antialias（布尔型）：是否设置抗锯齿（平滑），默认值是false；options.bearing（数值型）：地图默认逆时针偏北旋转角度值（度数），默认值是0；options.bounds（经纬度范围型）：地图初始化的显示范围，如设置这个属性，设置的center和zoom属性不起作用，默认值是null；options.center（经纬度坐标型）：地图初始化的中
2022-05-06 12:11:11
2924
原创 mapbox-gl开发教程（一）：搭建前端开发环境
–mapbox-gl是一个开源、基于webgl技术的前端地图类库–开发教程篇一：搭建前端开发环境1、mapbox官网注册一个账号，生成一个开发token，在mapbox-gl2.0以前，使用自搭建的后台地图服务时，可以不使用此token，参见公众号文章：mapbox-gl升级到2.0后，使用自搭建的后端服务，也需要token，敬请注意！，或者修改mapbox-gl2.0以后的源码，也能避免token，参见公众号文章：mapbox-gl避免设置token源码修改，修改时，看一下官网的许可声明。2、生成t
2022-04-26 11:55:21
2632
原创 gltf-pipeline压缩gltf/glb模型的贴图
gltf-pipeline是一个gltf/glb模型的nodejs类库，使用此类库能够对gltf模型做进一步的处理，处理完成的gltf/glb模型，一般是将贴图文件包含到模型内容中，有时模型的显示并不需要太精细，将模型中的贴图进行压缩，能够减小模型的整体大小，加快模型的浏览速度。1、将模型中的贴图分离出来，gltf-pipeline实现的具体方式是：//gltf-pipeline的nodejs引用const gltfPipeline = require('gltf-pipeline');//使用pr
2022-04-24 10:00:18
3386
2
原创 gltf模型带透明贴图的显示问题
带透明贴图的三维模型，会涉及到在显示时，根据图片上的透明度，来显示不规则的形状，图片在制作三维模型时，导入的是规则形状，长方形或者正方形，如不对透明度进行处理时，显示的结果是不正确的，例如下边树木的三维模型设置：通过模型的处理软件，设置材质（material）的属性，能够使模型在引擎中显示时，将透明的位置不显示，从而达到正确的显示方式：具体的操作方式参见之前公众号文章：Blender导出带透明贴图的gltf模型在实际的操作中，拥有多张贴图的三维模型，一张一张贴图修改属性信息会比较慢，可以使用Ble
2022-04-21 08:59:25
2228
原创 GIS开发：C#到JavaScript的转化过程
2008年开始涉及到GIS开发这一块，最初使用C#开发桌面端应用程序、数据处理工具，web端同样以C#语言为基础的.net技术开发，到现在使用JavaScript语言，开发各类地图的web端应用，同样以JavaScript语言为基础的nodejs技术开发数据处理工具。最初的时候，地图开发、处理工具，都以桌面端软件形式存在，特别是三维的GIS软件，因性能的关系，GIS数据通常也比较大，二维地图Arcgis为主，超图开始发展起来，三维的有skyline、谷歌地球、伟景行等，国内计算机使用的操作系统主要是win
2022-04-19 09:06:01
521
1
原创 使用assimpjs转换三维模型
assimpjs是开源类库assimp的emscripten接口，能够实现读取40+以上类型的三维模型格式，导出成json或者gltf格式的三维模型。能够实现在浏览器中开发实现，也能够以nodejs的模式进行开发，数据处理时，使用nodejs能够很方便实现。下边以代码的形式，简单说一下如何进行模型转换，其中的注意事项。使用npm安装依赖包：npm install assimpjs //nodejs初始化 const assimpjs = require ('assimpjs'
2022-04-15 09:19:59
618
原创 Three.js导出gltf模型
Three.js支持将场景导出成gltf（glb）格式三维模型，以文件的形式进行存储，下面以代码的形式说明，如何将场景导出模型。初始化场景初始化一个Three.js场景，这个场景不需要显示，也能够将模型进行导出，简单代码如下： initthreescene() { this.scene = new THREE.Scene(); this.scene.background = new THREE.Color(0xcfcfcf); this.rendererScene(
2022-04-11 09:20:50
2943
1
原创 精细道路数据获取（视频）
https://mp.weixin.qq.com/s?__biz=MzU2ODYzNzc4OQ==&mid=2247486007&idx=1&sn=6bc4b09a30dcb495420f58ee2d692a5e&chksm=fc8baa05cbfc23138d421c47ef974bca7019d01537afec65196636f3567894621afb77d0cedb&token=659011465&lang=zh_CN#rd
2022-04-08 09:19:23
182
原创 mapbox-gl加载three.js泛光效果（视频）
https://mp.weixin.qq.com/s/XRIldONLeRMTtgGqxaeMrQ
2022-04-07 09:29:31
800
1
原创 分享Three.js 泛光（眩光）效果实现
分享Three.js 泛光（眩光）效果实现https://threejs.org/examples/#webgl_postprocessing_unreal_bloomhttps://github.com/mrdoob/three.js/blob/master/examples/webgl_postprocessing_unreal_bloom.html
2022-04-02 09:10:13
1393
原创 使用Cesium创建3dtiles管线（视频）
https://mp.weixin.qq.com/s/nCFn5hJEqp8DRnT9AIZbug
2022-03-31 09:06:45
1488
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人