How to use the ol/style/Style function in ol

To help you get started, we’ve selected a few ol examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github Viglino / ol-ext / src / control / CanvasBase.js View on Github external
ol_control_CanvasBase.prototype.setStyle = function(style) {
  this._style = style ||  new ol_style_Style ({});
};
github devilesk / dota-interactive-map / src / js / styleDefinitions.js View on Github external
image: new Icon({
                src: 'img/ward_sentry.png',
                anchor: [0.5, 1],
                color: '#0000ff',
            }),
        }),
        remove: new Style({
            image: new Icon({
                src: 'img/ward_sentry.png',
                anchor: [0.5, 1],
                color: '#ff0000',
            }),
        }),
    },
    tree: {
        alive: new Style({
            fill: new Fill({ color: [0, 255, 0, 0.3] }),
            stroke: new Stroke({ color: [0, 255, 0, 0.8] }),
        }),
        dead: new Style({
            fill: new Fill({ color: [51, 25, 0, 0.7] }),
            stroke: new Stroke({ color: [255, 128, 0, 0.8] }),
        }),
    },
    bountyRune: new Style({
        image: new Icon({
            src: 'img/bountyrune.png',
            anchor: [0.5, 0.5],
        }),
    }),
    rune: new Style({
        image: new Icon({
github SuperMap / iClient-JavaScript / src / openlayers / core / StyleUtils.js View on Github external
StyleUtils.getCanvasFromSVG(styleParams.url, that.svgDiv, function (canvas) {
      style = new Style({
        image: new Icon({
          img: that.setColorToCanvas(canvas, styleParams),
          scale: styleParams.radius / canvas.width,
          imgSize: [canvas.width, canvas.height],
          anchor: [0.5, 0.5],
          opacity: styleParams.fillOpacity
        })
      });
    });
    return style;
github devilesk / dota-interactive-map / src / js / controls / draw.js View on Github external
this.draw.on('drawend', (event) => {
            let style = new Style({
                fill: new Fill({ color: this.fillColor() }),
                stroke: new Stroke({
                    color: this.strokeColor(),
                    width: parseInt(this.root.getElementById('strokesize-option').value),
                }),
            });
            if (this.type === 'point') {
                style = new Style({
                    image: new Circle({
                        radius: parseInt(this.root.getElementById('strokesize-option').value),
                        fill: new Fill({ color: this.strokeColor() }),
                    }),
                });
            }
            else if (this.type === 'marker') {
                const heroIcon = heroIcons[this.markerType];
github SuperMap / iClient-JavaScript / src / openlayers / core / StyleUtils.js View on Github external
static getStyleFromiPortalMarker(icon) {
    if (icon.indexOf("./") == 0) {
      return null;
    }
    //兼容iportal示例的问题
    if (icon.indexOf("http://support.supermap.com.cn:8092/static/portal") == 0) {
      icon = icon.replace("http://support.supermap.com.cn:8092/static/portal", "http://support.supermap.com.cn:8092/apps/viewer/static");
    }
    return new Style({
      image: new Icon({
        src: icon,
        opacity: 1,
        size: [48, 43],
        anchor: [0.5, 1]
      })
    });
  }
github SuperMap / iClient-JavaScript / src / openlayers / core / StyleUtils.js View on Github external
static toOLPolygonStyle(style) {
    var fill = new FillStyle({
      color: style.fillStyle
    });
    var stroke = new StrokeStyle({
      color: style.strokeStyle,
      width: style.lineWidth,
      lineCap: style.lineCap,
      lineDash: style.lineDasharray,
      lineDashOffset: style.lineDashOffset,
      lineJoin: style.lineJoin,
      miterLimit: style.miterLimit
    });
    return new Style({
      fill: fill,
      stroke: stroke
    });
  }
github terrestris / react-geo / src / Grid / FeatureGrid / FeatureGrid.tsx View on Github external
/**
   * The properties.
   * @type {Object}
   */
  static propTypes = {
  };

  /**
   * The default properties.
   * @type {Object}
   */
  static defaultProps: FeatureGridDefaultProps = {
    features: [],
    attributeBlacklist: [],
    featureStyle: new OlStyle({
      fill: new OlStyleFill({
        color: 'rgba(255, 255, 255, 0.5)'
      }),
      stroke: new OlStyleStroke({
        color: 'rgba(73, 139, 170, 0.9)',
        width: 1
      }),
      image: new OlStyleCircle({
        radius: 6,
        fill: new OlStyleFill({
          color: 'rgba(255, 255, 255, 0.5)'
        }),
        stroke: new OlStyleStroke({
          color: 'rgba(73, 139, 170, 0.9)',
          width: 1
        })
github nasa-gibs / worldview / web / js / map / natural-events / track.js View on Github external
var getLineStyle = function(color, width) {
  return new OlStyleStyle({
    stroke: new OlStyleStroke({
      color: color,
      width: width
    })
  });
};
/**
github geostyler / geostyler-openlayers-parser / data / olStyles / point_styledLabel_static.ts View on Github external
import OlStyleText from 'ol/style/Text';
import OlStyleStroke from 'ol/style/Stroke';
import OlStyleFill from 'ol/style/Fill';
import OlStyle from 'ol/style/Style';

const olPointStyledLabel = new OlStyle({
  text: new OlStyleText({
    text: 'name',
    fill: new OlStyleFill({
      color: '#000000'
    }),
    stroke: new OlStyleStroke({
      color: '#000000',
      width: 5
    }),
    offsetX: 0,
    offsetY: 5,
    rotation: Math.PI / 4,
    font: '12px Arial'
  })
});
github nasa / common-mapping-client / src / _core / utils / MapWrapperOpenlayers.js View on Github external
configureStyles(container, options) {
        let geometryStyles = {};
        geometryStyles[OL_Geom_GeometryType.POLYGON] = [
            new Ol_Style({
                stroke: new Ol_Style_Stroke({
                    color: appConfig.GEOMETRY_OUTLINE_COLOR,
                    width: appConfig.GEOMETRY_STROKE_WEIGHT + 1
                })
            }),
            new Ol_Style({
                fill: new Ol_Style_Fill({
                    color: appConfig.GEOMETRY_FILL_COLOR
                }),
                stroke: new Ol_Style_Stroke({
                    color: appConfig.GEOMETRY_STROKE_COLOR,
                    width: appConfig.GEOMETRY_STROKE_WEIGHT
                })
            })
        ];
        geometryStyles[OL_Geom_GeometryType.POINT] = [
            new Ol_Style({
                image: new Ol_Style_Circle({
                    radius: 4,
                    fill: new Ol_Style_Fill({
                        color: appConfig.GEOMETRY_STROKE_COLOR
                    }),