Openlayers记录（四）同一图层设置不同的点符号（大小、颜色等）。

Openlayers记录（四）同一图层设置不同的点符号（大小、颜色等），弹窗显示。

1.实现效果

1.1点符号设置

1.2弹窗效果

2.实现的符号设置代码

    /*****************标记部分****************************/var features1 = [];for (var i = 0; i < dataSource.items.length; i++) {var coordinate = [lat[i], lon[i]];coordinate.map(parseFloat);//  console.log("转换后经纬度：" + coordinate);var attr = {Code:code[i],Name: Name[i],city: city[i],lat: lat[i],lon: lon[i],confirmed:confirmed[i],cure: cure[i],death: death[i],foreign:foreign[i]};//features1[i] = new ol.Feature({geometry: new ol.geom.Point(coordinate),//  attribute: attr,// });features1.push( new ol.Feature({geometry: new ol.geom.Point(coordinate),attribute: attr,name:dataSource.items[i].id}))}var colors = ['#FF359A', '#CE0000', '#BE77FF', '#00CACA','#9393FF', '#FF5809', '#F9F900', '#B7FF4A','#AE57A4', '#804040', '#6C6C6C', '#336666','#000079', '#003E3E', '#F00078', '#C48888'];var iconWidth=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,1];var iconWidth1=iconWidth.reverse();console.log();var iconStyles = [];for(var i=0;i<dataSource.items.length;i++){iconStyles.push(new ol.style.Style({image:  new ol.style.Circle({radius: iconWidth[i]*3,stroke: new ol.style.Stroke({color: '#fff',}),fill: new ol.style.Fill({color: colors[i],})})}))}
var labelStyle = new ol.style.Style({text: new ol.style.Text({font: '12px Calibri,sans-serif',overflow: true,fill: new ol.style.Fill({color: '#000'}),stroke: new ol.style.Stroke({color: '#fff',width: 3}),textBaseline: 'bottom',offsetY: -8})
});var source1 = new ol.source.Vector({features: features1,});var markerVectorLayer = new ol.layer.Vector({name:'山东16地市疫情查询',source: source1,style: function(feature) {var name = feature.get('name');var iconStyle = iconStyles[parseInt(name)%colors.length];labelStyle.getText().setText(feature.values_.attribute.confirmed);return [iconStyle, labelStyle];}
});map.addLayer(markerVectorLayer);

Openlayers记录（四）同一图层设置不同的点符号（大小、颜色等）。相关推荐

Openlayers记录（七）利用ol3进行缓冲区的空间相交分析
Openlayers记录(七)利用ol3进行缓冲区的空间相交分析 1效果实现代码首先需要添加引用文件jsts.js,坐标问题阴影proj4.js: //空间分析 var proj = new ol ...
御用导航官方网站提醒提示页_电脑上使用便签记录工作计划如何设置闹钟定时提醒？...
平常工作日程事务比较多时,就很容易忘掉一些工作,这个时候很多工作族会选择经常使用的电脑工具来记录每日的工作计划,电脑如何设置闹钟定时提醒工作计划呢? 电脑便签可以用来记录工作计划闹钟定时提醒的软件,建 ...
使用计算机完成怎样的工作计划,电脑上使用便签记录工作计划如何设置闹钟定时提醒？...
原标题:电脑上使用便签记录工作计划如何设置闹钟定时提醒? 平常工作日程事务比较多时,就很容易忘掉一些工作,这个时候很多工作族会选择经常使用的电脑工具来记录每日的工作计划,电脑如何设置闹钟定时提醒工作计 ...
cad在图层设置中改不了线性和线宽
本系列文章仅用于记录本人遇到的问题及解决方法.如果你感觉以下内容似曾相识,没错,我就是抄的. 1.问题描述 cad在图层设置中改不了线性和线宽 2.产生原因原因不知,未深究. 3.解决方法朋友求助 ...
Kafka学习记录(四)——消费者
Kafka学习记录(四)--消费者目录 Kafka学习记录(四)--消费者对应课程 Kafka消费者工作流程消费方式和流程消费者组原理消费者组初始化流程消费者组详细消费流程重要参数 ka ...
还在对Matplotlib繁琐的图层设置感到烦恼！？快来看看这个Python绘图工具包吧
是不是被matplotlib繁琐绘图属性设置搞得一脸懵?是不是因常常记不住某一个图层设置函数而被迫看又长又枯燥的API文档?又或者是不是在面对多个matplotlib子图时写了大量的循环代码来设置属性 ...
leveldb 学习记录(四)Log文件
前文记录 leveldb 学习记录(一) skiplist leveldb 学习记录(二) Slice leveldb 学习记录(三) MemTable 与 Immutable Memtable le ...
背景图层和普通图层的区别_008Photoshop四赞图层（图层样式）
图层过滤器图层滤镜,比如你只想看到像素图层,选择像素图层过滤器,这时就只能看到背景图层了(在图层面板),如果再点击像素图层过滤器,其他图层又出现了.选中调整图层过滤器,就只能看到图层结构里的调整图层 ...
MySQL学习记录 (四) ----- SQL数据管理语句(DML)
相关文章: <MySQL学习记录 (一) ----- 有关数据库的基本概念和MySQL常用命令> <MySQL学习记录 (二) ----- SQL数据查询语句(DQL)> &l ...

Openlayers记录（四）同一图层设置不同的点符号（大小、颜色等）。

Openlayers记录（四）同一图层设置不同的点符号（大小、颜色等），弹窗显示。

1.实现效果

1.1点符号设置

1.2弹窗效果

2.实现的符号设置代码

Openlayers记录（四）同一图层设置不同的点符号（大小、颜色等）。相关推荐

最新文章

热门文章