XTfighting-优快云博客

原创 onclick响应函数undefined问题

解决方法：window.函数名= function(value){　　　　　......}

2020-07-22 16:07:29 1390 1

原创 echarts清理画布

项目中有时候使用选择下拉框在同一个画布中显示不同的图表，这时候需要使用到echarts清理画布然后在重新设置数据，清除画布代码如下：echarts.init(document.getElementById(divId)).dispose();更多内容请扫码关注我的微信公众号，或者在微信里搜索公众号webgis学习，我会不定期更新自己的web方面的学习心得。...

2020-05-07 13:44:50 1107

原创 Leaflet连续绘制点

本文主要介绍leaflet连续绘制点（marker），保留每个点的编号信息。由于项目不便外泄，这里就不显示底图了。最终效果如下：代码如下：//点击手动添加点function addMaker(){ map.on('click ',addMakerEvent);}//添加点事件function addMakerEvent(e){ //自定义的c...

2020-04-29 20:29:10 1257 1

原创 LayUI下拉框默认选中方法

layui中有两种下拉框默认选中方法。注意两种方法必须加上form.render()才有效果。1、方法一：$("#selectid").find("option[value="+value+"]").prop("selected",true);form.render();2、方法二：$("#selectid").val(value);form.render();...

2020-04-23 14:29:34 6821 1

原创 Vue与WebGL结合--逐片元光照

本文主要讲述Vue与WebGL结合并实现逐片元光照。文中部分代码源自《WebGL编程指南》代码如下<template> <div> <canvas ref="myglCanvas" width="400" height="400"></canvas> </div></template><s...

2020-04-20 22:56:35 482

原创 Vue与WebGL结合--MVP矩阵

本文主要介绍MVP矩阵，MVP矩阵实际上是由模型矩阵、视图矩阵以及投影矩阵组合而成，主要用于调整模型位置、观察模型位置以及相机投影信息。文中部分代码源自《WebGL编程指南》。代码如下：<template> <div> <canvas ref="myglCanvas" width="400" height="400"></canvas...

2020-04-11 23:36:07 890 2

原创 Vue与WebGL结合--多重纹理

本文在上篇文章的基础上利用Vue与WebGL结合添加多重纹理。文中部分代码和资源源自《WebGL编程指南》。代码如下：<template> <div> <canvas ref="myglCanvas" width="400" height="400"></canvas> </div></template...

2020-04-10 23:36:13 442

原创 Vue与WebGL结合--纹理

本文介绍vue与WebGL结合给四边形添加纹理，文中部分代码及图片源自《WebGL编程指南》。代码如下：<template> <div> <canvas ref="myglCanvas" width="400" height="400"></canvas> </div></template>&l...

2020-04-09 22:57:44 1186

原创 Vue与WebGL结合--绘制彩色点和三角形

上篇文章中的点的颜色都为红色，其中的颜色变量直接在片元着色器中设置完成。本文介绍将颜色数据与点的坐标数据一起传入着色器中进行点的颜色设置，需要用到varying类型变量。本文部分代码源自《WebGL编程指南》。代码如下：<template> <div> <canvas ref="myglCanvas" width="400" height="40...

2020-04-04 09:39:30 495

原创 Vue与WebGL结合--绘制不同大小的点

本文将点的尺寸变量传入顶点着色器，并将顶点坐标和尺寸数据存放在同一个缓冲区中进行渲染，达到绘制不同大小的点的目的，本文部分代码源自《WebGL编程指南》。代码如下：<template> <div> <canvas ref="myglCanvas" width="400" height="400"></canvas> <...

2020-04-03 22:46:16 450

原创 Vue与WebGL结合---旋转平移矩阵

本文在上文的基础上加上旋转平移矩阵，以达到对图像进行基本的旋转平移操作的目的。文中部分代码源自《WebGL编程指南》代码如下：<template> <div> <canvas ref="myglCanvas" width="400" height="400"></canvas> </div></templ...

2020-04-02 23:17:36 748

原创 Vue与WebGL结合绘制三角形

本文主要介绍Vue与WebGL结合绘制三角形，这里用到新的知识点--缓冲区。本文部分代码源自《WebGL编程指南》。这里创建了一个initBuffer的函数，用于操作缓冲区。代码如下<template> <div> <canvas ref="myglCanvas" @mousedown="clickCanvas($event)" width="4...

2020-04-02 23:13:24 734

原创 WebGL与Vue结合连续绘制彩色点

本文在上篇文章的基础上，将连续绘制的点改为随机的彩色点。直接上代码。<template> <div> <canvas ref="myglCanvas" @mousedown="clickCanvas($event)" width="400" height="400"></canvas> </div></tem...

2020-03-28 20:51:21 322

原创 WebGL与Vue结合连续绘制点

本文主要介绍《WebGL编程指南》中连续绘制点功能的学习，并将代码改造在Vue框架中运行。部分代码源自https://blog.youkuaiyun.com/GISuuser/article/details/82224057以及《WebGL编程指南》。1、在src/components中新建canvas.vue文件。2、代码如下：<template> <div> ...

2020-03-28 20:46:24 464

本文将WebGL与当前前端比较火的Vue框架进行初步结合，以备后续项目开发需要。部分代码源自https://blog.youkuaiyun.com/GISuuser/article/details/82224057以及《WebGL编程指南》。大家可以自己百度搜索vue的安装配置。这里仅介绍本项目的开发过程。1、创建vue工程在cmd窗口中输入vue init webpackvueproject，...

2020-03-28 20:14:15 10818 1

原创《WebGL编程指南》学习--绘制点

从事三维GIS很长时间了，一直都是做Cesium二次开发，但是基本不了解其底层原理。我深知自己还达不到看懂Cesium源码源码的水平，因此还得从基础做起，因此开始学习《WebGL编程指南》一书，并记录本人的心得体会。文中部分代码及截图源自《WebGL编程指南》。绘制一个点1、html文件中的代码：<body onload="main()"> <canvas i...

2020-03-19 11:42:54 325