openlayer中geojson要素图层设置style样式

太过爱你忘了你带给我的痛 2021-07-25 20:11 1044阅读 0赞

import "ol/ol.css";
    import { Map, View } from "ol";
    import { TileWMS, OSM, Vector as VectorSource } from "ol/source";
    import { Vector as VectorLayer, Tile as TileLayer } from "ol/layer";
    import GeoJSON from "ol/format/GeoJSON";
    import { Fill, Stroke, Style, Text } from "ol/style";
    
    
    new VectorLayer({
              source: new VectorSource({
                url: "xxx",
                format: new GeoJSON()
              }),
              style: new Style({
                fill: new Fill({
                  //矢量图层填充颜色，以及透明度
                  color: "rgba(33,194,219,0.5)"
                }),
                stroke: new Stroke({
                  //边界样式
                  color: "rgba(100, 90, 209, 0.6)",
                  width: 3
                }),
                text: new Text({
                  //文本样式
                  font: "12px Calibri,sans-serif",
                  fill: new Fill({
                    color: "#000"
                  }),
                  stroke: new Stroke({
                    color: "#fff",
                    width: 3
                  })
                })
              })
            })

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/65e001637ab44394afdc432d21425116.png

发表评论取消回复

表情：

评论列表（有 0 条评论，1044人围观）

还没有评论，来说两句吧...

相关阅读

相关 Openlayers实战：绘制图形，导出geojson文件

GeoJSON格式数据在GIS中具有非常重要的地位，大多数时候都会用geojson来存储数据。在本Openlayer实战中，我们自己绘制矩形，然后通过file-saver导出数

清疚/ 2024年03月17日 21:41/ 0 赞/ 101 阅读

相关 QGIS中怎样设置图层样式并导出地图样式

场景 QGIS怎样设置简体中文以及新建可编辑的多边形的图层： [QGIS怎样设置简体中文以及新建可编辑的多边形的图层\_霸道流氓气质的博客-CSDN博客][QGIS_-

淡淡的烟草味﹌/ 2023年09月30日 13:03/ 0 赞/ 46 阅读

相关 Openlayers中多图层遮挡时调整图层上下顺序

场景 Openlayers中加载Geoserver切割的EPSG:900913离线瓦片地图并显示： [https://blog.csdn.net/BADAO\_LIUM

女爷i/ 2022年10月19日 05:58/ 0 赞/ 390 阅读

相关 Openlayers中设置定时绘制和清理直线图层

场景 Openlayers中实现地图上添加一条红色直线： [https://blog.csdn.net/BADAO\_LIUMANG\_QIZHI/article/de

今天药忘吃喽~/ 2022年10月19日 04:13/ 0 赞/ 439 阅读

相关 geoserver中配置图层样式style

点样式 ![20210927190237692.png][] <?xml version="1.0" encoding="UTF-8"?> <Style

朱雀/ 2022年09月10日 14:29/ 0 赞/ 802 阅读

相关 Openlayer中的Layer图层

> 通常要初始化一个vectorLayer空对象，好处： > > 1. 通过Object.keys(this.vectorLayer).length来判断图层是否为\{\}

拼搏现实的明天。/ 2022年09月09日 13:51/ 0 赞/ 298 阅读

相关 Openlayer中给feature设置不同的样式

![20210831101738346.png][] 方式一： geojson数据： geojsonData: { type: "

àì夳堔傛蜴生んèń/ 2022年09月09日 09:28/ 0 赞/ 367 阅读

相关 vue中动态设置style样式和使用filters过滤器设置样式

例如：想给图片增加高度和宽度 <el-image :class="classRotation" v-if="imageData.src !== u

ゝ一世哀愁。/ 2022年09月01日 13:48/ 0 赞/ 263 阅读

相关 vue中样式-style

> <!DOCTYPE html> > <html lang="en"> > > <head> > <meta charset="UTF-8"> > <m

﹏ヽ暗。殇╰゛Y/ 2022年02月21日 09:19/ 0 赞/ 475 阅读

相关 openlayer中geojson要素图层设置style样式

import "ol/ol.css"; import { Map, View } from "ol"; import { TileWMS, OSM, V

太过爱你忘了你带给我的痛/ 2021年07月25日 20:11/ 0 赞/ 1045 阅读