Cesium（二）：vue+cesium实现天际线分析

_小郑有点困了

已于 2022-05-22 20:23:24 修改

阅读量1.4k

点赞数

分类专栏： Cesium 文章标签： vue.js 前端 javascript cesium

于 2022-05-22 19:59:14 首次发布

本文链接：https://blog.csdn.net/qq_44706619/article/details/124915384

版权

本文介绍了如何在Vue项目中利用Cesium实现天际线分析。通过结合cesium的边缘检测和后期处理，达到在3D地图上展示地形边缘的效果，效果优于SuperMap案例。提供具体的实现代码，将功能封装在skyLine.js中，可直接在Vue组件中调用。

摘要由CSDN通过智能技术生成

参考博客：Cesium天际线分析

闲聊：

最近入职新公司，业务面以地理信息为主，二维、三维地图都有所涉及。近期就研究了一下cesium的一点小案例。
这一篇是天际线分析：

效果图：

在这里插入图片描述

场景：

3维地图描绘出天际线效果，效果优于superMap的案例

实现原理：

利用cesium的边缘检测和后期处理效果叠加。即：在地图上检测此视角下的地形边缘，叠加标记效果层，叠加针对边缘实例和前一个标记效果层的标记进行颜色处理和纹理合成

实现代码：

vue：

<template>
  <div class="home">
    <div id="cesiumContainer"></div>
    <el-row type="flex" :gutter="20">
      <el-col :span="24">
        <div class="grid-content bg-purple">
          <el-button type="primary" @click="addSkyLine">绘制线</el-button>
          <el-button type="primary" @click="clearSkyLine">清除</el-button>
          <el-select v-model="curColor"  placeholder="请选择">
            <el-option
              v-for="(item,index) in colorList"
              :key="index"
              :label="item.label"
              :value="item.color">
            </el-option>
          </el-select>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {
   createSkyLine,removeSkyLine} from './model/skyLine'
export default {
   
  name: "draw",
  data() {
   
    return {
   
      _viewer: undefined,
      tempEntities: [],
      pointArr:[],
      paramObj : {
   
            id: "Skyline",
            name: 'czm_skylinetemp',
            //fragmentShader 细绳   uniform着色器对象  
            fragmentShader: 'uniform sampler2D colorTexture;' +
                'uniform sampler2D depthTexture;' +
                'varying vec2 v_textureCoordinates;' +
                'void main(voi