Cesium 动态绘制点线面(附源码下载)
我写的这个点线面绘制融入了增删改的功能。
其中可以通过手动点击地图进行动态绘制线面,也支持通过给定坐标数组来进行线面的增加。
绘制好的线面,可以点击进行修改;
以上介绍了我的大概的要给操作,下面以面的构建来进行代码解释;
cesium中想动态构建线面,离不开的一个属性就是CallbackProperty。
以下是部分核心代码:
1、构建面核心代码
此处面的postions用了callbackproperty,就可以进行动态绘制了,关于property的讲解可以参阅:https://www.jianshu.com/p/f0b47997224c
createPolygon: function(obj) {
var $this = this;
return this.viewer.entities.add({
polygon: {
hierarchy: new Cesium.CallbackProperty(function() {
return $this.positions
}, false),
clampToGround: obj.clampToGround || true,
show: true,
fill: obj.fill || true,
material: obj.material || Cesium.Color.WHITE,
width: obj.width || 3,
outlineColor: obj.outlineColor || Cesium.Color.BLACK,
outlineWidth: obj.outlineWidth || 1,
outline: false || obj.outline
}
});
},
2、操作逻辑核心代码
大致解释以下操作逻辑:
首先是绑定了鼠标左击,当鼠标在地图上点击时,会保存点击的坐标,用于构建面。鼠标移动时,会动态显示面;
鼠标右击时结束操作;
更多详情见下面链接文章:
文章提供源码,对本专栏感兴趣的话,可以关注一波
Cesium 动态绘制点线面(附源码下载)的更多相关文章
- Cesium专栏-雷达遮罩动态扫描(附源码下载)
Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精度,渲染质量以 ...
- cesium 圆圈警戒扫描(附源码下载)
前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...
- Cesium专栏-热力图(附源码下载)
Cesium Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精 ...
- Cesium专栏-视频投影(附源码下载)
Cesium Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精 ...
- cesium 实现风场图效果(附源码下载)
前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...
- Cesium专栏-填挖方分析(附源码下载)
Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精度,渲染质量以 ...
- cesium结合geoserver利用WFS服务实现图层编辑(附源码下载)
前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...
- Cesium专栏-地形开挖2-任意多边形开挖(附源码下载)
“任意多边形地形开挖” 是“地形开挖”的补充篇,在这节里,我们介绍关于如何使用任意多边形对地形进行开挖,同时,由于有不少小伙伴也咨询了关于“地形开挖”篇后序内容中的填充地形的效果,之前没放出来,是想让 ...
- cesium 雷达扫描(附源码下载)
前言 cesium 官网的api文档介绍地址cesium官网api,里面详细的介绍 cesium 各个类的介绍,还有就是在线例子:cesium 官网在线例子,这个也是学习 cesium 的好素材. 内 ...
随机推荐
- 详细nginx配置SSL
1.nginx的ssl 让nginx实现用https来访问网站,http是80端口,https是443端口. https其实就是一种加密的http 2.为什么要加密 例子:在网上银行汇款,在你汇款的过 ...
- windows下利用iis建立网站网站并实现局域共享
博客园 首页 新随笔 联系 管理 订阅 随笔- 54 文章- 9 评论- 0 Windows下利用IIS建立网站并实现局域网共享 https://blog.csdn.net/qq_4148541 ...
- docker tomcat镜像部署springbootwar包
springboot打war包 1.在pom文件中增加插件 <build> <finalName>xx</finalName> <plugins> &l ...
- 入门级实操教程!从概念到部署,全方位了解K8S Ingress!
Kubernetes Ingress用于添加规则,以将流量从外部路由到Kubernetes集群的服务中.在本文中你将了解ingress 的概念,以及用于路由外部流量到Kubernetes deploy ...
- 小程序 - 简单实现mixin功能
前言 在业务中有没有一个场景:多个页面需要用到一样的 data 和 method,或者生命周期都需要执行同样的操作.我们在每个页面都写上重复的代码,一但功能修改就要更新多个页面,在后期维护起来会很麻烦 ...
- 基于CC1606 FPGA评估板移植iCamera程序小结
iCamera作为柴草电子经典的摄像头开发工具,其强大的摄像头调试功能,深受广大网友喜爱,支持市面上各种摄像头. 目前现有的应用板卡支持:CC1601(CP601A). CC1602(CP601B) ...
- Spring MVC文件上传出现错误:Required MultipartFile parameter 'file' is not present
1.配置文件上传的解析器 首先需要在spring mvc的配置文件中(注意是spring mvc的配置文件而不是spring的配置文件:applicationContext.xml)配置: sprin ...
- 使用笛卡尔积生成sku
/// <summary> /// 生成SKU价格表 /// </summary> /// <param name="model"></p ...
- Vue-兄弟组件传值
学习博客:https://www.jianshu.com/p/b10b3ac3729a
- java项目测试环境搭建
java项目测试环境搭建 2019-03-06 13:45:26 木瓜小少年 阅读数 691更多 分类专栏: 测试 版权声明:本文为博主原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原 ...