Leaflet使用GeoJSON线数据进行样式渲染的记录

简介: 通过设置geojson线的style来渲染数据

问题

Leaflet在渲染线或面要素的时候需要传入一个style,在官方文档里说是需要一个Path Options,其实指向的是L.svg()这个抽象构的造函数,所以不能实例化,那怎么办呢?
image

如果不给其传参数,则它的效果是默认的蓝色

let layer = L.geoJSON(data).bindPopup((layer) => {
      return layer.feature.properties.Name
    });

image

解决

通过查资料,发现style可以直接设置Object;如下

let layer = L.geoJSON(data, {
      style: {
          color: '#ffdd00f5'
       }
     }).bindPopup((layer) => {
       return layer.feature.properties.Name
     });

image

目录
相关文章
|
1月前
|
JavaScript
vue element-ui中有关表格中的数据整条显示红色/绿色等等颜色的问题
vue element-ui中有关表格中的数据整条显示红色/绿色等等颜色的问题
24 1
|
9月前
|
定位技术
Echarts使用geojson地理坐标地图地名label标签位置不居中调整的解决方案
Echarts使用geojson地理坐标地图地名label标签位置不居中调整的解决方案
180 0
Cesium中开启等高线渲染
最近接到一个需求,需要在Cesium中基于实时地形开启等高线效果,让用户可以看到真实效果。
614 0
Cesium中开启等高线渲染
|
JSON 数据可视化 定位技术
【D3.js - v5.x】(7)绘制地图 | Geo布局 | 完整代码
【D3.js - v5.x】(7)绘制地图 | Geo布局 | 完整代码
725 0
【D3.js - v5.x】(7)绘制地图 | Geo布局 | 完整代码
|
9天前
|
数据可视化 前端开发 定位技术
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
echarts 关于折线统计图常用的属性设置--超详细(附加源码)
20 0
|
9月前
echart时间轴设置详解
时间轴设置详解
338 0
|
4月前
|
测试技术 定位技术
【sgDragMoveTile】自定义组件:拖拽瓦片图、地图、大图,滚动条对应同步滚动
【sgDragMoveTile】自定义组件:拖拽瓦片图、地图、大图,滚动条对应同步滚动
|
5月前
|
前端开发
【前端统计图】echarts改变颜色属性的demo
【前端统计图】echarts改变颜色属性的demo
25 0
|
8月前
|
移动开发 前端开发 HTML5
前端 HTML5 Svg 画板(支持视频、图片上涂鸦,支持缩放、修改、颜色、复选...)
前端 HTML5 Svg 画板(支持视频、图片上涂鸦,支持缩放、修改、颜色、复选...)
183 0
|
9月前
|
JavaScript 容器
js实现折线、柱形、散点、扇形统计图之间的转换
js实现折线、柱形、散点、扇形统计图之间的转换
56 0