hhzz
始终不渝,谦卑吾心。在 Java 后端方面耕耘数年,同时也专注于前端流行框架vue 以及移动端 uniapp 和 uincloud 云端一体框架,平常喜欢记录学习博客,也乐于分享自己的学习心得;阿里云专家博主,目前专注重点是 docker 容器技术以及 k8s 集群管理、devops 开发运维和 aigc 大模型应用等;另外在地理信息 GIS 方面也有一定的研究。
展开
-
Mapbox GL在Vue项目中的应用(综合demo)
MapboxGL是一个强大的JavaScript库,用于创建交互式和可自定义的地图。它基于WebGL构建,能够在浏览器中高效地渲染矢量地图。地图样式:Mapbox GL支持自定义地图样式,允许您设计和定制地图的外观。您可以定义地图的图层、样式、颜色和标签,以创建独特的视觉效果。交互性:使用Mapbox GL,您可以轻松地为地图添加交互性。您可以添加标记、弹出窗口、工具提示和交互式控件,使用户可以与地图及其要素进行交互。原创 2023-05-30 14:18:49 · 1910 阅读 · 0 评论 -
从零开始Vue项目中使用MapboxGL开发三维地图教程(七)创建一个自动旋转的地球、添加一个3D模型、实现在两个地图之间滑动和同步来比较两个地图
实现思路:通过在动画结束时调用easeTo,旋转动画将无限期地继续。旋转在用户交互时暂停,并且在高缩放级别时减慢到停止。实现功能:地球仪和camera动画结合在一起,创建旋转行星效果。原创 2023-06-18 20:23:32 · 1518 阅读 · 0 评论 -
从零开始Vue项目中使用MapboxGL开发三维地图教程(六)加载点、线、面图层以及三维面图层(白模)
然后使用addLayer创建一个新的图层,并设置多边形外观的样式。为了在多边形周围添加轮廓,它再次使用addLayer来创建一个引用相同GeoJSON源的新线层。开发地图应用时,加载POI等点状数据,显示文字或者图标信息,mapbox-gl对应使用的是符号图层(symbol),下面的代码时使用Mapbox GL JS中的默认Marker方法向地图添加两个标记。在mapbox-gl加载fill-extrusion图层过程:通过加载geojson矢量数据,数据源加载完成后,再进行图层的设置。原创 2023-06-17 12:19:07 · 1812 阅读 · 0 评论 -
从零开始Vue项目中使用MapboxGL开发三维地图教程(五)实现框选要素功能、可拖动点展示坐标以及地图上实时更新要素
首先定义一个空的点要素集合GeoJSON变量,用来存放拖动点坐标信息;然后使用MapTouchEvents来防止默认的地图拖动行为并获取更新的坐标。最后使用map.getSource中的setData对变量更新赋值,基本思路是:通过turf来计算出在框选区域内的所有点(数据),将这些数据构成一个新的图层,置放于最上层,用不同的颜色来表示。实现功能:通过更新地图上的现有要素的数据来添加新坐标来动态显示路径。可以将点拖动到地图上的新位置,并在地图上显示新的点坐标。原创 2023-06-15 17:39:16 · 1391 阅读 · 0 评论 -
从零开始Vue项目中使用MapboxGL开发三维地图教程(一)MapboxGL介绍以及前期vue项目的搭建
1、Mapbox-gl简介2、搭建vue项目2.1、创建vue项目2.2、注册mapbox官网2.3、mapbox-gl入门案例3、Mapbox-gl地图主要配置参数说明Mapbox-gl是一个开源、基于webgl技术的前端地图类库。地图数据渲染和可视化这块我们经常用到的有商业使用的如:百度地图API和JS、高德地图的API和JS、ESRI的arcgis的全家桶,同时也有开源的一些地图引擎如:openlayers、mapboxgl、Leaflet等。原创 2023-06-11 20:48:42 · 3406 阅读 · 0 评论 -
从零开始Vue项目中使用MapboxGL开发三维地图教程(二)Mapbox地图样式
Mapbox地图样式:按照Mapbox地图样式规范中描述的模式定义的一个JSON对象,或者是此类JSON的URL。可以接受null值以允许手动添加样式。要从Mapbox API加载样式,可以使用表单的URL其中:owner是您的Mapbox帐户名,:style是样式ID。原创 2023-06-12 14:57:09 · 1670 阅读 · 2 评论 -
从零开始Vue项目中使用MapboxGL开发三维地图教程(三)添加全屏,缩放旋转和比例控制面板以及自定义图标、标记点击弹窗、地图平移等功能
/geojson数据 const geojson = {});${//geojson数据 const geojson = {});//geojson数据 const geojson = {});${//geojson数据 const geojson = {});//geojson数据 const geojson = {});${原创 2023-06-13 17:52:21 · 1424 阅读 · 1 评论 -
从零开始Vue项目中使用MapboxGL开发三维地图教程(四)改变鼠标style、地图置于单击feature中心、量测距离和polgon面积和中心点坐标
该功能使用mapbox gl draw绘制多边形,并使用Turf.js计算其面积(平方米)和中心点坐标。绘制最终顶点时双击以完成多边形。多边形的总面积将显示在地图的左上角。在地图上画一个多边形,并计算多边形中包含的面积和中心点坐标。要删除多边形并绘制新多边形,请使用地图右上角的绘制工具。单击地图上的点来创建线,使用turf测量线的长度距离。这里我们使用到turfjs库,安装并引入turf。单击地图开始绘制多边形。原创 2023-06-14 17:45:05 · 1693 阅读 · 2 评论