OpenLayer KML加载图标但不显示标签

时间:2014-03-20 16:38:49

标签: openlayers kml

我使用OpenLayer加载KML。加载图标,但不显示标签。如果我删除" Style"部分显示标签,但不显示图标。任何想法都非常感谢。感谢

我的代码:

    var myStyles2 = new OpenLayers.StyleMap({
        "default": new OpenLayers.Style({
            strokeColor: "#FFCC33",
            strokeWidth: 6,
            strokeOpacity: 1,
            fillColor: "#003399",
            fillOpacity: 0,
            label: "${name}",
            fontSize: "40px"
        })
    });

    var OMapShips = new OpenLayers.Layer.Vector("KML", { styleMap: myStyles2,
        projection: new OpenLayers.Projection("EPSG:4326"),
        strategies: [new OpenLayers.Strategy.Fixed({ preload: false })],
        protocol: new OpenLayers.Protocol.HTTP({
            url: 'js/hl/XMLFile.xml',
            format: new OpenLayers.Format.KML({
                extractStyles: true,
                extractAttributes: true,
                maxDepth: 2
            })
        }),
        renderers: ["SVG"]
    });

    OMap.addLayers([OMapShips]);

KML的摘录

<?xml version="1.0" encoding="utf-16" standalone="yes"?>
<kml xmlns="http://www.opengis.net/kml/2.2">
  <Document id="shipsKML">
    <name>shipsKML</name>
    <Placemark id="366943240">
      <name>Aet Shelby</name>
      <description><![CDATA[<table width = "250px" style="font-size:10px;"<tr><td align="left">Vessel Name</td><td align="right">AET SHELBY</td></tr></table>]]></description>
      <Point>
        <coordinates>-94.78686,29.3203483333333,0</coordinates>
      </Point>
      <Style>
        <IconStyle>
          <color>ffffffff</color>
          <heading>511</heading>
          <Icon>
            <href><![CDATA[http://XX.XX.XX.XX/Icons/Moored/MPR_Moored.png]]></href>
          </Icon>
        </IconStyle>
        <BalloonStyle>
          <bgColor>ff000000</bgColor>
          <textColor>ffffffff</textColor>
          <text><![CDATA[$[description]]]></text>
        </BalloonStyle>
      </Style>
    </Placemark>
  </Document>
</kml>

1 个答案:

答案 0 :(得分:2)

我发现了。我刚刚从我的KML中取出了整个“Style”部分,让OpenLayers处理图标和标签绘制。即使我实现了轮换!我希望这对任何人都有帮助。如果有用,请不要忘记标记为答案,并提出问题。

JavaScript代码:

    var myStyles2 = new OpenLayers.StyleMap({ 'default': {
        strokeColor: "#00FF00",
        strokeOpacity: 1,
        strokeWidth: 1,
        fillColor: "#005500",
        fillOpacity: 0.5,
        pointRadius: 10,
        pointerEvents: "visiblePainted",
        // label with \n linebreaks
        label: "${name}",

        fontColor: "#000000",
        fontSize: "12px",
        fontFamily: "Courier New, monospace",
        fontWeight: "bold",
        labelAlign: "${align}",
        labelXOffset: "${xOffset}",
        labelYOffset: +18,
        labelOutlineColor: "white",
        labelOutlineWidth: 3,
        externalGraphic: "${myurl}",
        rotation: "${myheading}"
        }
    });

KML(摘录):

<Placemark id="367007000">
  <name>Jean Gilbert</name>
  <description><![CDATA[<table width = "250px" style="font-size:10px;"<tr><td align="left">Vessel Name</td><td align="right">JEAN GILBERT</td></table>]]></description>
  <myurl><![CDATA[http://XX.XX.XX.XX/Icons/Moored/WIG_Moored.png]]> </myurl>
  <myheading>45</myheading>
  <Point>
    <coordinates>-93.7430266666667,29.1617766666667,0</coordinates>
  </Point>
</Placemark>