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

太过爱你忘了你带给我的痛 2021-07-25 20:11 1013阅读 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 条评论，1013人围观）

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

相关阅读

相关 Openlayers实战：加载GeoJSON

在OPenlayers的交互中，经常性的我们要加载一些数据，在这个实战中，演示的是加载GeoJSON文件。 GeoJSON 是一种使用JavaScript 对象表示法(JS

骑猪看日落/ 2024年03月17日 21:00/ 0 赞/ 104 阅读

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

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

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

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

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

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

相关 geoserver中配置图层样式style

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

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

相关 Openlayer中的Layer图层

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

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

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

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

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

相关 Vue+Openlayer中使用select选择要素

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_Q1NETiBAfueWhg_size_17_color_

小鱼儿/ 2022年09月08日 11:52/ 0 赞/ 190 阅读

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

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

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

相关 vue中样式-style

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

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

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

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

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