美文网首页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