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

Question

我使用 OpenLayer 加载 KML。加载图标，但不显示标签。如果我删除“样式”部分，则会显示标签，但不会显示图标。任何想法都受到高度赞赏。谢谢

我的代码：

    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>

Answer 1

我想通了。我刚刚从我的 KML 中取出了整个“样式”部分，让 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>