evomap-CSDN博客

原创使用EvoMap/Three.js模拟无人机灯光秀

EM.model.Model 是一个用于加载和渲染 3D 模型的类，可以通过传入 URL 参数来加载不同的模型文件，并通过设置坐标、旋转和缩放等参数来放置到地图上。这是一组具有速度、颜色和坐标的无人机灯光秀模拟数据，上图的示例数据表示该无人机点位以0.5m/s的速度，位置由[2.6268,-30.9000,3.6048]变化到[0.6030,-30.9000,3.1729]，颜色由"#f00"变化到"#33f"。方法，用于设置地图的光照强度设置为默认值的0.1，以降低地图中的光照效果。

2023-11-08 01:22:42 612

原创 three.js/webgl实现室内模型行走

使用three.js实现的模型室内行走案例，鼠标点击确定目标点后，模型转向并行走至目标点，并支持碰撞检测。

2022-08-05 01:59:45 2731 5

原创使用three.js/webgl实现简易地形

在three.js中使用mapbox地形瓦片的方法

2022-07-22 01:54:43 2168

原创使用three.js/webgl开发智慧城市场景的一些总结

一、城市建筑二、浮动标注三、图标告警闪烁二、城市流光三、区域轮廓热力图五、后期泛光六、全局扫描效果

2021-05-08 22:16:37 6722 12

原创使用three.js实现跟随模型的第一人称、第三人称相机控制

最近在我原有的“室内场景demo”的基础上做了一个跟随模型的第三人称相机控制，以键盘wasd控制模型的行走，以鼠标控制模型的朝向。在线地址一、加载带动画的FBX模型这里使用了three.js中的FBXLoader来加载模型，模型加载完成之后创建动画不播放，等键盘按下之后再播放动画。二、监听键盘事件键盘的按下和抬起都可以通过事件捕捉，当鼠标按下时，我们播放FBX模型的动画，鼠标抬起时，结束动画。window.addEventListener('keydown', fun...

2020-06-08 01:15:19 12123 8

原创 three.js/webgl 展示城市建筑

本文简述如何在three.js中展示已有的城市建筑面数据。一、城市建筑面数据格式这里的城市建筑面数据指的是底部为任意多边形，包含高度属性的面数据，这里我们使用的数据源为geojson格式的面数据。二、构建几何要素的顶点信息我们根据基础面数据和高度，构建底部面、侧面以及顶部面，并使用earcut将底面、侧面、顶面切成一个个绘制需要的三角形。三、侧面贴纹理为侧面指定纹理和纹理坐...

2020-04-26 01:17:36 5851 12

原创 three.js 三维室内地图导航实例

总用three.js做一些零散好玩的效果，却也没怎么把他们整合到一起，最近因一位网友需要，把室内地图导航走通了一下。这里主要在前端使用了有名的Dijkstra算法，关于此算法这里不再赘述，这里描述一下从路径数据准备到最佳路径输出的整个过程。在线体验地址1.节点数据准备节点是路径生成的基础，我们需要在建筑的基础上，拾取出场景中所有路径节点的坐标，作为基础数据并保存。节点数据示...

2019-09-03 01:08:32 15700 25

原创 three.js中绘制宽线的两种方式

webgl中线是没有宽度的，现实的应用中一般做法都是将线拓宽成面来绘制，有两种做法：1.纯CPU计算在线地址2.GPU着色器计算

2019-08-09 20:20:17 8635 12

原创使用three.js模拟地球效果

地球效果参考于earth20501.创建地球这里使用的是创建一个几何为SphereGeometry的网格mesh，再贴上地球经投影后的图片作为纹理。其中地心坐标为默认THREE.Vector3(0,0,0)。const geometry = new THREE.SphereGeometry(radius, 66,44);const material = new THREE.MeshBasi...

2019-05-23 00:26:28 9898 4

原创使用three.js模拟城市灯光秀

在线地址第一次和朋友去看城市灯光秀，就在想灯光秀的实现原理。想过投影，但是细看即没有投影源，也没有投影路径，再就只能是灯光秀墙体安装灯光体设备，统一组织所有灯光体的发光，当然这种灯光体的灯光可以是各种颜色的。电脑屏幕、手机屏幕中都有像素的概念，像素其实就是图像中的最小单元。在灯光秀整个场景中，最小的单元就是灯光体，而灯光秀的整个场景，则组成了一个大的“屏幕”。以下是我使用three.j...

2019-05-23 00:23:37 4247 4

原创使用three.js创建粒子火焰效果

在线地址

2019-05-23 00:19:52 8125 9

原创使用three.js创建楼层布局图

最近大半年一直在做三维部分的工作，之前做三维楼层都是外部加载使用建模工具创建的模型，但是渲染不够灵活、无法绑定房间信息，所以决定来使用three.js来创建楼层布局。在线地址1.调整光源灯光有SpotLight、AmbientLight、DirectionalLight等、实际项目一般都是多个灯光组合的方式来创建光源。这里我使用的是Directiona...

2018-09-25 12:17:22 29181 46

原创使用three.js搭建室内场景

公司做商城、消防、用电等项目，需要实现楼层和设备的可视化，以前都是使用其他建模工具创建的整体模型，再使用three.js的加载器加载到场景中，但是这样的加载存在缺陷，比如不能给模型的元素赋属性、不能单个点击元素、渲染单调等。所以本次参考了一些资料，不使用模型倒入，完全使用three.js搭建场景，代码有些粗燥勿怪。在线地址1.创建地板地板是一个类似盒子，有顶部有底部有...

2018-09-23 12:02:17 25706 50

原创使用three.js开发3d地图初探

公司要做智慧消防楼层可视化，需要用到web3d，开源的引擎中先研究了cesium三维地球，但cesium做楼层感觉是大材小用，而且体验也不好，最终选用的是功能强大、更适合小型场景的three。three是图形引擎，而web二维三维地图都是基于图形引擎的，所以拿three来开发需求简单的三维地图应用是没什么问题的。在线展示1.坐标转换实际地理坐标为经度、纬度、高度，而th...

2018-05-15 16:28:10 42198 50

原创使用cesium创建icon+text类型的标注

从2维地图转3维地图，越来越发现自己的不足，2维地图的API都是很完善的，使用API就可以实现2维地图的绝大部分功能，但是3维地图API还不是很完善，很多东西都需要基础开发，开发的过程中也可以学到很多。1.创建icon+text类型的标注 icon+text类型的标注在地图底图中很常见，但cesium没有现成的API可以使用，其中的billboard也只能以图片的形式创建一个图标。后...

2018-03-12 11:14:29 13421 16

原创使用openlayers3+中添加右键菜单

openlayers3+中没有直接的监听地图右键的功能，但是我们可以通过使用jquery监听地图所在的html元素的右键事件来实现。一、定义右键弹出框的html元素 <div id="contextmenu_container" class="contextmenu"> <ul> <li> 缩放至 &lt...

2017-10-20 15:12:36 4049 3

原创下载和使用网络上的XYZ格式栅格切片

本文是使用servlet实现网络切片的缓存；再使用openlayers3、4加载发布的切片。一、切片规则我们通常可以使用xyz这样的坐标来精确定位一张瓦片。z表示地图层级，x为瓦片坐标横坐标，y为瓦片坐标纵坐标。一般情况下，z的最小值是0，此时x、y值都为0，世界地图由一张瓦片组成；z的值确定的情况下，x的范围为[0,2^x-1],y的范围为[0,2^x-1]。而对于这种类型的瓦片，o

2017-10-20 10:17:37 4236 1

转载很实用的50 个 Bootstrap 插件

Bootstrap是快速开发Web应用程序的前端工具包。它是一个CSS和HTML的集合，它使用了最新的浏览器技术，给你的Web开发提供了时尚的版式，表单，buttons，表格，网格系统等等。本文向你推荐 50 个 Bootstrap 的插件，可以考虑在你下一个项目中使用它们。1. Bootstrap Multiselect2. Bootstrap Dialog

2017-10-16 16:25:55 7987

转载矢量切片(Vector tile)

转载自 http://www.cnblogs.com/escage/p/6387529.html说明：本月的主要工作都是围绕制作矢量切片这一个核心问题进行的，所以2月的主题就以这个问题为主，目前分支出来的一些内容主要包括了TMS(Tile map service)，OpenLayers3中的Projection和Resolution以及proj4js在OpenLayers3中的应用，这些在

2017-09-13 09:19:19 9772 2

原创 openlayers3+功能拓展

最近看到openlayers3的一个功能拓展，每个功能都是在源码的基础上开发的，我们可以对照着学习源码，也可以参考着做自己的功能拓展，很实用。地址：http://viglino.github.io/ol3-ext/

2017-09-01 08:57:48 1562

原创 openlayers3+中模拟晨昏线

最近在flightware上看到一个好玩的功能，根据季节和一天中的时间，计算太阳的光照线，并模拟出白天黑夜分界线。这里分享一下。1.结果夏至日-北京时间12点：北半球光照最多，白天最长，黑夜最短，北极圈极昼，南极圈极夜冬至日北京时间12点：北半球光照最少，白天最短，黑夜最长，北极圈极夜，南极圈极昼春分秋分北京时间12点：南北半球光照相当，日夜等长

2017-08-23 15:52:56 3769 7

原创 openlayers3+中实现点选、圈选、多边形选择点要素

点选、圈选、多边形选择也是地图中比较基础的功能了，只是一直没有需求，最近两天把这个功能从页面到功能完整的做了一遍。我使用的方法是使用ol4的API加一些js算法，这里记录一下。1、需求点选：点击一个点，弹出模态框设置半径，设置完成后，在地图上绘制点和半径画的圆，选中圆内的设备，并在搜索结果框中展示这些设备。圈选：直接绘制一个圈选，选中圆圈内的设备，并在搜索结果框中展示这些设备。

2017-08-23 14:45:00 18607 28

原创 iconfont字体图标的使用

地图中使用图标的场景很多，之前一直都是将各图标放到一张大图里面，再使用css切图的方式读取，后来接触到iconfont,iconfont可以像字体一样使用css调整图标，简单好用功能强大！这里记录一下1.注册登录阿里巴巴矢量图标库官网http://www.iconfont.cn/2.新建项目【图标管理】—>【我的项目】—>【新建项目】，创建自己的项目，保存和管理自己的图标

2017-08-15 10:08:50 2252

转载 PostGIS常用函数

1.基本操作函数AddGeometryColumn(, ,, , , )给一个已存在属性数据表增加一个几何字段(geomtrycolumn)。schema_name 指表的模式的名字，srid 必须是一个整数指对应于 SPATIAL_REF_SYS 表，type必须是一个大写的字符串，用来描述几何类型，例如：'POLYGON' 或者 'MULTILINESTRING'。Drop

2017-06-28 10:20:27 1117

原创 pgrouting两个经纬度点之间最优路径规划

部分参考于：http://blog.csdn.net/longshengguoji/article/details/463503551、数据导入关于安装配置以及路网数据导入数据库，这里不再说明，这里我导入的表为newroad 注意：在导入的选项卡中，将编码设置为GBK，并勾选“生成简单的几何图形而不是多个几何图形”，确保导入的路网数据的类型为Geometry(LineS

2017-06-21 13:04:20 2392 1

原创 pgrouting最优路径规划之一

最近接触pgrouting。把学习的结果记录下来一、pgrouting安装和配置需要根据系统版本、PostgreSQL版本、PostGIS版本来选择合适的pgrouting版本下载包以后解压缩，将lib目录下文件复制到PostgreSQL的lib目录下，再在PostgreSQL数据库中执行share/extension目录下的sql脚本，这样就完成了整个环境的配置配置完成后

2017-06-05 13:49:13 12017 13

转载 GeoServer之SqlView

原文：http://www.cnblogs.com/hanhuibing/articles/5642703.htmlGeoserver+postgresql+openlayers是目前主流的gis开发工具。Postgresql用于存储地图数据，geoserver用于发布地图数据，openlayers或者leaflet用于访问发布地图。正常情况下当shapefile格式的数据导入 post

2017-05-24 16:36:09 2317 2

原创在GeoServer中使用Udig配置的地图样式

之前使用的ArcGIS，图层直接在ArcMap中可视化编辑，之后在ArcGIS Server中发布使用，很方便。但考虑到版权问题，这里使用udig美化图层，然后在geoserver中发布使用。1.利用udig软件对shape进行样式可视化编辑

2017-05-22 16:33:01 4884

原创使用GeoServer发布PostGIS表数据

最近在研究PostGIS，这里记录一下PostGIS 是 PostgreSQL 关系数据库的空间操作扩展。它为 PostgreSQL 提供了存储、查询和修改空间关系的能力。我这里使用GeoServer发布PostGIS表数据1.数据准备我这里是一张存储有城市的信息的表（cities）。表有三列，一个是 ID 编号，一个是城市名，另一列是PostGIS独有的地理几何列

2017-05-22 15:31:41 8722

转载 PostGIS 快速入门

PostGIS 快速入门　　PostGIS 是 PostgreSQL 关系数据库的空间操作扩展。它为 PostgreSQL 提供了存储、查询和修改空间关系的能力。本文中 ‘PostgreSQL’ 指代基本的关系数据库功能，而 ‘PostGIS’ 指代扩展的空间操作特性。客户端－服务器构架　　PostgreSQL 同众多数据库产品一样，采用客户端－服务器构架。客户端向服务器发

2017-05-15 15:00:26 428

转载地转偏向力

地转偏向力是由于地球自转而使地球表面运动物体受到与其运动方向相垂直的力。全称地球自转偏向力。地转偏向力不会改变地球表面运动物体的速率（速度的大小），但可以改变运动物体的方向。地转偏向力对季风环流、气团运行、气旋(台风)与反气旋(冷空气)的运移路径、洋流与河流的运动方向以及其它许多自然现象有着明显的影响，例如，北半球河流多有冲刷右岸的倾向，高纬度地区河流上浮运的木材多向右岸集中等。物

2017-05-12 16:57:43 3639

转载基于Cesium的一些demo

转自 http://blog.csdn.net/u013929284/article/details/53471135Cesium的强大不用多说，所以有很多政府、组织基于cesium做了一些应用，其中不乏有很多优秀的示例，我们大都可以从中获得对自己的项目有益的东西。另：有的网站需要翻墙。 1.一个NASA的海洋风向可视化项目网址：http://mwsci.jpl.nasa.gov

2017-05-10 10:18:36 11017 1

原创地图中html元素的使用

使用js实现tab页签切换效果1.新建html元素，先把tab结构写好，主要是由li组成的标题块和div组成的内容块实时表盘

2017-05-09 14:22:03 670

原创 openlayers3 自定义鹰眼缩略图

openlayers3自带的鹰眼缩略图控件功能很局限，想到自己动手去做，结果很容易就做出来了，这里主要用到的是两个map互相联动

2017-03-15 11:08:43 7222 2

转载 GeoServer中WMS、WFS的请求规范

转载自http://www.cnblogs.com/naaoveGIS/1.背景1.1WMS简介Web地图服务（WMS）利用具有地理空间位置信息的数据制作地图。其中将地图定义为地理数据可视的表现。这个规范定义了三个操作：GetCapabitities返回服务级元数据，它是对服务信息内容和要求参数的一种描述； GetMap返回一个地图影像，其地理空间参考和大小参数是明确定义了

2017-02-07 10:54:05 5213 4

原创 js资源跨域访问的问题

最近用cesium加载自己发布的WMS底图服务，遇到资源跨域报错，主要是没设置资源跨域访问，查了一些资料，这里总结一下：1.Tomcat6、Tomcat7发布的资源跨域设置：需要下载cors-filter-1.7.jar、Java-property-utils-1.9.jar这两个库文件，放到tomcat的lib目录下，然后配置项目的web.xml文件，在web.xml中添加如下内容：（注

2017-01-05 17:14:41 2045