- 博客(74)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 Mapbox封装图形绘制工具 线，圆，polygon，删除，点 mapbox-gl-draw-circle mapbox-gl-draw
使用插件，安装vue案例，封装的组件使用方式，通过tools控制需要哪些绘制控件。
2024-09-24 13:52:26
617
原创 element时间段选择器或时间选择器 只设置默认起始时间或者结束时间，不显示问题
上面例子是动态设置起始时间，模拟从后台拿到的数据进行显示，当后端返回的时间不是时间段，只有一个起始时间，导致时间组件不回显。
2024-08-08 17:27:56
421
1
原创 threejs添加弹窗
const projectionPos = d3.geoMercator().center([81.23, 46.33]) // 这个不太懂百度吧，没百明白引入后使用。
2023-05-17 17:33:33
2949
原创 QGIS绘制geojson数据使用
然后再地图上绘制就好了，最后将该图层导出geojson格式就行了。需要在地图上绘制岛屿以外的动态海面，需要海面的坐标数据。在qgis中引入项目开发的地图资源，或自定义。双击加入操作台，找到编辑区域，新建图层。tips：还可以将选择的区域进行反选。
2022-12-15 16:58:01
1147
原创 cesium动态绘制圆，矩形，自定义区域
自己封装了一个类，可以放在js文件中引入项目，具体使用和代码如下/**cesium实例对象 */ this . viewer = viewer /**绘制要素的相关配置* 默认配置* {borderColor: Cesium.Color.BLUE, 边框颜色borderWidth: 20, 边框宽度material: Cesium.Color.GREEN.withAlpha(0.5),填充材质}* @description: 绘制矩形区域/*** 矩形四点坐标。
2022-10-19 17:45:13
7662
14
原创 问题：在vite+vue3中使用高德地图Marker引用本地图标路径问题
方式三：icon：new URL(‘./xxxxxx’, import.meta.url).href。若未能生效，报错require is notxxxxxx 见方式二三。方式二：import img from ‘./xxxxx/’方式一：require(‘./xxxx’)
2022-10-10 14:28:22
1542
1
原创 Cesium.js:1 Error loading image for billboard: [object Event]
标签图片不显示地址错误当在.js文件中去引用本地图片，路径要通过require()的形式引入，修改如下billboard: { image: require("../img/boshi.png"), pixelOffset: new Cesium.Cartesian2(-120, 0), // eyeOffset: new Cesium.Cartesian3(0.0, 0.0, 0.0), horizontalOrigin: Cesium
2022-02-09 15:23:26
4053
5
原创 vue js获取当地城市以及天气状况
引入高德地图API在html文件中引入<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=这里填写你申请的密钥，获取地址：https://lbs.amap.com/api/javascript-api/guide/abc/prepare"></script>methods中定义方法 //获取当地城市及天气 async getTianQi() {
2021-12-27 15:01:44
2610
3
原创 本地安装cesium服务
下载cesiumjs文件到本地网址 https://cesium.com/cesiumjs/本地打开 安装依赖npm install express compression request yargs在文件夹下按住shift键 右击鼠标此时服务已经开启引入即可使用
2021-12-19 16:48:07
359
原创 cesium 地图无法加载 报错401 缺少token
cesium 地图无法加载 报错401 缺少token首先，报错401 说明用户没有访问权限,需要进行身份认证，也就是cesium需要密钥，也是最近实行的吧，因为之前不用也能加载出地图。token 密钥获取token 获取地址[https://cesium.com/ion/tokens?page=1](https://cesium.com/ion/tokens?page=1)首先需要注册登录进行如上操作后，右边栏就是你的token使用的时候只需要复制token，再地图viewer创建前
2021-12-17 11:41:38
3506
原创 横向柱状图（标签图片展示）
效果图HTML代码<!DOCTYPE html><html style="height: 100%"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"&g
2021-12-14 15:34:41
1405
原创 cesium 角度坐标之间的转换（经纬度转笛卡尔转弧度）
<script> var lng = 132.02294829, lat = 53.323929; console.log("经纬度转笛卡尔"); const viewer = new Cesium.Viewer("app", {}) var lnglatTocartesian = Cesium.Cartesian3.fromDegrees(lng, lat) console.log(lng, lat, lnglatTocartesia.
2021-12-01 17:42:56
2235
原创 cesium 实现测距离测面积 （划线画面 跟随鼠标位置 ）
效果图方法一：使用插件cesium_measure.js下载地址：https://github.com/zhangti0708/cesium-measure/blob/master/src/cesium-measure.js<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" cont
2021-12-01 16:49:28
2176
原创 cesium开发常用方法总结（拾取坐标，弹框信息跟随，地图视角切换，水面波浪效果，获取当前相机视角信息，绘制轨迹路线...）
cesium 使用方法总结（持续更新）坐标拾取，打印经纬度eventMap(viewer) { var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas) //拾取坐标 handler.setInputAction((event) => { var earthPositio
2021-11-19 16:05:39
5095
原创 cesium地图点击获取经纬度
//拾取坐标 eventMap(viewer) { var handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas) handler.setInputAction((event) => { var earthPosition = viewer.camera.pickEllipsoid(event.p
2021-11-11 16:38:46
964
原创 地形获取+地形切片+IIS发布+cesium加载地形
数据下载使用地理空间数据云进行地形获取，网址：http://www.gscloud.cn/search注册登录后进行地形检索，步骤说明如下：空间选择方式，这里按照矩形选择区域，点击检索，下载结果并解压参考文章：https://blog.youkuaiyun.com/qq_27816785/article/details/119804139数据处理使用cesiumLab地形切片工具，进行相关配置配置项参考文档：https://cesiumlab.com/#/helpIIS服务器搭建及发布地形数据参
2021-11-03 11:45:46
2072
原创 楼块获取+楼块切片3dtiles+IIS服务器发布+cesium加载楼块
数据下载 使用工具QGIS对楼块进行获取下载，生成 .shp文件备用 工具下载地址：https://www.qgis.org/en/site/forusers/download.html下载安装完毕，设置中文新建链接 获取楼块 保存.shp文件输入名称以及地图类别URL，这里使用OCM：http://a.tile.openstreetmap.org/{z}/{x}/{y}.png更多地图类别及安装QGIS 操作可参考：https://blog.youkuaiyun.com/sinat_3636
2021-11-03 11:38:31
4172
3
原创 Echarts立体柱状图（颜色渐变，数据颜色跟随柱子颜色）
效果图代码//公交线路客流量排行var buyTop = echarts.init(document.getElementById('fluxorder')); //图表容器var color1 = new echarts.graphic.LinearGradient(0, 1, 0, 0, [{ offset: 0, color: "#2673fb" }, { offset: 1, color: "#5711ba" }], false);var color2 = new echarts.gr
2021-10-14 17:16:40
1927
1
原创 柱状图的柱子样式（顶部样式，数值统一显示在最顶部或一侧）
效果图斜箭头图片代码提示：通过象形柱图实现//站台上下客人数排行var updown = document.getElementById('updown');var updowndata = [["马家村", "马家", "张陈家", "港边路口", "杭商院北门"], [10, 13, 15, 18, 23],]function updownNum(dom, data) { var updown = echarts.init(dom) // 指定图表的配置项和数据 var un
2021-10-14 17:04:42
1487
原创 Echarts折线图的tooltip样式，背景，位置，折线颜色渐变（自定义样式）
效果图//24小时发车趋势图var trend = document.getElementById('fachetrend')var trenddata = [['06:00', '07:00', '08:00', '09:00', '10:00', '11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00'],[5, 40, 30, 40, 20, 28, 32, 22, 18, 30, 33, 30]]function t
2021-10-14 16:52:07
5310
1
原创 PC端页面适配
页面使用px为单位，正常写引入js即可自动调整const baseWidth = 1920; //设计稿的宽const baseHeight = 1080; //设计稿的高let timer = null;let calcScale = function () { let windowInnerWidth = window.innerWidth; let windowInnerHeight = window.innerHeight; // let ratioW = bas
2021-09-28 12:03:16
369
原创 修改浏览器默认滚动条样式
css样式加载全局样式中::-webkit-scrollbar{ width:3px; height:0px;} /* 滚动条的大小 */::-webkit-scrollbar-track {background-color: #6d7277;} /* 滚动条的滑轨背景颜色 */::-webkit-scrollbar-thumb {background-color:#4b4d50; border-radius:0px;}...
2021-09-24 17:47:01
527
原创 实现自定义CheckBox样式
实现自定义CheckBox样式 input[type=checkbox] { position: absolute; top: 5px; left: 10px; width: 30px; height: 30px; cursor: pointer;
2021-09-23 16:43:32
584
原创 查看本地电脑已连接的wifi密码（命令行）
查看本地电脑已连接的wifi密码（命令行）win + r 输入cmd打开命令行输入 netsh wlan show profiles可以查看到本地连接过的wfi输入 netsh wlan show profile name=“wifi的名字” key=clear就可以看到该wifi详细内容...
2021-09-17 10:41:25
1503
1
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人