美文网首页GISGeomatics(GIS,GPS,RS,Surveying)
openlayers5-加载geojson数据,并用icon s

openlayers5-加载geojson数据,并用icon s

作者: 知足常乐晨 | 来源:发表于2019-06-05 10:42 被阅读1次
  addGeojson() {
    var vectorSource = new VectorSource({
      url: '/json/air.json',
      format: new GeoJSON()
    });
    // resolution:分辨率
    var styleFunction = function (feature, resolution) {
      return new Style({
// 添加circle
  /*       image: new CircleStyle({
          radius: 10,
          fill: new Fill({
            color: 'rgba(255, 0, 0, 0.1)'
          }),
          stroke: new Stroke({
            color: 'red',
            width: 1
          })
        }), */
//添加sprite图标
        image: new Icon({
          offset: [56,0],
          opacity: 1.0,
          rotateWithView: 28,
          rotation: 0.0,
          scale: 1.0,
          size: [28,29],
          crossOrigin: 'anonymous',
          src: '/img/sprite.png'
        }),
        text: new Text({
          textAlign: 'center',
          textBaseline: 'top',
          // font: font,
          offsetX: 0,
          offsetY: 12,
          text: resolution < 180 ? feature.get('ZDMC') : '',
          fill: new Fill({
            color: '#149321'
          }),
          // 字体阴影
          // stroke: new Stroke({
          //   color: '#149321',
          //   width: 1
          // }),
        })
      });
    };

resolution为分辨率
/img/sprite.png为合成的雪碧图(sprite图片)

相关文章

网友评论

    本文标题:openlayers5-加载geojson数据,并用icon s

    本文链接:https://www.haomeiwen.com/subject/siwcxctx.html