此爱如少年
此爱如少年

openlayers中巧用canvas滤镜，自由切换你的地图风格

前言

高德地图、百度地图等等图商现在都提供一些自定义地图风格，用户可以自己设计地图样式，这样使得地图使用灵活了很多。
百度地图个性化编辑平台
openlayers中巧用canvas滤镜，自由切换你的地图风格_第1张图片

高德地图自定义地图

从openlayers3开始，其底层渲染从SVG切换到了canvas，据说渲染效率提高了不少。在canvas上，我们可以实现很多比较炫酷的可视化操作，如之前的空气质量态势图、动态风场等等。今天，来分享一个好玩的，通常CSS3滤镜，改变地图风格。

1、原理

1、通过地图的渲染事件，获取到canvas上下文context；
2、设置context的filter属性。
3、重新渲染图层。

  map.on('precompose', function(evt){
      var ctx = evt.context;
      ctx.filter = filter;//设置滤镜值
  })
  map.render();

filter值类型为字符串，默认值为"none"；
precompose事件会在地图渲染前发生，因此在渲染前，改变filter值，即可让地图按设置的滤镜进行渲染。

关于滤镜的属性，可以参考菜鸟教程中的《CSS3 filter(滤镜)》
也可以参考MDN web docs中的《CanvasRenderingContext2D.filter》

2、示例

我们看上一幅原图：
openlayers中巧用canvas滤镜，自由切换你的地图风格_第2张图片

1）灰度滤镜： 设置filter值为 grayscale(100%)

openlayers中巧用canvas滤镜，自由切换你的地图风格_第3张图片

2）褐色： 设置filter值为 sepia（100%）

openlayers中巧用canvas滤镜，自由切换你的地图风格_第4张图片

3、复合滤镜

可以使用多个滤镜，值之间用空格隔开，如：contrast(150%) saturate(200%)
openlayers中巧用canvas滤镜，自由切换你的地图风格_第5张图片

利用复合滤镜，我们可以更灵活的变换地图风格，是不是挺好玩，大家可以下来试试。

3、完整代码

js代码


var app = {
    baseLayer: undefined,
    map: undefined,
    filter: 'none',
    key: undefined,
    init: function(){
        this.baseLayer = new ol.layer.Tile({
            source: new ol.source.XYZ({
                url: 'https://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
            })
        });

        this.map = new ol.Map({
            target: 'map',
            view: new ol.View({
                projection: 'EPSG:4326',
                center: [118, 36],
                zoom: 7
            }),
            layers: [this.baseLayer]
        });

        this.map.on('precompose', function(evt){
            let ctx = evt.context;
            ctx.filter = this.filter;
        }.bind(this))
    }
}

app.init();


function fs(type){
    switch (type) {
        //反色
        case 'invert':
            type = 'invert' + '(100%)'
            break;
        //褐色
        case 'sepia':
                type = 'sepia' + '(100%)'
                break;
        //灰度
        case 'grayscale':
            type = 'grayscale' + '(100%)'
            break;
        //复合
        case 'complex':
                type = 'contrast(150%) saturate(200%)'
                break;
        //默认
        default:
            type = 'none';
            break;
    }
    app.filter = type;
    app.map.render();
}

html代码


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.5/css/ol.css" type="text/css">
    <title>滤镜title>
    <script src="https://openlayers.org/en/v4.6.5/build/ol.js">script>
    <style>
        head,body, #map{
            height: 100%;
            width: 100%;
            margin: 0%;
            padding: 0%;
        }
        .ol-attribution{
            display: none;
        }
        .ol-zoom{
            display: none;
        }
        .input-group-btn{
            top: 2%;
            left: 1%;
            z-index: 1;
            position: absolute;
        }
    style>
head>
<body>
    <div id="app">
        <div id="map">div>        
        <div class="input-group-btn">
            <button type="button" class="btn btn-default" onclick="fs('invert')">反色button>
            <button type="button" class="btn btn-default" onclick="fs('sepia')">褐色button>
            <button type="button" class="btn btn-default" onclick="fs('grayscale')">灰度button>
            <button type="button" class="btn btn-default" onclick="fs('complex')">复合滤镜button>
            <button type="button" class="btn btn-default" onclick="fs('none')">原色button>
        div>
    div>
    <script src="./app.js">script>
body>
html>

4、precompose事件

需要说明的是，precompose事件不仅仅只有map对象有，ol.layer.vector对象也具备这个事件，因此如果需要对图层进行滤镜操作，可以试试在layer的precompose事件中进行。
另外，也可以利用渲染事件中的上下文，实现图层的阴影效果。有兴趣尝试一下吧！

你可能感兴趣的:(Openlayers4笔记)

  • YOLOv10-1.1部分代码阅读笔记-model.py 红色的山茶花 YOLO笔记深度学习
    model.pyultralytics\engine\model.py目录model.py1.所需的库和模块2.classModel(nn.Module):1.所需的库和模块#UltralyticsYOLO,AGPL-3.0licenseimportinspectimportsysfrompathlibimportPathfromtypingimportUnionimportnumpyasnpim
  • C++ 多态 初学笔记 NicOym C++c++
    多态虚函数虚函数的使用条件虚函数详解对象多态多重继承时，类型转换的练习（1）情况1：（2）情况2：（3）情况3：（4）情况4：对象多态动态强制转换dynamic_casttypeid抽象类类的成员函数的函数指针概念：允许使用统一的接口来操作不同类型的对象。多态的作用：减少重复代码，提高代码扩展性静态多态：函数重载函数模板动态多态继承虚函数虚函数：动态绑定静态绑定个人记法（可能有误）：动态绑定是调用
  • kafka 学习笔记3-传统部署Kraft模式集群——筑梦之路 筑梦之路 kafka学习笔记
    部署kafka集群规划一般模式下，元数据在zookeeper中，运行时动态选举controller，由controller进行Kafka集群管理。kraft模式架构下，不再依赖zookeeper集群，而是用三台controller节点代替zookeeper，元数据保存在controller中，由controller直接进行Kafka集群管理。ip主机名角色nodeid192.168.100.131
  • 《CPython Internals》阅读笔记：p177-p220 codists 读书笔记python
    《CPythonInternals》学习第11天，p177-p220总结，总计44页。一、技术总结1.memoryallocationinC(1)staticmemeoryallocationMemoryrequirementsarecalculatedatcompiletimeandallocatedbytheexecutablewhenitstarts.(2)automaticmemeorya
  • 《CPython Internals》阅读笔记：p250-p284 python
    《CPythonInternals》学习第14天，250-p284总结，总计25页。一、技术总结介于我觉得作者写得乱七八糟的，读完我已经不想说话了，所以今日无技术总结。二、英语总结(生词：2)1.spawn(1)spawn:来自于词根expandere。(2)expandere:ex-("out")+pandere("tospread")spawn原来的意思是“spreadingoutoffish
  • 免费下载：汽车SoC学习笔记（含安全岛） 不懂汽车的胖子 汽车学习笔记
    文末附下载方法目录1SoC是什么...31.1SoC历史发展...31.2SoC定义...41.3SoC的特征...61.4SoC的优点...61.5SoC的缺点...72SoC需求来源...73SoC架构...83.1SoC架构...83.2SoC芯片分类...93.2.1模拟SoC(AnalogSoC)：...93.2.2数字SoC(DigitalSoC)：...93.2.3混合SoC(Mix
  • 【C++算法笔记】最基础篇------高精度算法 孙小健的资料站 算法学习笔记c++算法笔记
    个人笔记：只提供学习代码和其步骤思路，仅供参考学习，已提前在相关编译器中提前运行并保证代码运行。为什么要用高精度算法：longlong的存储大小为9*10^19,即超过20位的数字将无法使用基本数据类型存储和计算，所以我们要使用其他方法存储设计。涉及基础知识：基本输入输出，字符串及数组的基本运用基础步骤：1.对字符串s1,s2进行承接2.将a1与a2相加的和存入a33.从左向右进位并出现逆序#in
  • 【自用】Verilog笔记 QCCX_bY 笔记
    一、语法1、模块moduletest(A,B,C,D,F1,F2);//test为模块名inputA,B,C,D;//输入端口，默认为wire类型信号，一般都是wireoutputF1,F2;//输出端口，默认wirewireF1;//连线reg[2:0]F2;//3bit寄存器endmodulemoduletop_module(inputa,inputb,outputout);//模块实例化语法
  • 学习笔记：UART（二） weixin_58038206 学习笔记
    设计一包数据可以参考这样设计intfputc(intch,FILE*f){usart_data_transmit(g_uartHwInfo.uartNo,(uint8_t)ch);while(RESET==usart_flag_get(g_uartHwInfo.uartNo,USART_FLAG_TBE));returnch;}这是重定向，然后就可以使用printf打印调试。voidUSART0_
  • 网络安全笔记-信息安全工程师与网络安全工程师考试大纲（附：Web安全大纲）_信息网络安全师认证(inspc)培训工作大纲 程序员鬼鬼 web安全笔记网络计算机网络安全学习linux
    Web安全大纲2024信息安全工程师考试大纲1、考试目标通过本考试的合格人员能够掌握网络信息安全的基础知识和技术原理；根据国家网络信息安全相关法律法规及业务安全保障要求，能够规划、设计信息系统安全方案，能够配置和维护常见的网络安全设备及系统；能够对信息系统的网络安全风险进行监测和分析，并给出网络安全风险问题的整改建议；能够协助相关部门对单位的信息系统进行网络安全审计和网络安全事件调查；能够对网络信
  • 【黑马-SpringCloudAlibaba】学习笔记10-Seata：实现分布式事务控制 言谶 分布式学习java
    Seata介绍2019年1月，阿里巴巴中间件团队发起了开源项目Fescar（Fast&EaSyCommitAndRollback），其愿景是让分布式事务的使用像本地事务的使用一样，简单和高效，并逐步解决开发者们遇到的分布式事务方面的所有难题。后来更名为Seata，意为：SimpleExtensibleAutonomousTransactionArchitecture，是一套分布式事务解决方案。Se
  • 黑马商城 Spring Cloud 微服务课程笔记：分布式事务 - Seata 的架构和原理 阿贾克斯的黎明 java架构springcloud微服务
    目录黑马商城SpringCloud微服务课程笔记：分布式事务-Seata的架构和原理一、Seata解决的问题场景二、Seata的架构三、Seata的原理在黑马商城的微服务架构中，当涉及到多个微服务协同完成一个业务操作时，分布式事务的处理变得至关重要。其中，Seata是一个开源的分布式事务解决方案，用于解决微服务架构中的分布式事务问题。一、Seata解决的问题场景在黑马商城中，例如用户下单购买商品这
  • 黑马商城 Spring Cloud 微服务课程笔记 - 分布式事务 Seata（DAY2 - 10） 阿贾克斯的黎明 javaspringcloud微服务笔记
    目录黑马商城SpringCloud微服务课程笔记-分布式事务Seata（DAY2-10）一、课程内容概述二、原理三、知识点和步骤（一）知识点（二）步骤一、课程内容概述在黑马商城的SpringCloud微服务架构中，DAY2-10主要聚焦于分布式事务的解决方案——Seata。当微服务之间进行协作时，例如在一个业务流程涉及多个微服务的操作时，如何保证这些操作要么全部成功，要么全部失败，以确保数据的一致
  • 学习python的第一天 简讯Alfred 和我一起零基础学Pythonpython编程
    作为财经院校的大三学生，面临各种考试，在编程方面完全零基础还想学习Python，担心枯燥的内容难以坚持下来，希望通过更博的方式督促自己学习，有空就更新博客。很多大牛通过更新自己的网站或更新博文的方式传播技能知识，我很是倾佩！第一次用这种方式学习一门知识，对于自己来说既是一种全新的体验，也可以作为学习笔记，日后也有足迹。学习资料暂定为《笨办法学Python》。如果有新手看到此文章，还希望只当参考中的
  • 【STM32-学习笔记-11-】RTC实时时钟 隼玉 【STM32学习笔记】stm32学习笔记c语言
    文章目录RTC实时时钟一、RTC简介二、RTC框图三、RTC基本结构四、RTC操作注意事项五、RTC函数六、配置RTCMyRTC.c七、示例：实时时钟①、main.c②、MyRTC.c③、MyRTC.hRTC实时时钟一、RTC简介RTC（RealTimeClock）实时时钟RTC是一个独立的定时器，可为系统提供时钟和日历的功能RTC和时钟配置系统处于后备区域，系统复位时数据不清零，VDD（2.0~
  • YOLOv10-1.1部分代码阅读笔记-loaders.py 红色的山茶花 YOLO笔记深度学习
    loaders.pyultralytics\data\loaders.py目录loaders.py1.所需的库和模块2.classSourceTypes:3.classLoadStreams:4.classLoadScreenshots:5.classLoadImagesAndVideos:6.classLoadPilAndNumpy:7.classLoadTensor:8.defautocast
  • 【LeetCode 刷题】字符串-反转字符串 Bran_Liu LeetCodeleetcode算法
    此博客为《代码随想录》字符串章节的学习笔记，主要内容为反转字符串相关的题目解析。文章目录344.反转字符串541.反转字符串II151.反转字符串中的单词344.反转字符串题目链接classSolution:defreverseString(self,s:List[str])->None:"""Donotreturnanything,modifysin-placeinstead."""left,r
  • 松散比较（PHP）（小迪网络安全笔记~ 1999er 网络安全学习笔记phpweb安全笔记网络安全安全
    免责声明：本文章仅用于交流学习，因文章内容而产生的任何违法&未授权行为，与文章作者无关！！！附：完整笔记目录~ps：本人小白，笔记均在个人理解基础上整理，若有错误欢迎指正！1.3松散比较（PHP）引子：本章主要介绍一些由PHP自身语言特性可能产生的脆弱性，该内容往往被应用于PHPCTF入门题中，但在PHPWeb开发时也可能被使用。====是php中的比较运算符，用于判断==左右两边的值是否相等。若
  • 100条Linux命令汇总 Xudde. 笔记笔记linux学习运维
    本文章为个人成长笔记之一，感谢您的阅览。内容简介文件和目录操作命令(14个)查看文件及内容处理命令(14个)文件压缩及解压缩命令(4个)信息显示命令(11个)用户管理命令(10个)基础网络操作命令(12个)进程管理相关命令(15个)其他常用命令(10个)文件和目录操作命令(14个)ls：列出目录的内容及其内容属性信息。cd：从当前工作目录切换到指定工作目录。cp：复制文件或目录。find：用于查找
  • 鸿蒙系统是怎样一种系统,鸿蒙系统pc版怎么安装 鸿蒙系统pc版安装教程 焦虑中 鸿蒙系统是怎样一种系统
    鸿蒙系统pc版安装教程1.插入U盘，打开U盘制作软件rufus3.1。2.插入设备选项，选中下载的华为鸿蒙系统镜像文件，其他默认，点击开始。3.链接下载点击是，勾选以ISO镜像模式写入4.点击OK，等待U盘启动制作并写入华为鸿蒙系统完成5.把制作好的U盘插入电脑，开机启动按F12，选择U盘启动，台式机一般为：Delete键笔记本一般为：F2键惠普笔记本一般为：F10键联想笔记本一般为：F12键苹果
  • 电磁兼容学习笔记12-电子设备中的主要骚扰源 胡你一脸团团团 学习笔记单片机
    跟杨老师学习电磁兼容电子设备中的主要骚扰源#第16课典型的骚扰源（找du/dt、di/dt比较大的电路）：骚扰源1：二次电源（几乎所有的电路都需要DC/DC），传导骚扰骚扰源2：数字电路，传导骚扰和辐射骚扰DC/DC模块骚扰产生原理：du/dt：开关导通时，直流电压直接传送到输出端；开关断开时，电流无法传送到输出端，依靠输出端电容进行供电。开关导通时，输出电压为0；断开时电容放电，开关上电压为输入
  • 如何学懂C++语言：C++从入门到精通的全面指南（完整C++学习笔记） 猿享天开 c++学习笔记
    数字人助手猿小美带你一起学编程一、引言作为一名拥有多年开发经验的技术人员，我的职业生涯涵盖了多种编程语言，包括C语言、C++、C#和JavaScript等。在我多年的编程生涯中，这些语言不仅丰富了我的知识储备，还极大地拓展了我的视野和技能。出于对编程的热爱，以及希望帮助更多编程爱好者的目的，我决定利用业余时间整理一套全面的C++语言学习指南。这套指南旨在为C++语言编程爱好者提供一个清晰的学习路线
  • 21天学通C++——11多态（引入多态的目的） 不想睡觉_ QT客户端学习路线c++开发语言
    多态：利用不同类似的方法处理不同类似的对象笔记原因：既然继承可以进行基类的方法覆盖，为什么还要引入多态呢？解释原因：继承classBase{public:voidfunc(){std::coutfunc();return0;}结果为Base：：func（）引入多态（Virtual）classBase{public:virtualvoidfunc(){std::coutfunc();return0;
  • 蓝桥杯备赛笔记（九）动态规划（一） 小魏´•ﻌ•` 蓝桥杯C++蓝桥杯笔记动态规划
    1.动态规划基础(1)线性DP1）什么是DP（动态规划）DP（动态规划）全称DynamicProgramming，是运筹学的一个分支，是一种将复杂问题分解成很多重叠的子问题，并通过子问题的解得到整个问题的解的算法。在动态规划中有一些概念：状态：就是形如dp[i][j]=val的取值，其中i，j为下标，也是用于描述、确定状态所需的变量，val为状态值。状态转移：状态与状态之间的转移关系，一般可以表示
  • 软件工程——第9章面向对象方法学引论知识点整理 顾老师不懂代码 软件工程导论第6版软件工程面向对象方法学引论对象模型动态模型功能模型
    本专栏是博主个人笔记，主要目的是利用碎片化的时间来记忆软工知识点，特此声明！文章目录1.当前最好的软件开发技术是？2.面向对象的原则是什么？3.人们把客观世界中的实体抽象为什么？4.软件系统本质上是？5.面向对象方法学的优点？6.对象的定义是什么？7.对象的特点有哪些？8.类的定义是什么？9.实例是什么？10.属性是什么？11.封装是什么？12.继承是什么？13.重载和重写的区别有哪些？14.使用
  • 《CPython Internals》阅读笔记：p232-p249 python
    《CPythonInternals》学习第13天，p232-p249总结，总计18页。一、技术总结无。二、英语总结(生词：1)1.overhead(1)overhead:over-("above")+head(“toppart,uppermostsection”)overhead的字面意思是：abovethehead,后来演变成"representthingssituatedaboveormeta
  • 蓝桥杯备赛笔记（七）排序 小魏´•ﻌ•` 蓝桥杯C++蓝桥杯笔记算法
    1.冒泡排序(1)冒泡排序的思想冒泡排序的思想是每次将最大的一下一下运动到最右边，然后将最右边这个确定下来。再来确定第二个大的，再确定第三个大的...对于数组a[]，具体的来说，每次确定操作就是从左往右扫描，如果a[i]>a[i+1]，我们就执行swap(a[i],a[i+1])将两项交换，然后再往右检查，这样可以找出最大的并将其丢到最右边。第一次确定操作是将a[i]~a[n]中最大的放到a[n]
  • python传参是什么意思_如何最简单、通俗地理解Python的传入参数？ weixin_39857876 python传参是什么意思
    目录：一、笔记二、我的自学路线三、笔记目录一、笔记①传入参数分为形参和实参两种，形参是形式参数(变量)，实参是实际参数(值)。②传入参数，一个星号*表示传入一个元组，两个星号表示传入一个字典。③加了星号*的变量会存放所有未命名的变量参数。④加了星号**的变量会存放所有命名的变量参数。⑤*号的使用使得传入的参数不定长。⑥传入参数中，默认值参数都是放在后面。#coding=utf-8#形参是定义函数后
  • 提升效率的印象笔记（Evernote）使用指南 vvvae1234 印象笔记
    印象笔记（Evernote）是一个功能强大、跨平台的笔记管理工具，它不仅能帮助你记录日常笔记，还可以用于整理工作计划、管理项目、存储灵感和信息等。为了最大化地提高你的生产力，以下将介绍一些高效使用印象笔记的技巧，帮助你充分发挥其潜力。一、入门基础：理解印象笔记的基本概念1.1笔记本与笔记印象笔记的核心概念是笔记本和笔记。笔记是你存储信息的基本单位，它可以包含文字、图片、音频、视频、文件等内容。而笔
  • 三星笔记备份指南【常见问题+介绍3种方法】 Coolmuster 三星手机安卓笔记android
    SamsungNotes是众多可用应用程序之一，但它对于记笔记、画草图和掌握重要信息特别有用。但如何保护这些笔记的问题经常出现。我们将在这个内容丰富的教程中回答有关SamsungNotes的一些常见问题，并提供高效备份的分步说明。阅读以了解它们！第1部分：有关SamsungNotes问题的简要解答为了提供全面知识的基础，让我们在详细了解SamsungNotes备份之前先解决这些基本问题：Q1.三星
  • Java实现的基于模板的网页结构化信息精准抽取组件：HtmlExtractor yangshangchuan 信息抽取HtmlExtractor精准抽取信息采集
    HtmlExtractor是一个Java实现的基于模板的网页结构化信息精准抽取组件，本身并不包含爬虫功能，但可被爬虫或其他程序调用以便更精准地对网页结构化信息进行抽取。   HtmlExtractor是为大规模分布式环境设计的，采用主从架构，主节点负责维护抽取规则，从节点向主节点请求抽取规则，当抽取规则发生变化，主节点主动通知从节点，从而能实现抽取规则变化之后的实时动态生效。 如
  • java编程思想 -- 多态 百合不是茶 java多态详解
    一: 向上转型和向下转型 面向对象中的转型只会发生在有继承关系的子类和父类中（接口的实现也包括在这里）。父类：人    子类：男人向上转型： Person p = new Man() ; //向上转型不需要强制类型转化向下转型： Man man =
  • [自动数据处理]稳扎稳打,逐步形成自有ADP系统体系 comsci dp
          对于国内的IT行业来讲,虽然我们已经有了"两弹一星",在局部领域形成了自己独有的技术特征,并初步摆脱了国外的控制...但是前面的路还很长....       首先是我们的自动数据处理系统还无法处理很多高级工程...中等规模的拓扑分析系统也没有完成,更加复杂的
  • storm 自定义 日志文件 商人shang stormclusterlogback
    Storm中的日志级级别默认为INFO，并且，日志文件是根据worker号来进行区分的，这样，同一个log文件中的信息不一定是一个业务的，这样就会有以下两个需求出现： 1. 想要进行一些调试信息的输出 2. 调试信息或者业务日志信息想要输出到一些固定的文件中   不要怕，不要烦恼，其实Storm已经提供了这样的支持，可以通过自定义logback 下的 cluster.xml 来输
  • Extjs3 SpringMVC使用 @RequestBody 标签问题记录 21jhf
    springMVC使用 @RequestBody(required = false) UserVO userInfo 传递json对象数据，往往会出现http 415，400,500等错误，总结一下需要使用ajax提交json数据才行，ajax提交使用proxy，参数为jsonData，不能为params；另外，需要设置Content-type属性为json，代码如下： （由于使用了父类aaa
  • 一些排错方法 文强chu 方法
    1、java.lang.IllegalStateException: Class invariant violation at org.apache.log4j.LogManager.getLoggerRepository(LogManager.java:199)at org.apache.log4j.LogManager.getLogger(LogManager.java:228) at o
  • Swing中文件恢复我觉得很难 小桔子 swing
           我那个草了！老大怎么回事，怎么做项目评估的？只会说相信你可以做的，试一下，有的是时间！        用java开发一个图文处理工具，类似word，任意位置插入、拖动、删除图片以及文本等。文本框、流程图等，数据保存数据库，其余可保存pdf格式。ok,姐姐千辛万苦，
  • php 文件操作 aichenglong PHP读取文件写入文件
    1 写入文件 @$fp=fopen("$DOCUMENT_ROOT/order.txt", "ab"); if(!$fp){ echo "open file error" ; exit; } $outputstring="date:"." \t tire:".$tire."
  • MySQL的btree索引和hash索引的区别 AILIKES 数据结构mysql算法
    Hash 索引结构的特殊性，其 检索效率非常高，索引的检索可以一次定位，不像B-Tree 索引需要从根节点到枝节点，最后才能访问到页节点这样多次的IO访问，所以 Hash 索引的查询效率要远高于 B-Tree 索引。     可能很多人又有疑问了，既然 Hash 索引的效率要比 B-Tree 高很多，为什么大家不都用 Hash 索引而还要使用 B-Tree 索引呢
  • JAVA的抽象--- 接口 --实现 百合不是茶
    抽象 接口 实现接口   //抽象 类 ,方法   //定义一个公共抽象的类 ,并在类中定义一个抽象的方法体 抽象的定义使用abstract   abstract class A 定义一个抽象类 例如： //定义一个基类 public abstract class A{     //抽象类不能用来实例化，只能用来继承 //
  • JS变量作用域实例 bijian1013 作用域
    <script> var scope='hello'; function a(){ console.log(scope); //undefined var scope='world'; console.log(scope); //world console.log(b);
  • TDD实践（二） bijian1013 javaTDD
    实践题目：分解质因数 Step1： 单元测试： package com.bijian.study.factor.test; import java.util.Arrays; import junit.framework.Assert; import org.junit.Before; import org.junit.Test; import com.bijian.
  • [MongoDB学习笔记一]MongoDB主从复制 bit1129 mongodb
    MongoDB称为分布式数据库，主要原因是1.基于副本集的数据备份， 2.基于切片的数据扩容。副本集解决数据的读写性能问题，切片解决了MongoDB的数据扩容问题。   事实上，MongoDB提供了主从复制和副本复制两种备份方式，在MongoDB的主从复制和副本复制集群环境中，只有一台作为主服务器，另外一台或者多台服务器作为从服务器。 本文介绍MongoDB的主从复制模式，需要指明
  • 【HBase五】Java API操作HBase bit1129 hbase
    import java.io.IOException; import org.apache.hadoop.conf.Configuration; import org.apache.hadoop.hbase.HBaseConfiguration; import org.apache.hadoop.hbase.HColumnDescriptor; import org.apache.ha
  • python调用zabbix api接口实时展示数据 ronin47
    zabbix api接口来进行展示。经过思考之后，计划获取如下内容：     1、  获得认证密钥     2、  获取zabbix所有的主机组     3、  获取单个组下的所有主机     4、  获取某个主机下的所有监控项  
  • jsp取得绝对路径 byalias 绝对路径
    在JavaWeb开发中，常使用绝对路径的方式来引入JavaScript和CSS文件，这样可以避免因为目录变动导致引入文件找不到的情况，常用的做法如下： 一、使用${pageContext.request.contextPath} 　　代码” ${pageContext.request.contextPath}”的作用是取出部署的应用程序名，这样不管如何部署，所用路径都是正确的。
  • Java定时任务调度：用ExecutorService取代Timer bylijinnan java
    《Java并发编程实战》一书提到的用ExecutorService取代Java Timer有几个理由，我认为其中最重要的理由是： 如果TimerTask抛出未检查的异常，Timer将会产生无法预料的行为。Timer线程并不捕获异常，所以 TimerTask抛出的未检查的异常会终止timer线程。这种情况下，Timer也不会再重新恢复线程的执行了;它错误的认为整个Timer都被取消了。此时，已经被
  • SQL 优化原则 chicony sql
    一、问题的提出 　在应用系统开发初期，由于开发数据库数据比较少，对于查询SQL语句，复杂视图的的编写等体会不出SQL语句各种写法的性能优劣，但是如果将应用系统提交实际应用后，随着数据库中数据的增加，系统的响应速度就成为目前系统需要解决的最主要的问题之一。系统优化中一个很重要的方面就是SQL语句的优化。对于海量数据，劣质SQL语句和优质SQL语句之间的速度差别可以达到上百倍，可见对于一个系统
  • java 线程弹球小游戏 CrazyMizzz java游戏
    最近java学到线程，于是做了一个线程弹球的小游戏，不过还没完善 这里是提纲 1.线程弹球游戏实现 1.实现界面需要使用哪些API类 JFrame JPanel JButton FlowLayout Graphics2D Thread Color ActionListener ActionEvent MouseListener Mouse
  • hadoop jps出现process information unavailable提示解决办法 daizj hadoopjps
    hadoop jps出现process information unavailable提示解决办法   jps时出现如下信息： 3019 -- process information unavailable3053 -- process information unavailable2985 -- process information unavailable2917 --
  • PHP图片水印缩放类实现 dcj3sjt126com PHP
    <?php class Image{ private $path; function __construct($path='./'){ $this->path=rtrim($path,'/').'/'; } //水印函数，参数：背景图，水印图，位置，前缀,TMD透明度 public function water($b,$l,$pos
  • IOS控件学习：UILabel常用属性与用法 dcj3sjt126com iosUILabel
    参考网站： http://shijue.me/show_text/521c396a8ddf876566000007 http://www.tuicool.com/articles/zquENb http://blog.csdn.net/a451493485/article/details/9454695 http://wiki.eoe.cn/page/iOS_pptl_artile_281
  • 完全手动建立maven骨架 eksliang javaeclipseWeb
    建一个 JAVA 项目 ： mvn archetype:create -DgroupId=com.demo -DartifactId=App [-Dversion=0.0.1-SNAPSHOT] [-Dpackaging=jar] 建一个 web 项目 ： mvn archetype:create -DgroupId=com.demo -DartifactId=web-a
  • 配置清单 gengzg 配置
    1、修改grub启动的内核版本 vi /boot/grub/grub.conf 将default 0改为1 拷贝mt7601Usta.ko到/lib文件夹 拷贝RT2870STA.dat到 /etc/Wireless/RT2870STA/文件夹 拷贝wifiscan到bin文件夹，chmod 775 /bin/wifiscan 拷贝wifiget.sh到bin文件夹，chm
  • Windows端口被占用处理方法 huqiji windows
    以下文章主要以80端口号为例，如果想知道其他的端口号也可以使用该方法..........................1、在windows下如何查看80端口占用情况?是被哪个进程占用?如何终止等.        这里主要是用到windows下的DOS工具,点击"开始"--"运行",输入&
  • 开源ckplayer 网页播放器， 跨平台(html5, mobile)，flv, f4v, mp4, rtmp协议. webm, ogg, m3u8 ！ 天梯梦 mobile
    CKplayer，其全称为超酷flv播放器，它是一款用于网页上播放视频的软件，支持的格式有：http协议上的flv,f4v,mp4格式，同时支持rtmp视频流格 式播放，此播放器的特点在于用户可以自己定义播放器的风格，诸如播放/暂停按钮，静音按钮，全屏按钮都是以外部图片接口形式调用，用户根据自己的需要制作 出播放器风格所需要使用的各个按钮图片然后替换掉原始风格里相应的图片就可以制作出自己的风格了，
  • 简单工厂设计模式 hm4123660 java工厂设计模式简单工厂模式
           简单工厂模式（Simple Factory Pattern）属于类的创新型模式，又叫静态工厂方法模式。是通过专门定义一个类来负责创建其他类的实例，被创建的实例通常都具有共同的父类。简单工厂模式是由一个工厂对象决定创建出哪一种产品类的实例。简单工厂模式是工厂模式家族中最简单实用的模式，可以理解为是不同工厂模式的一个特殊实现。
  • maven笔记 zhb8015 maven
    跳过测试阶段： mvn package -DskipTests 临时性跳过测试代码的编译： mvn package -Dmaven.test.skip=true   maven.test.skip同时控制maven-compiler-plugin和maven-surefire-plugin两个插件的行为，即跳过编译，又跳过测试。   指定测试类 mvn test
  • 非mapreduce生成Hfile，然后导入hbase当中 Stark_Summer maphbasereduceHfilepath实例
    最近一个群友的boss让研究hbase，让hbase的入库速度达到5w+/s，这可愁死了，4台个人电脑组成的集群，多线程入库调了好久，速度也才1w左右，都没有达到理想的那种速度，然后就想到了这种方式，但是网上多是用mapreduce来实现入库，而现在的需求是实时入库，不生成文件了，所以就只能自己用代码实现了，但是网上查了很多资料都没有查到，最后在一个网友的指引下，看了源码，最后找到了生成Hfile
  • jsp web tomcat 编码问题 王新春 tomcatjsppageEncode
    今天配置jsp项目在tomcat上，windows上正常，而linux上显示乱码，最后定位原因为tomcat 的server.xml 文件的配置，添加 URIEncoding 属性： <Connector port="8080" protocol="HTTP/1.1" connectionTi
按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他