![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Vue
向着太阳往前冲
分享GIS相关技术开发经验成果及资料;
分享内容仅为个人理解和经验总结。
展开
-
Vue + Cesium 缓冲分析实现
目录一、缓冲分析效果图二、部分关键代码1、点缓冲分析2、线缓冲分析3、面缓冲分析4、生成缓冲区三、vue中调用1、引入缓冲分析对应类2、点线面的缓冲分析调用方法四、缓冲分析类源码原创 2022-03-16 15:44:39 · 2779 阅读 · 1 评论 -
vue + Echart + Cesium 绘制剖面分析图
目录一、实现效果图二、核心代码1.世界坐标转换为经纬度2.计算两点空间距离3.线段插值4.绘制剖面分析线段三、完整源码原创 2022-03-15 16:25:29 · 3074 阅读 · 4 评论 -
Vue+Cesium创建项目并加载地图全过程
Vue2创建项目并配置Cesium加载三维地图cesium 安装配置npm run dev 运行错误处理原创 2022-03-05 16:46:21 · 6079 阅读 · 4 评论 -
cesium 热力图(基于CesiumHeatmap源码修改后实现)
一、热力图效果图二、核心代码 // 模拟热力图坐标范围及核心代码 loadCesiumHeatMapFun(){ let tmpXYList = [ new Cesium.Cartographic(111.2300232,39.5279085, 0), new Cesium.Cartographic(111.2300178,39.5256063, 0), new Cesium.Cartographic(111.19880原创 2021-11-15 15:02:48 · 1934 阅读 · 3 评论 -
cesium 模型裁剪分析(模型内部裁剪和外部裁剪)
一、模型裁剪分析对3D Tileset模型进行裁剪分析,可任意绘制多边形范围进行裁剪,具体效果如下未裁剪模型局部范围效果图外部裁剪效果图内部裁剪效果图二、完整代码<template> <div id="geologyClipPlanDiv" v-if="geologyClipPlanIsShow"> <table style="text-align: right;"> <tr> ..原创 2021-11-09 10:01:46 · 4173 阅读 · 12 评论 -
WebGL、ThreeJS、BabylonJS、SceneJS和Cesium框架对比及简介
主要介绍WebGL的各个框架的特点,适用范围,优缺点以及相关网址范例;以便于后续更快速的开发,提高生产效率,最后进行总结;一、 BabylonJS(开源;JavaScript、TypeScript)(一)特点强大,美观,简单和开放的3D渲染体验。(二)适用范围Babylon.js是一款WebGL开发框架。 适合做中大型项目,尤其是多种媒体混杂的或者是游戏项目VR体验项目(三)支持格式glTF,OBJ,STL,.babylon (...原创 2021-10-22 18:36:52 · 9542 阅读 · 1 评论 -
vue中经纬度与墨卡托投影坐标互转、地球坐标系(WGS-84)转火星坐标系
constmapCommon={}/***@description:经纬度转墨卡托投影坐标*/mapCommon.lonlatTomercator=(lonlat,wkid)=>{constmercator={type:'point',spatialReference:{wkid:wkid},x:0,y:0}c...原创 2020-07-28 10:02:49 · 1025 阅读 · 0 评论 -
vue el-input输入框el-autocomplete下拉列表样式修改
一、根据需求修改自定义样式,最终效果如下图常规修改样式代码如下,输入框样式已修改;/deep/.el-input__inner:focus { border: 1px solid #1fb1ef; } /deep/.el-input__inner { border: 1px solid #1fb1ef; background: rgba(0, 80, 111, 0.8); border-radius: 18px; height: 30px; .原创 2021-10-12 16:52:37 · 3938 阅读 · 1 评论 -
基于cesium的地形开挖地形剖切
基于cesium地形开挖结合示例以及官方代码修改后封装TerrainClipPlan.js文件,在代码引入即可使用,详细介绍请往下看一、地形剖切效果图 :图一图二二、核心代码根据绘制范围构建剖切点数据for (var r = 0; r < i; ++r) { var s = (r + 1) % i, u = Cesium.Cartographic.fromCartesian(e[r]), ...原创 2021-09-28 19:56:32 · 7612 阅读 · 53 评论 -
cesium glb模型参数动态修正工具
在cesium中加载glb模型时需要反复调整参数,为了方便编写了一个页面辅助模型位置修正;现分享给大家,不足之处请包涵组件页面如下:组件完整代码如下:<template> <div id="glbToolBar" v-if="glbToolBarIsShow"> <table style="text-align: right;"> <tr> <td colspan="2" style="text.原创 2021-09-27 20:39:06 · 1138 阅读 · 0 评论 -
webgis端通用的几何要素LineString分割Polygon
完整代码类如下:import * as turf from '@turf/turf'/** * geoJson数据处理模块 * (需要引入turf.js) * 输入输出数据均为标准geoJson格式 */const geoClipUtil = { /** * 合并多边形 */ unionPolygon: function (polygons) { var polygon = polygons[0]; for (var i原创 2021-09-27 20:24:34 · 1033 阅读 · 1 评论 -
vue + cesium 线/面流动纹理实现
一、 封装PolylineTrailLinkMaterialProperty类,只需输入颜色、纹理图片路径、持续时间即可(color、imgUrl、duration);let Cesium = require('cesium/Cesium')const PolylineTrailLinkMaterialProperty = (function(){/* 流动纹理线 color 颜色 duration 持续时间 毫秒*/function PolylineTrailLin原创 2021-09-24 10:28:39 · 2654 阅读 · 17 评论 -
vue + cesium 人和车路线全景漫游播放
全景漫游核心代码如下:处理Cartesian3点的数据集合添加到positionsList中 trackView(positionsList) { if(trackedEntity) window.viewer.entities.remove(trackedEntity) trackedEntity = undefined window.viewer.trackedEntity = undefined window.viewer....原创 2021-09-15 11:08:15 · 1277 阅读 · 0 评论