OpenLayers3。如何为线条和标记添加标签

时间:2017-03-27 10:45:00

标签: typescript openlayers-3

我正在创建一个Openlayers3地图。与给出的示例不同,我必须在知道功能之前为每个图层创建样式。我使用以下序列:

  1. 初始化地图。
  2. 为每个组/ ol.layer.vector
  3. 设置样式

    示例:

    paypal.Button.render
    1. 在地图上绘制要素。
    2. 示例:

          this.addGroup('testPackages', {
                  normalStyle: new ol.style.Style({
                      stroke: new ol.style.Stroke({ color: '#c407d3', width: 3, lineDash: [.1, 5] }),
                      fill: new ol.style.Fill({ color: 'rgba(196, 7, 211, 0.1)' })
                  }),
                  hoverStyle: new ol.style.Style({
                      stroke: new ol.style.Stroke({ color: '#c407d3', width: 3, lineDash: [.1, 5] }),
                      fill: new ol.style.Fill({ color: 'rgba(196, 7, 211, 0.4)' })
                  }),
                  selectedStyle: new ol.style.Style({
                      stroke: new ol.style.Stroke({ color: '#c407d3', width: 3 }),
                      fill: new ol.style.Fill({ color: 'rgba(196, 7, 211, 0.4)' })
                  })
      
              });
      
          this.addGroup('cabinets', {
                  normalStyle: new ol.style.Style({
                      image: new ol.style.Icon(({
                          scale: 0.25,
                          anchor: [0.5, 1],
                          anchorXUnits: 'fraction',
                          anchorYUnits: 'fraction',
                          opacity: 1,
                          src: '/images/olMaps/house.png'
                      }))
                  }),
                  hoverStyle: new ol.style.Style({
                      image: new ol.style.Icon(({
                          scale: 0.25,
                          anchor: [0.5, 1],
                          anchorXUnits: 'fraction',
                          anchorYUnits: 'fraction',
                          opacity: 1,
                          src: '/images/olMaps/house.png'
                      }))
                  }),
                  selectedStyle: new ol.style.Style({
                      image: new ol.style.Icon(({
                          scale: 0.25,
                          anchor: [0.5, 1],
                          anchorXUnits: 'fraction',
                          anchorYUnits: 'fraction',
                          opacity: 1,
                          src: '/images/olMaps/house.png'
                      }))
                  })
      
              })
      

      //这是将文本添加到样式

      的新功能
          drawLine(geoShape: any, assetId: string, group: IAssetGroup) { // vectorLine: ol.source.Vector, style?: ol.style.Style) {
      
              // Transform the geometry for a map line-string.
              const transformedGeometry = this.transformCoordinates(geoShape);
              const lineString = new ol.geom.LineString(<any>transformedGeometry);
      
              // Create the line-string feature.
              const feature = new ol.Feature({
                  geometry: lineString,
                  id: assetId,
                  group: group
              });
      
              // Set the style on the feature?
              if (!!group.normalStyle)
                  feature.setStyle(group.normalStyle);
      
              // new lines
      
              var myStyle = group.normalStyle;
              myStyle = this.styleFunction(myStyle, feature);
              feature.setStyle(myStyle);
      
              // end
      
      
              // Add the feature to the vector-set.
              group.vector.addFeature(feature);
      
              // Add to list of all features.
              this.allFeatures.push(feature);
              this.lookupFeatures[assetId] = feature;
      
          }
      

      //结束

          styleFunction(myStyle: ol.style.Style, feature: ol.Feature) {
              return [
                  new ol.style.Style({
                      fill: myStyle.getFill(),
                      stroke: myStyle.getStroke(),
                      text: new ol.style.Text({
                          font: '12px Calibri,sans-serif',
                          fill: new ol.style.Fill({ color: '#000' }),
                          stroke: new ol.style.Stroke({
                              color: '#fff', width: 2
                          }),
                          // get the text from the feature - `this` is ol.Feature
                          // and show only under certain resolution
                          text: this.olMap.getView().getZoom() > 12 ? feature.get('name'): ''
                      })
                  })
              ];
          }
      

      如何为每个功能添加标签名称?

0 个答案:

没有答案