openlayers4 入门开发系列之聚合图篇(附源码下载)
前言
openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子,这个也是学习 openlayers4 的好素材。
openlayers4 入门开发系列的地图服务基于 Geoserver 发布的,关于 Geoserver 方面操作的博客,可以参考以下几篇文章:
内容概览
1.基于 openlayers4 实现地图聚合图效果
2.源代码 demo 下载
本篇的重点内容是利用 openlayers4 实现聚合图功能,效果图如下:
实现思路
- 界面设计
//聚合图
"<div style='height:25px;background:#30A4D5;margin-top:25px;width: 98%;margin-left: 3px;'>" +
"<span style='margin-left:5px;font-size: 13px;color:white;'>聚合图</span>" +
"</div>" +
'<div id="tool-ol-ClusterLayer" style="padding:5px;">' +
'<div style="float:left;">' +
'<input type="checkbox" name="tool-ol-ClusterLayer" style="width: 15px;height: 15px;vertical-align: middle;margin: auto;"/>' +
'<label style="font-weight: normal;vertical-align: middle;margin: auto;">聚合图</label>' +
'</div>' +
'</div>'
- 点击事件
//加载聚合图
$("#tool-ol-ClusterLayer input").bind("click", function () {
if (this.checked) {
if(!bxmap.olClusterLayer.isLoad){
bxmap.olClusterLayer.Init(bmap);
}
else{
bxmap.olClusterLayer.showClusterLayer();
}
}
else {
bxmap.olClusterLayer.hideClusterLayer();
}
})
- 初始化以及核心代码实现
var bxmap = bxmap || {};
bxmap.olClusterLayer = {
map:null,
isLoad:false,
layer: null,//聚合图图层
originalStyle:null,//聚合原始样式
selectStyleFunction:null,
Init:function(bmap){
//加载聚合图
this.map = bmap.getMap();
this.isLoad = true;
//设置原始样式
this.originalStyle = new ol.style.Style({
image: new ol.style.Circle({
radius: 5,
stroke: new ol.style.Stroke({
color: '#fff'
}),
fill: new ol.style.Fill({
color: '#3399CC'
})
})
});
this.initClusterLayer(qy);
},
……
更多的详情见:GIS之家小专栏
文章尾部提供源代码下载,对本专栏感兴趣的话,可以关注一波
openlayers4 入门开发系列之聚合图篇(附源码下载)的更多相关文章
- openlayers4 入门开发系列之图层控制(附源码下载)
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- openlayers4 入门开发系列结合 echarts4 实现统计图(附源码下载)
前言 openlayers4 官网的 api 文档介绍地址 openlayers4 api,里面详细的介绍 openlayers4 各个类的介绍,还有就是在线例子:openlayers4 官网在线例子 ...
- arcgis api 3.x for js 入门开发系列八聚合效果(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- openlayers5-webpack 入门开发系列结合 echarts4 实现散点图(附源码下载)
前言 openlayers5-webpack 入门开发系列环境知识点了解: node 安装包下载webpack 打包管理工具需要依赖 node 环境,所以 node 安装包必须安装,上面链接是官网下载 ...
- arcgis api 3.x for js入门开发系列九热力图效果(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api 3.x for js 入门开发系列十一地图统计图(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api 3.x for js 入门开发系列七图层控制(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api 3.x for js 入门开发系列四地图查询(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
- arcgis api 3.x for js 入门开发系列三地图工具栏(附源码下载)
前言 关于本篇功能实现用到的 api 涉及类看不懂的,请参照 esri 官网的 arcgis api 3.x for js:esri 官网 api,里面详细的介绍 arcgis api 3.x 各个类 ...
随机推荐
- Python_字符串之删除空白字符或某字符或字符串
''' strip().rstrip().lstrip()分别用来删除两端.右端.左端.连续的空白字符或字符集 ''' s='abc ' s2=s.strip() #删除空白字符 print(s2) ...
- python_自定日历
>>> from datetime import date>>> daysOfMonth=[31,28,31,30,31,30,31,31,30,31,30,31] ...
- BigDecimal.setScale 处理java小数点
BigDecimal.setScale()方法用于格式化小数点setScale(1)表示保留一位小数,默认用四舍五入方式 setScale(1,BigDecimal.ROUND_DOWN)直接删除多余 ...
- 数据库中table 和 schema的区别
什么是Database,什么是Schema,什么是Table,什么是列,什么是行,什么是User? 我们可以把Database看作是一个大仓库,仓库分了很多很多的房间,Schema就是其中的房间,一个 ...
- PyCharm 专题
pycharm常用设置 pycharm中的设置是可以导入和导出的,file>export settings可以保存当前pycharm中的设置为jar文件,重装时可以直接import settin ...
- vm12 和14密钥
vm12:5A02H-AU243-TZJ49-GTC7K-3C61N vm14:FF31K-AHZD1-H8ETZ-8WWEZ-WUUVA
- jQuery学习之旅 Item3 属性操作与样式操作
本节将Dom元素的操作:属性操作.样式操作.设置和获取HTML,文本和值.Css-Dom操作. 1.属性操作 <input type="text" name="us ...
- 任务调度--spring下的任务调度quartz
之前写过Timer实现任务调度,这篇文章用来写一下在spring下使用quartz实现任务调度,直接上代码: 定义任务对象: package com; /** * 1. 定义任务对象 * * @aut ...
- 巩固java(三)---java修饰符
正文: 下面的表格列出了java中修饰符的一些信息: 修饰符名称 类型 类 变量 方法 abstract 非访问控制符 抽象类 -- 抽象方法 final ...
- mac下安装Maven和配置环境变量
1.下载maven包: 下载链接: