WebGis——从零开始vue使用cesium添加点线(四)

简介: WebGis——从零开始vue使用cesium添加点线(四)

cesium添加点、线、面有两种方式,一种是Entity方式,另一种是Primitive

相对于Entity,使用Primitive具有以下优势:

(1)性能:绘制大量Primitive时,可以将其合并为单个Geometry以减轻CPU负担、更好的使用


GPU。合并Primitive由web worker线程执行,以保持UI响应性;

(2)灵活性:Geometry与Appearance 解耦,两者可以分别进行修改;

(3)低级别访问:易于编写GLSL顶点、片段着色器、使用自定义的渲染状态 。

同时,也具有以下劣势:

(1)需要编写更多的代码,并且对图形编程有更深刻的理解,尤其是OpenGL知识;

(2)需要对组合几何形状对于静态数据有效,而对于动态数据则不一定有效。

 

需求:添加点、线。点击地图会消失,点击点会出现

效果:


560601cb71ac4c2ea824dc243e98fcaa.png

代码如下:这里this.map是我实例化传入进来的,你可以使用viewer代替。

   this.polyline_sate = []
      this.polyline_sate.push(pick.id.lon)
      this.polyline_sate.push(pick.id.lat)
      this.polyline_sate.push(20000)
      this.polyline_sate.push(pick.id.truthLon)
      this.polyline_sate.push(pick.id.truthLat)
      this.polyline_sate.push(20000)
      this.polyline_sate.push(pick.id.lon)
      this.polyline_sate.push(pick.id.lat)
      this.polyline_sate.push(20000)
      this.polyline_sate.push(pick.id.secondLon)
      this.polyline_sate.push(pick.id.secondLat)
      this.polyline_sate.push(20000)
      this.drawline(pick.id)
// 使用primitive 画线
  drawline(val) {
    if (this.polyline_sate.length >= 2) {
      this.lineDataSource.add({
        // Cesium.Cartesian3.fromDegreesArrayHeights([经度1, 纬度1, 高度1, 经度2, 纬度2, 高度2])
        // 如果有高度,上面的 this.polyline_sate 里面要增加高度的
        positions: new Cesium.Cartesian3.fromDegreesArrayHeights(this.polyline_sate),
        // 宽度
        width: 2,
        material: Cesium.Material.fromType('Color', {
          color: Cesium.Color.fromCssColorString('#0ABD73FF'),
        }),
        distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 800000),
        clampToGround: false,
        // 线的颜色
      })
      this.drawLabel(val)
      this.addsate(val)
    } else {
      this.lineDataSource.removeAll()
      this.labels.removeAll()
      this.satebillboards.removeAll()
    }
  }
  // 使用entities画线
  newdrawline() { 
    if (this.polyline_sate.length >= 2) {
      this.lineDataSource.entities.add({
        name: 'line',
        polyline: {
            positions: new Cesium.Cartesian3.fromDegreesArrayHeights(this.polyline_sate),
            width: 2,
            material: Cesium.Color.fromCssColorString('#0ABD73FF'),
          clampToGround: false,
        },
      })
      this.drawLabel()
    } else {
      this.lineDataSource.entities.removeAll()
    }
  }
  // 标注
  drawLabel(val) { 
   this.labels.add({
      position: Cesium.Cartesian3.fromDegreesArrayHeights([(val.lon + val.truthLon) / 2,(val.lat + val.truthLat) / 2,20000])[0],
      text: (Number(val.distanceMinGrad)*1000).toFixed(2)+'KM',
      font: '16px sans-serif',
      distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 800000),
   });
   this.labels.add({
    position: Cesium.Cartesian3.fromDegreesArrayHeights([(val.lon + val.secondLon) / 2,(val.lat + val.secondLat) / 2,20000])[0],
    text: (Number(val.distanceMinGt)*1000).toFixed(2)+'KM',
    font: '16px sans-serif',
    distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 800000),
  });
  }
  // 添加点
  addsate(item) { 
    const truh=_.cloneDeep(item)
    truh.shownewtooltip='truh'
    this.satebillboards.add({
      position: Cesium.Cartesian3.fromDegrees(item.truthLon, item.truthLat, 20000),
      image: 'img/sate/red.png',
      //   color: Cesium.Color.fromCssColorString(),
      // rotation: deg2rad(item.angle),
      scale: 0.5,
      id: truh,
      // height: 10,
      heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
      distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 1000000),
      //用来展示哪种弹窗
    })
    const second=_.cloneDeep(item)
    second.shownewtooltip='second'
    this.satebillboards.add({
      position: Cesium.Cartesian3.fromDegrees(item.secondLon, item.secondLat, 20000),
      image: 'img/sate/blue.png',
      //   color: Cesium.Color.fromCssColorString(),
      // rotation: deg2rad(item.angle),
      scale: 0.5,
      id: second,
      // height: 10,
      heightReference: Cesium.HeightReference.RELATIVE_TO_GROUND,
      distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0, 1000000),
      //用来展示哪种弹窗
    })
  }


相关文章
|
8天前
|
JavaScript 前端开发 开发者
Vue中的class和style绑定
在 Vue 中,class 和 style 绑定是基于数据驱动视图的强大功能。通过 class 绑定,可以动态更新元素的 class 属性,支持对象和数组语法,适用于普通元素和组件。style 绑定则允许以对象或数组形式动态设置内联样式,Vue 会根据数据变化自动更新 DOM。
|
8天前
|
移动开发 JavaScript API
Vue Router 核心原理
Vue Router 是 Vue.js 的官方路由管理器,用于实现单页面应用(SPA)的路由功能。其核心原理包括路由配置、监听浏览器事件和组件渲染等。通过定义路径与组件的映射关系,Vue Router 将用户访问的路径与对应的组件关联,支持哈希和历史模式监听 URL 变化,确保页面导航时正确渲染组件。
|
8天前
|
JavaScript 前端开发 数据安全/隐私保护
Vue Router 简介
Vue Router 是 Vue.js 官方的路由管理库,用于构建单页面应用(SPA)。它将不同页面映射到对应组件,支持嵌套路由、路由参数和导航守卫等功能,简化复杂前端应用的开发。主要特性包括路由映射、嵌套路由、路由参数、导航守卫和路由懒加载,提升性能和开发效率。安装命令:`npm install vue-router`。
|
12天前
|
监控 JavaScript 前端开发
ry-vue-flowable-xg:震撼来袭!这款基于 Vue 和 Flowable 的企业级工程项目管理项目,你绝不能错过
基于 Vue 和 Flowable 的企业级工程项目管理平台,免费开源且高度定制化。它覆盖投标管理、进度控制、财务核算等全流程需求,提供流程设计、部署、监控和任务管理等功能,适用于企业办公、生产制造、金融服务等多个场景,助力企业提升效率与竞争力。
66 12
|
29天前
|
JavaScript 安全 API
iframe嵌入页面实现免登录思路(以vue为例)
通过上述步骤,可以在Vue.js项目中通过 `iframe`实现不同应用间的免登录功能。利用Token传递和消息传递机制,可以确保安全、高效地在主应用和子应用间共享登录状态。这种方法在实际项目中具有广泛的应用前景,能够显著提升用户体验。
61 8
|
30天前
|
存储 设计模式 JavaScript
Vue 组件化开发:构建高质量应用的核心
本文深入探讨了 Vue.js 组件化开发的核心概念与最佳实践。
77 1
|
2月前
|
JavaScript
vue使用iconfont图标
vue使用iconfont图标
151 1
|
2月前
|
JavaScript 关系型数据库 MySQL
基于VUE的校园二手交易平台系统设计与实现毕业设计论文模板
基于Vue的校园二手交易平台是一款专为校园用户设计的在线交易系统,提供简洁高效、安全可靠的二手商品买卖环境。平台利用Vue框架的响应式数据绑定和组件化特性,实现用户友好的界面,方便商品浏览、发布与管理。该系统采用Node.js、MySQL及B/S架构,确保稳定性和多功能模块设计,涵盖管理员和用户功能模块,促进物品循环使用,降低开销,提升环保意识,助力绿色校园文化建设。
|
3月前
|
JavaScript API 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的
|
3月前
|
JavaScript 前端开发 开发者
Vue是如何进行组件化的
Vue是如何进行组件化的

热门文章

最新文章