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

参考博客：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(void)'</