当前位置:   article > 正文

openlayer中geojson要素图层设置style样式_openlayers newtext 背景

openlayers newtext 背景

目录

填充、描边

动态设置文字标注:

随机设置颜色:

 添加图标

获取feature后,可以通过Feature.setStyle()函数给feature动态设置样式:

  1. feature.setStyle(
  2. new Style({
  3. //填充色
  4. fill: new Fill({
  5. color: "rgba(255, 255, 255, 0.2)",
  6. }),
  7. //边线颜色
  8. stroke: new Stroke({
  9. color: "#FF0000",
  10. width: 5,
  11. }),
  12. text: new Text({
  13. // 位置
  14. textAlign: "center",
  15. // 基准线
  16. textBaseline: "middle",
  17. // 文字样式
  18. font: "bold 18px 微软雅黑",
  19. // 文本内容
  20. text: `${feature.get("name")}(${feature.get("area")}亩)`,
  21. // 文字颜色
  22. fill: new Fill({ color: "#00FFFF" }),
  23. // 文字背景
  24. stroke: new Stroke({ color: "#353535", width: 1 }),
  25. }),
  26. //点样式,继承image
  27. image: new Circle({
  28. radius: 7,
  29. fill: new Fill({
  30. color: "#ffcc33",
  31. }),
  32. }),
  33. // image: new Icon({
  34. // anchor: [0.5, -0.3],
  35. // src: "https://openlayers.org/en/v4.6.5/examples/data/icon.png",
  36. // scale: 1, //设置大小
  37. // }),
  38. })
  39. );

填充、描边

  1. import "ol/ol.css";
  2. import { Map, View } from "ol";
  3. import { TileWMS, OSM, Vector as VectorSource } from "ol/source";
  4. import { Vector as VectorLayer, Tile as TileLayer } from "ol/layer";
  5. import GeoJSON from "ol/format/GeoJSON";
  6. import { Fill, Stroke, Style, Text, Icon, Circle } from "ol/style";
  7. new VectorLayer({
  8. source: new VectorSource({
  9. url: "xxx",
  10. format: new GeoJSON()
  11. }),
  12. style: new Style({
  13. fill: new Fill({
  14. //矢量图层填充颜色,以及透明度
  15. color: "rgba(33,194,219,0.5)"
  16. }),
  17. stroke: new Stroke({
  18. //边界样式
  19. color: "rgba(100, 90, 209, 0.6)",
  20. width: 3
  21. }),
  22. text: new Text({
  23. //文本样式
  24. font: "12px Calibri,sans-serif",
  25. fill: new Fill({
  26. color: "#000"
  27. }),
  28. stroke: new Stroke({
  29. color: "#fff",
  30. width: 3
  31. })
  32. })
  33. })
  34. })

动态设置文字标注:

随机设置颜色:

  1. let colors = ["orange","red","blue","yellow"];
  2. let color = colors[Math.floor(Math.random()*colors.length)];

 添加图标

  1. new VectorLayer({
  2. source: new VectorSource({
  3. features: new GeoJSON().readFeatures(this.geojsonData_sensor),
  4. }),
  5. style: function (feature) {
  6. return new Style({
  7. fill: new Fill({
  8. //矢量图层填充颜色,以及透明度
  9. color: "#4e98f444",
  10. }),
  11. stroke: new Stroke({
  12. //边界样式
  13. color: "rgba(71, 137, 227, 1)",
  14. width: 3,
  15. }),
  16. text: new Text({
  17. // 位置
  18. textAlign: "center",
  19. // 基准线
  20. textBaseline: "middle",
  21. // 文字样式
  22. font: "bold 18px 微软雅黑",
  23. // 文本内容
  24. text: `${feature.get("title")}`,
  25. // 文字颜色
  26. fill: new Fill({
  27. color: "black",
  28. }),
  29. // 文字背景
  30. stroke: new Stroke({ color: "yellow", width: 10 }),
  31. }),
  32. image: new Icon({
  33. anchor: [0.5, -0.3],
  34. src: "https://openlayers.org/en/v4.6.5/examples/data/icon.png",
  35. scale: 1, //设置大小
  36. }),
  37. });
  38. },
  39. zIndex: 999,
  40. }),

在线预览:

WebGIS之家WebGIS之家,openlayers示例源码,cesium示例源码,openlayers在线调试预览,cesium在线调试预览,webgis,数字地球,数字孪生icon-default.png?t=N7T8https://www.webgishome.com/preview?id=55&example_name=style2&title=%E6%A0%B7%E5%BC%8F2

声明:本文内容由网友自发贡献,转载请注明出处:【wpsshop】
推荐阅读
  

闽ICP备14008679号