GEOJSON 的渲染实例
createGeojson:function(arr)
{
let geoArr=[];
for(let i=0;i<arr.length;i++)
{
let obj={
"type": "Feature",
"properties": {"value": -999},
"geometry": {
"type": "Polygon",
"coordinates": null}
}
if(arr[i].value==0)
{
arr[i].value=-999;
}
obj.properties={"value": arr[i].value};
obj.geometry.coordinates=this.getGeometry(arr[i].lon,arr[i].lat);
geoArr.push(obj);
}
console.log(geoArr) if (this.flexpartlayer)
{
if (this.map.hasLayer(this.flexpartlayer))
{
this.map.removeLayer(this.flexpartlayer);
}
}
this.flexpartlayer = L.geoJson(geoArr, {style: this.style});
this.map.addLayer(this.flexpartlayer); // this.timer = setTimeout(function(){
// _self.clearFlexLayer();
// },10000)
},
clearFlexLayer:function()
{
if (this.flexpartlayer)
{
if (this.map.hasLayer(this.flexpartlayer))
{
this.map.removeLayer(this.flexpartlayer);
}
}
_self.flexTxt="";
},
//生成格点polygon
getGeometry:function(lon,lat){
//数据精度是0.003,300米
let minx=lon-0.0015;
let miny=lat-0.0015;
let maxx=lon+0.0015;
let maxy=lat+0.0015;
return [[
[minx, miny],
[maxx, miny],
[maxx, maxy],
[minx, maxy],
[minx, miny]
]]; },
//polygon的样式
style:function(feature)
{
let alpha=feature.properties.value===-999?0:0.8; return {
weight: 1,
opacity: 0,
color: '#fff',
fillOpacity: alpha,
fillColor: this.getColor(feature.properties.value)}
},
//polygon填充的颜色
getColor:function(d) {
return d > Math.pow(10,-9) ? '#C5004A' :
d > Math.pow(10,-10) ? '#DC4A1C' :
d > Math.pow(10,-11) ? '#FEBA00' :
d > Math.pow(10,-12) ? '#FFFF00' :
d > Math.pow(10,-13) ? '#00EA00' :
d > Math.pow(10,-14) ? '#0CEFA6' :
d > Math.pow(10,-15) ? '#25C7CD' :
'#259ECD';
},
GEOJSON 的渲染实例的更多相关文章
- handsontable 渲染实例
单元格选择完成后将触发事件afterSelectionEnd, 然后在js中: hot.addHook('afterSelectionEnd', function(r, c, r2, c2){ // ...
- OpenGL学习日记-2015.3.13——多实例渲染
实例化(instancing)或者多实例渲染(instancd rendering)是一种连续运行多条同样渲染命令的方法.而且每一个命令的所产生的渲染结果都会有轻微的差异. 是一种很有效的.有 ...
- Linux OpenGL 实践篇-14-多实例渲染
多实例渲染 OpenGL的多实例渲染是一种连续执行多条相同的渲染命令的方法,并且每条命令产生的结果都有轻微的差异,通常用于渲染大量的几何物体. 设想一个场景,比如太空,我们需要渲染数以万记的星球,如果 ...
- 70部MAYA灯光材质渲染教程合集
MAYA灯光材质渲染教程合集 教程格式:MP4和flv 两种格式 使用版本:教程不是一年出的教程,各个版本都有 (教程软件为英文版) 清晰度:可以看清软件上的文字 语言:部分中文字幕,其他英文(通过看 ...
- vue 学前班002(创建一个实例)
创建一个Vue实例 我们之前说过,Vue是数据驱动视图的,只要model(模型层)的数据改变了,Vue就会帮我们改变视图上显示的内容,不用我们自己去动手写代码更新.那么,它是怎么做到的,我们的代码要怎 ...
- World Wind Java开发之十——AnalyticSurface栅格渲染(转)
http://blog.csdn.net/giser_whu/article/details/43017881 1.AnalyticSurfaceDemo ArcGIS下对栅格的各种分级渲染效果是非常 ...
- Directx11教程(52) 实例(instancing)的简单应用
原文:Directx11教程(52) 实例(instancing)的简单应用 有些时候,我们需要在场景中渲染大量的重复的物体,比如体育场中的观众,森林里面的树木等等,这些物体具有相似的形状,比如很多树 ...
- 11个很棒的 jQuery 图表库
如果你曾经使用过任何类型的数据,你应该知道阅读一排排数据的痛苦.通过所有这些数据弄清楚他们的意思是非常不容易的.可视化对于解决这个问题起到了重要的作用.可视化降低了数据阅读的难度,帮助决策者获得可操作 ...
- 微信小程序入门(三)
11.开发框架基本介绍 四个组成部分,其它三个前面介绍过了,主要WXS: WXS:对wxml增强的一种脚本语言,可以对请求的数据进行filter或者做计算处理,帮助wxml快速构建出页面结构. 12. ...
- WPF调用zxing生成二维码
1.登录http://zxingnet.codeplex.com/,下载对应.net版本的zxing库 2.引入zxing.dll 3.新建界面控件 using System; using Syste ...
随机推荐
- 基于IDEA javaweb项目目录结构
https://www.pianshen.com/article/62631355687/
- 03-【HAL库】STM32实现SYN6288模块语音播报.md
一.什么是SYN6288模块 1.概述 SYN6288 中文语音合成芯片是北京宇音天下科技有限公司于2010 年初推出的一款性/价比更高,效果更自然的一款中高端语音合成芯片.SYN6288 通过异 ...
- Supervisor 安装与使用
一.Supervisor 介绍 Supervisor 是一个用 Python 编写的进程管理工具,它可以用于监控和控制类 UNIX 操作系统上的多个进程.它是一个客户端/服务器系统,其中 Superv ...
- #树状数组,线段树,离散#JZOJ 3854 分组
题目 Bsny所在的精灵社区有\(n\)个居民,每个居民有一定的地位和年龄,\(r_i\)表示第\(i\)个人的地位,\(a_i\)表示第\(i\)个人的年龄. 最近社区里要举行活动,要求几个人分成一 ...
- Git 版本控制系统的完整指南
什么是 Git? Git 是一个流行的版本控制系统.它是由 Linus Torvalds 于 2005 年创建的,自那时以来由 Junio Hamano 维护. 它用于: 跟踪代码更改 跟踪谁做出了更 ...
- linux上操作 压缩包 的命令
# tar.gz 解压缩 # 解压 tar -zxvf a.tar.gz # 压缩 tar -zcvf a.atr.gz a # zip 解压缩 # 压缩 zip -vr a.zip a/* # 解压 ...
- 家庭实验室系列文章-电脑如何配置网络唤醒 (WOL)?
前言 其实这个专题很久很久之前就想写了,但是一直因为各种原因拖着没动笔. 因为没有资格,也没有钱在一线城市买房 (); 但是在要结婚之前,婚房又是刚需. 我和太太最终一起在一线城市周边的某二线城市买了 ...
- 冒泡排序的基本实现【数据结构与算法—TypeScript 实现】
笔记整理自 coderwhy 『TypeScript 高阶数据结构与算法』课程 概念 本质:相邻元素两两比较并交换位置,使整个序列按照特定的顺序排列 特性 复杂度分析 时间复杂度: 最好情况:O(n) ...
- 说说你对Node.js 的理解?优缺点?应用场景?
一.是什么 Node.js 是一个开源与跨平台的 JavaScript 运行时环境 在浏览器外运行 V8 JavaScript 引擎(Google Chrome 的内核),利用事件驱动.非阻塞和异步输 ...
- vue3.0体验版生命周期
使用方法:cnpm install --save @vue/composition-api在组件内引入 把上图的 onMounted 换成(2.6->3.0) beforeCreate-> ...