基于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)

相关推荐

  • 基于Cesium绘制抛物弧线

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

  • 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绘制栅栏的示例代码

    目录 最终效果 创建 dynamicWallMaterialProperty.js 文件 网上的资料要不收费,要不代码不全,很多跟绘制墙体有关的案例要不缺放法要不干嘛的,我自己根据网上的方法又加上自己百度改,最后实现了一个效果,和我想实现的效果差不多,分享一下子. 最终效果 反正这篇博文最后实现的效果就是上面动图的效果,如果你想实现的效果不是这个样子的话就不要看了,浪费时间了就. 创建 dynamicWallMaterialProperty.js 文件 首先需要一个 dynamicWallMat

  • 通过Python绘制中国结的示例代码

    目录 1 中国结的组成部分 2 设计中国结对象 3 绘制结体 4 绘制耳翼 5 绘制挂耳和流苏 6 完整代码,一键运行 1 中国结的组成部分 中国结是一种手工编织工艺品,它身上所显示的情致与智慧正是汉族古老文明中的一个侧面.因为其外观对称精致,可以代表汉族悠久的历史,符合中国传统装饰的习俗和审美观念,故命名为中国结.中国结代表着团结幸福平安,特别是在民间,它精致的做工深受大众的喜爱.其主要组成部分如下图所示. 2 设计中国结对象 基于Python Turtle库实现绘制,首先设计一个中国结对象,

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

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

  • OpenCV 绘制同心圆的示例代码

    目录 功能函数 测试代码 最近在学习OpenCV,本文主要介绍了OpenCV 绘制同心圆的示例代码,分享给大家,具体如下: 功能函数 // 绘制同心圆 void DrawConcentricCircle(cv::Mat mask, const cv::Point2i &center, int radius1,int radius2, const cv::Scalar &color, int thickness,int linetype) { // 创建画布 cv::Mat canvas =

  • 利用Pygame绘制圆环的示例代码

    目录 三角函数 弧度和角度的关系 基本包和事件捕捉 主程序 全部代码 三角函数 如果我们以OP作为圆的半径r,以o点作为圆的圆心,圆上的点的x坐标就是r * cos a ,y坐标就是 r * sin a. python中提供math.cos() 和 math.sin(),要求参数为弧度. 弧度和角度的关系 PI代表180度,PI就是圆周率:3.1415926 535 897392 23846,python提供了角度和弧度的转化 math.degress() 弧度转角度 math.radiens(

  • Python绘制灯笼的示例代码

    目录 一.效果展示 二.代码展示 三.拓展 一年一度的元宵节刚刚过去,由于时间关系,在元宵节当天晚上11点多才完成本文灯笼的绘制.这两天又在忙着别的事情,所以现在才跟大家分享. 一.效果展示 在介绍代码之前,先来看下本文的实现效果. 视频链接 二.代码展示 接下来展示绘制灯笼的全量源代码 import os import pygame import turtle as t ##画外轮廓 t.title('元宵节字谜灯笼') t.setup(startx=0, starty = 0) #画灯笼提线

  • Python绘制时钟的示例代码

    目录 导入需要的包设置变量 写数字 绘制时针 完整代码 导入需要的包设置变量 from datetime import datetime from pygame.locals import * import sys, math, pygame def print_text(font, x, y, text, color=(255, 255, 255)): img_text = font.render(text, True, color) screen.blit(img_text, (x, y))

  • JS+CSS绘制棋盘格的示例代码

    目录 实现思路 完整代码 效果展示 在这篇文章中,我将展示如何使用 css 和一些 JavaScript 来设计棋盘. 为此,你需要对 CSS Flex-box 和 nth-child() 属性有基本的了解. 所以让我们开始吧...... 实现思路 我们将为每个偶数行添加 containerEven 类作为父容器,为每个奇数行添加 containerOdd, 下面显示了相同的 CSS .containerEven>div:nth-child(odd) { background-color: wh

  • Android利用贝塞尔曲线绘制动画的示例代码

    目录 彩虹系列 弹簧动画 复杂立体感动画 总结 前面我们花了几篇介绍了贝塞尔曲线的原理和绘制贝塞尔曲线,着实让我们见识到了贝塞尔曲线的美.好奇心驱使我想看看贝塞尔曲线动起来会是什么样?本篇就借由动画驱动贝塞尔曲线绘制看看动起来的贝塞尔曲线什么效果. 彩虹系列 通过动画控制绘制的结束点,就可以让贝塞尔曲线动起来.例如下面的动图展示的效果,看起来像搭了一个滑滑梯一样.实际上就是用7条贝塞尔曲线实现的,我们使用了 Animation 对象的值来控制绘制的结束点,从而实现了对应的动画效果. 具体源码如下

  • Android利用Flutter path绘制粽子的示例代码

    目录 前言 绘制 基本轮廓 粽叶 嘴巴 眼睛 腮红 手&脚 头巾 咸甜是一家 发声 动画控制嘴巴开合 用到的技术点 总结 前言 大家好,端午将至,首先提前祝小伙伴端午安康,端午作为中华民族的非常重要的传统节日,粽子那是必不可少的,但是你真的知道粽子的历史吗? 今天跟随本篇文章用Flutter path画一个会科普节日的的粽子吧- 绘制 基本轮廓 首先我们需要将粽子的基本轮廓绘制出来,通过图片可以看到粽子的轮廓是一个圆圆的三角形状, 本篇文章所有的图形都是用纯Path路径制作,这里我们可以将粽子的

随机推荐