- 博客(10)
- 收藏
- 关注
RSS订阅原创 node images分离精灵图
使用node images的库分离精灵图，具体方法：images(image[, x, y, width, height]) (从另一个图像中复制区域来创建图像)，.save(file[, type[, config]])保存图片成.png格式
2021-08-27 09:25:00
193
原创 Three.js的着色器材质(ShaderMaterial)
ShaderMaterial简介：http://www.webgl3d.cn/threejs/docs/index.html#api/zh/materials/ShaderMaterialThree.js中可以使用自定义的着色器（shader），进行材质的渲染，并且Three.js的类库中预置了一些常用的shader，可以直接拿来进行使用，下载Three.js的类库包，可以在three\examples\js\shaders中使用对应的js文件。使用方式以垂直模糊为例：js引用 <scr
2021-08-23 12:11:21
1836
原创 mapbox-gl绘制经纬网格（Graticule）
在mapbox-gl上实现经纬网格，是按照经度、纬度的一定间隔，将同经度（纬度）的坐标点，连接成直线，实现绘制经纬度网格的形式。实现代码参照开源代码，实现在地图上进行经纬度网格的绘制。//纬线function makeMeridian(lng) {lng = lngFix(lng);const coords = [];for (var lat = -90; lat <= 90; lat += 1) {coords.push([lng, lat]);}return coords;}
2021-08-19 09:29:52
1549
2
原创 mapbox-gl截图功能
mapbox-gl的截图功能，参见网址：https://github.com/geolonia/mbgl-export-controlhttps://github.com/shiyuan598/Map-Visualization/tree/master/mapbox-template
2021-08-12 09:16:41
739
原创 mapbox-gl中three.js对象的位置
mapbox-gl中集成three.js参见公众号文章：mapbox-gl集成three.js开发官方示例中，mapbox-gl集成three.js，是将three.js加载的对象放置在设置的参考坐标中心点，在开发过程中，有时需要在three.js，依据不同位置，放置多个模型对象，或者其他three.js对象，这就需要计算每个对象的位置信息了。mapbox-gl基础操作坐标是经纬度，three.js中常用的坐标设置单位是米，所以，根据每个模型对象的实际位置（经纬度），要进行一步转换，计算出模型距离设置的
2021-08-10 09:27:08
1283
原创 mapbox-gl中的web墨卡托转换
mapbox-gl的api开放了web墨卡托和经纬度的转换，直接使用mapbox-gl的api能够进行web墨卡托的坐标操作。api说明网址：https://docs.mapbox.com/mapbox-gl-js/api/geography/#mercatorcoordinateweb墨卡托的坐标说明：http://epsg.io/3857api使用说明将经纬度坐标转换成web墨卡托坐标，包含了高度的信息：let modelAsMercatorCoordinate = mapboxgl.Me
2021-08-10 09:25:56
1869
原创 分享proj4js中经纬度和兰伯特投影的转换代码
兰伯特投影简介参见百科搜索：兰伯特投影在气象数据的处理中，是比较常用的投影坐标系，根据不同区域、范围进行投影。proj4是专业的坐标转换类库，有各种语言版本的，C++，java，js，python版等，可以很方便的将坐标从一个坐标系转换到另一个坐标系。在前端使用的时候，应用场景需要转换大量的坐标，就会发现使用proj4js存在性能问题，查看了一下proj4js的源代码，发现类库每次调用初始化很多不相关的类型，对象等，所以，在基础上，进行了提取。转换代码及说明//初始化常用的变量，直接换算成弧度，提
2021-08-05 09:07:49
1705
11
原创 mapbox-gl集成three.js开发
mapbox-gl近日更新到了2.0.0版本，有两个更新对地图的体验和实用性有了相当大的提升。一是自身完善了地图引擎对高程数据的支持（DEM）：二是调整了观看视角，以前限制到只能以60度的倾角观看，现在放宽到可以以85度的视角观看，基本达到平视的效果，同时添加了天空盒的效果，优化平视观看到的场景：mapbox-gl的代码开发中，集成了three.js的示例，在地图加载了一个gltf格式的三维模型。通过在mapbox-g加载自定义图层的形式，实现three.js场景中的对象，实时同步显示。关键代
2021-08-03 08:55:47
1643
4
原创 精灵图图标选中效果
精灵图的制作、精灵图的使用，在开发的过程中，需要在精灵图上选中一个图标，地图上使用这个选中的图标进行POI创建，灵活的根据客户端需求进行图标的使用。以之前的精灵图效果为例，达到选中的效果（红框示意）：使用canvas加载图片html5的canvas技术，能够将一张图片加入进去，并按照图片的实际尺寸进行显示，示例代码如下：let _image = new Image(); //设置图片支持跨域 _image.setAttribute("crossOrigin", "Anonymous");
2021-08-02 09:09:36
171
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人