Cesium系列:加载不规则形状出图

简介: Cesium加载不规则形状出图

在Cesium地图系统开发中,后台出图的范围,在经纬度中是一个不规则的polygon,出来的图片形状也不是规则的,要在地图上贴上这张图,图片显示的范围也要契合到实际地图位置。

图片效果:
image.png
查找Cesium的接口,首先想到的是,用其中的polygon,按照经纬的范围,画一个polygon,再将图片做为材质material贴进去,不过代码写上后,发现的贴图在polygon中变形了,也没有贴到相应的地图位置。

经过测试,最后发现可以用Cesium的Rectangle实体对象,通过计算出不规则多边形四至范围的左上角坐标和右下角坐标,再将图片材质贴上去,地图上的位置还对上了。

具体的代码如下:

//添加一个rectangle的实体

 viewer.entities.add({

        name: '不规则贴图',

        rectangle: {

        //设置rectangle的四个坐标范围

        coordinates: Cesium.Rectangle.fromDegrees(-92.0, 30.0, -76.0, 40.0), 

        //设置图片为材质

        material: 'data/wind_500_2018030616_True.png', 

        //图片显示样式类型,有地形,模型或者两者,此效果可以达到贴图是沿

        //地图弧面的

        classificationType : Cesium.ClassificationType.TERRAIN

    }

添加完成后,效果是贴地的,形状是长方形,但是空白地方显示是黑色,要在材质里单独设置一下,把材质属性改成如下:黑色没有了

material: new Cesium.ImageMaterialProperty({

   image:'data/wind_500_2018030616_True.png',

   transparent:true

  })

//顺便设置个高度属性,可以离开地面显示

height:70000

完成后效果图:
image.png

相关文章
|
11月前
|
前端开发 JavaScript 定位技术
threejs绘制风羽
threejs绘制风羽
195 0
cesium添加实体不被地形遮挡的参数设置
disableDepthTestDistance:指定从相机到禁用深度测试的距离,关于深度测试我们将在后面的文章中介绍到,由于深度测试的存在,我们的对象很多时候会被地形挡住,如下:
1795 0
cesium添加实体不被地形遮挡的参数设置
|
定位技术
Threejs实现绘制地球,地理位置标注、经纬度转换世界坐标threejs坐标
Threejs实现绘制地球,地理位置标注、经纬度转换世界坐标threejs坐标
1398 0
Threejs实现绘制地球,地理位置标注、经纬度转换世界坐标threejs坐标
cesium加载魔方立方体
【8月更文挑战第16天】
|
2月前
|
Python
Python制作动态颜色变换:颜色渐变动效
Python制作动态颜色变换:颜色渐变动效
48 0
|
2月前
|
存储 前端开发 JavaScript
canvas系列教程03 —— 线的样式、绘制文本、操作图片(图片的渲染、缩放、裁剪、切割、平铺、特效)、变换元素(平移、缩放、旋转)(一)
canvas系列教程03 —— 线的样式、绘制文本、操作图片(图片的渲染、缩放、裁剪、切割、平铺、特效)、变换元素(平移、缩放、旋转)(一)
143 0
|
2月前
|
机器学习/深度学习 前端开发 算法
canvas系列教程03 —— 线的样式、绘制文本、操作图片(图片的渲染、缩放、裁剪、切割、平铺、特效)、变换元素(平移、缩放、旋转)(二)
canvas系列教程03 —— 线的样式、绘制文本、操作图片(图片的渲染、缩放、裁剪、切割、平铺、特效)、变换元素(平移、缩放、旋转)(二)
31 0
|
4月前
[MFC] 将像素坐标点缩放,准确的画在所在控件的图片上
[MFC] 将像素坐标点缩放,准确的画在所在控件的图片上
76 0
|
前端开发 JavaScript
【Three.js入门】渲染第一个场景及物体(轨道控制器、坐标轴辅助器、移动缩放旋转)
【Three.js入门】渲染第一个场景及物体(轨道控制器、坐标轴辅助器、移动缩放旋转)
279 0
|
定位技术
Threejs使用Shapes实现不规则几何体,自定义绘图
Threejs使用Shapes实现不规则几何体,自定义绘图
951 0
Threejs使用Shapes实现不规则几何体,自定义绘图