基于Cesium绘制栅栏的示例代码

目录
  • 最终效果
  • 创建 dynamicWallMaterialProperty.js 文件

网上的资料要不收费,要不代码不全,很多跟绘制墙体有关的案例要不缺放法要不干嘛的,我自己根据网上的方法又加上自己百度改,最后实现了一个效果,和我想实现的效果差不多,分享一下子。

最终效果

反正这篇博文最后实现的效果就是上面动图的效果,如果你想实现的效果不是这个样子的话就不要看了,浪费时间了就。

创建 dynamicWallMaterialProperty.js 文件

首先需要一个 dynamicWallMaterialProperty.js 文件,然后在cesium引入一下子。

dynamicWallMaterialProperty.js 文件内容就是下面这个,理论上直接复制过去就可以了。

(function () {
  /*
      动态墙材质
      color 颜色
      duration 持续时间 毫秒
      trailImage 贴图地址
  */
  function DynamicWallMaterialProperty(options) {
    this._definitionChanged = new Cesium.Event();
    this._color = undefined;
    this._colorSubscription = undefined;
    this.color = options.color || Color.BLUE;
    this.duration = options.duration || 1000;
    this.trailImage = options.trailImage;
    this._time = (new Date()).getTime();
  }

  /**
   * 带方向的墙体
   * @param {*} options.get:true/false
   * @param {*} options.count:数量
   * @param {*} options.freely:vertical/standard
   * @param {*} options.direction:+/-
   */
  function _getDirectionWallShader(options) {
    if (options && options.get) {
      var materail = "czm_material czm_getMaterial(czm_materialInput materialInput)\n\
      {\n\
          czm_material material = czm_getDefaultMaterial(materialInput);\n\
          vec2 st = materialInput.st;";
      if (options.freely == "vertical") { //(由下到上)
        materail += "vec4 colorImage = texture2D(image, vec2(fract(st.s), fract(float(" + options.count + ")*st.t" + options.direction + " time)));\n\ ";
      } else { //(逆时针)
        materail += "vec4 colorImage = texture2D(image, vec2(fract(float(" + options.count + ")*st.s " + options.direction + " time), fract(st.t)));\n\ ";
      }
      //泛光
      materail += "vec4 fragColor;\n\
          fragColor.rgb = (colorImage.rgb+color.rgb) / 1.0;\n\
          fragColor = czm_gammaCorrect(fragColor);\n\
          material.diffuse = colorImage.rgb;\n\
          material.alpha = colorImage.a;\n\
          material.emission = fragColor.rgb;\n\
          return material;\n\
      }";
      return materail
    }
  }

  Object.defineProperties(DynamicWallMaterialProperty.prototype, {
    isConstant: {
      get: function () {
        return false;
      }
    },
    definitionChanged: {
      get: function () {
        return this._definitionChanged;
      }
    },
    color: Cesium.createPropertyDescriptor('color')
  });

  var MaterialType = 'wallType' + parseInt(Math.random() * 1000);
  DynamicWallMaterialProperty.prototype.getType = function (time) {
    return MaterialType;
  };

  DynamicWallMaterialProperty.prototype.getValue = function (time, result) {
    if (!Cesium.defined(result)) {
      result = {};
    }
    result.color = Cesium.Property.getValueOrClonedDefault(this._color, time, Cesium.Color.WHITE, result.color);
    result.image = this.trailImage;
    if (this.duration) {
      result.time = (((new Date()).getTime() - this._time) % this.duration) / this.duration;
    }
    viewer.scene.requestRender();
    return result;
  };

  DynamicWallMaterialProperty.prototype.equals = function (other) {
    return this === other ||
      (other instanceof DynamicWallMaterialProperty
        && Cesium.Property.equals(this._color, other._color))
  };

  Cesium.Material._materialCache.addMaterial(MaterialType, {
    fabric: {
      type: MaterialType,
      uniforms: {
        color: new Cesium.Color(1.0, 0.0, 0.0, 0.5),
        image: Cesium.Material.DefaultImageId,
        time: -20
      },
      source: _getDirectionWallShader({
        get: true,
        count: 3.0,
        freely: 'vertical',
        direction: '-'
      })
    },
    translucent: function (material) {
      return true;
    }
  });
  Cesium.DynamicWallMaterialProperty = DynamicWallMaterialProperty;
})();

上边代码呢,就是 dynamicWallMaterialProperty.js 文件的全部内容,然后嘞,在文件引入一下。

  <script type="text/javascript" src="./dynamicWallMaterialProperty.js"></script>

然后嘞,就可以编写逻辑代码了呀!

function dataProces() {
    let data = [
      [
        116.398322, 39.929032
      ],
      [
        116.408096, 39.929364
      ],
      [
        116.408599, 39.919736
      ],
      [
        116.398609, 39.919404
      ], [
        116.398322, 39.929032
      ],
    ]
    let coor = Array.prototype.concat.apply(
      [],
      data
    );
    let datasouce = map_common_addDatasouce('wall');
    datasouce.entities.add({
      wall: {
        positions: Cesium.Cartesian3.fromDegreesArray(coor),
        positions: Cesium.Cartesian3.fromDegreesArray(coor),
        maximumHeights: new Array(data.length).fill(300),
        minimunHeights: new Array(data.length).fill(0),
        material: new Cesium.ImageMaterialProperty({
          transparent: true,//设置透明
          image: "./img/wjw.png",
          repeat: new Cesium.Cartesian2(1.0, 1),
          // color: Cesium.Color.RED,
        }),
        // material: new Cesium.DynamicWallMaterialProperty({ trailImage: './img/wjw.png', color: Cesium.Color.RED, duration: 1000 })
      },
    });
  }

然后调用上面的方法就可以了!!

但是上面代码使用了一个方法,就是 map_common_addDatasouce ,网上很多案例都使用了这个方法,但是呢,这个方法又不说是啥,然后我在调用的时候直接就是找不到了,但是好在找到了这个方法。

  function map_common_addDatasouce(datasouceName) {
    let datasouce = viewer.dataSources._dataSources.find(t => {
      return t && t.name == datasouceName;
    });
    if (!datasouce) {
      datasouce = new Cesium.CustomDataSource(datasouceName);
      viewer.dataSources.add(datasouce);
    }
    return datasouce;
  }

好了,总体就是这个样子,完成!!!

到此这篇关于基于Cesium绘制栅栏的示例代码的文章就介绍到这了,更多相关Cesium绘制栅栏内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue2.0项目集成Cesium的实现方法

    安装cesium 在已有项目中执行, npm i cesium 修改配置 build/webpack.base.conf.js 1.定义 Cesium 源码路径 const cesiumSource = '../node_modules/cesium/Source' 'use strict' const path = require('path') const utils = require('./utils') const config = require('../config') const

  • 基于Cesium绘制抛物弧线

    Cesium绘制抛物弧线,供大家参考,具体内容如下 在网上搜了很多都没有搜到,于是自己花了点时间琢磨了一下,做个记录 思路 两点连线作为坐标轴,模拟抛物线,在线上取点画直线,主要用于高度/p> 取n个点,依次画线,得到近似的抛物线,点越多越光滑 JS代码 // 两点之间抛物线绘制函数,twoPoints是一个数组:[lon1,lat1,lon2,lat2] function animatedParabola(twoPoints) { //动态抛物线绘制 let startPoint = [two

  • Centos7实现MySQL基于日志还原数据的示例代码

    简介 Binlog日志,即二进制日志文件,用于记录用户对数据库操作的SQL语句信息,当发生数据误删除的时候我们可以通过binlog日志来还原已经删除的数据,还原数据的方法分为传统二进制文件还原数据和基于GTID的二进制文件还原数据 前期准备 准备一台Centos7虚拟机,关闭防火墙和selinux,配置IP地址,同步系统时间,安装MySQL数据库 传统二进制日志还原数据 修改配置文件 [root@localhost ~]# vi /etc/my.cnf server-id=1 log-bin=b

  • Three.js实现绘制字体模型示例代码

    前言 本文主要给大家介绍了关于利用Three.js绘制字体模型的相关内容,使用three.js绘制字体模型,没有想象当中那么难.下面话不多说了,来一起看看详细的介绍: 首先你需要实例化 THREE.FontLoader() 来进行json格式的文字格式加载,在加载成功的回调函数里面进行创建网格. 然后通过THREE.TextBufferGeometry或者THREE.TextGeometry方法进行网格创建,并将需要设置的问题传入. 再设置一个纹理,通过THREE.Mesh()函数创建成图形添加

  • 基于SSM框架之个人相册示例代码

    学习了一阵子的SSM框架,一直在各种博客,简书,慕课网学习,最后终于自己撸出来一个简单的个人相册. 项目的演示效果: 开发的工具及环境: IntelliJ IDEA: 2016 Maven :3.0x Hbuilder(前端部分,可以用记事本代替2333) Java 8 项目流程(dao->service->web): 1.添加所有依赖: <dependency> <groupId>junit</groupId> <artifactId>juni

  • Android 基于IntentService的文件下载的示例代码

    文件下载这种事情是很耗时的.之前使用AsyncTask这样的异步类来做下载,然后切到后台就被干掉.所以打算试试Service.(不过按目前那些系统的尿性,其实Service也分分钟被干掉) 不过,这里并不是直接使用Service类,而是使用的是继承自Service的IntentService. 这个东西有三大好处: 1.他有个任务队列: 2.任务队列执行完后会自动停止: 3.他会起一个独立的线程,耗时操作不会影响你app的主线程. 这么自动化的东西简直省心. 话不多说,开始撸代码. 首先,要建个

  • Android中贝塞尔曲线的绘制方法示例代码

    贝塞尔曲线,很多人可能不太了解,什么叫做贝塞尔曲线呢?这里先做一下简单介绍:贝塞尔曲线也可以叫做贝济埃曲线或者贝兹曲线,它由线段与节点组成,节点是可拖动的支点,线段像可伸缩的皮筋.一般的矢量图形软件常利用贝塞尔曲线来精确画出曲线. 上面的介绍中,"线段像可伸缩的皮筋"这句话非常关键,但也特别好理解.至于贝塞尔曲线的详细内容大家可以查阅相关资料.        Android提供的贝塞尔曲线绘制接口 在Android开发中,要实现贝塞尔曲线其实还是很简单的,因为Android已经给我们提

  • Android基于ImageView绘制的开关按钮效果示例

    本文实例讲述了Android基于ImageView绘制的开关按钮效果.分享给大家供大家参考,具体如下: 今天弄了一下用图片绘制开关按钮. 效果图: 还有我两张start图片和stop图片就是上面的图片,到时候大家可以按照自己的图片调用.. Main.xml文件 在xml进入这段代码就ok了. <ImageView Android:id="@+id/start" android:layout_width="150.px" android:layout_heigh

  • python绘制简单折线图代码示例

    1.画最简单的直线图 代码如下: import numpy as np import matplotlib.pyplot as plt x=[0,1] y=[0,1] plt.figure() plt.plot(x,y) plt.savefig("easyplot.jpg") 结果如下: 代码解释: #x轴,y轴 x=[0,1] y=[0,1] #创建绘图对象 plt.figure() #在当前绘图对象进行绘图(两个参数是x,y轴的数据) plt.plot(x,y) #保存图象 plt

  • 基于Spring Data的AuditorAware审计功能的示例代码

    Spring Data提供支持审计功能:即由谁在什么时候创建或修改实体.Spring Data提供了在实体类的属性上增加@CreatedBy,@LastModifiedBy,@CreatedDate,@LastModifiedDate注解,并配置相应的配置项,即可实现审计功能,有系统自动记录 createdBy CreatedDate lastModifiedBy lastModifiedDate 四个属性的值,下面为具体的配置项. 示例 创建一个实体类 package com.hfcsbc.i

  • Android 曲线图的绘制示例代码

    本文介绍了Android 曲线图的绘制示例代码,分享给大家,具体如下: 效果展示 效果展示.gif 使用方式 // 初始化数据表格相关 with(mTableView) { // 配置坐标系 setupCoordinator("日", "人", /*这里是横坐标的值*/0f, 5f, 10f, 15f, 20f, 25f, 30f) // 添加曲线, 确保纵坐标的数值位数相等 addWave(ContextCompat.getColor(this@MainActiv

  • 基于Vue2x的图片预览插件的示例代码

    本文介绍了基于Vue2x的图片预览插件的示例代码,分享给大家,具体如下: 先来看下Demo LiveDemo 关于开发Vue插件的几种方式 (具体请移步官网)Vue官网 MyPlugin.install = function (Vue, options) { // 1. 添加全局方法或属性 Vue.myGlobalMethod = function () { // 逻辑... } // 2. 添加全局资源 Vue.directive('my-directive', { bind (el, bin

随机推荐

其他