Google Map OpenLayers Kml图标名称

时间:2011-10-05 17:16:12

标签: google-maps kml openlayers

KML文件:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.2">
<Document>
    <name>Name</name>
    <description><![CDATA[]]></description>
    <Style id="style140"><IconStyle>
        <Icon>
            <name>Name</name>
            <href>icon/green.png</href>
        </Icon>
        </IconStyle>
    </Style>
    <Placemark>
        <name>Name</name>
        <description>Desc Name</description>
        <styleUrl>#style140</styleUrl>
        <Point>
            <coordinates>12.7548360932222,59.2701399304516,0.000000</coordinates>
        </Point>
    </Placemark>
</Document>
</kml>

我得到了这个输出:

enter image description here

但我想要这个:

enter image description here

所以你可以看到这个点的名字。 kml文件有什么问题?

THX!

3 个答案:

答案 0 :(得分:2)

我不知道这是否有帮助,但我发现你想要使用的方法不起作用。我能够在javascript中以编程方式设置它。这允许您在自己创建的redcircle图标上方放置一个标签。

希望这有帮助!

javascript(减去构建地图对象的其他代码等):

function addLayer(){    
    var myStyles = new OpenLayers.StyleMap({ 
    "default": new OpenLayers.Style({ 
        strokeColor: "#FFCC33", 
        strokeWidth:10, 
        strokeOpacity:1, 
        fillColor:"#003399", 
        fillOpacity: 1, 
        externalGraphic: "icons/redcircle.png",
        labelYOffset: 15,
        pointRadius: 5,
        label:"${label}",                   
    })
});

currentLayer = new OpenLayers.Layer.Vector("KML", {
    styleMap: myStyles,
    projection: map.displayProjection,      
    strategies: [new OpenLayers.Strategy.Fixed()],          
    protocol: new OpenLayers.Protocol.HTTP({
        url: "/kml/mymap.kml",
        format: new OpenLayers.Format.KML({
            extractStyles: true,
            extractAttributes: true             
        })          
    })          
});

KML文件:

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.2">
<Document>
    <description><![CDATA[]]></description>
    <Placemark>
        <label>Name</label>
        <description>Desc Name</description>
        <Point>
            <coordinates>-122.98676101, 49.16702016,0.000000</coordinates>
        </Point>
    </Placemark>
</Document>
</kml>

答案 1 :(得分:0)

我看到地标名称的标记在Google地球中默认为完全不透明的白色。尝试在样式中指定Label Style元素以获得该颜色和不透明度。

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.2">
<Document>
    <name>Name</name>
    <description><![CDATA[]]></description>
    <Style id="style140">
    <IconStyle>
        <Icon>
            <name>Name</name>
            <href>icon/green.png</href>
        </Icon>
    </IconStyle>
        <LabelStyle>
            <color>ffff55ff</color>
        </LabelStyle>
    </Style>
    <Placemark>
        <name>Name</name>
        <description>Desc Name</description>
        <styleUrl>#style140</styleUrl>
        <Point>
            <coordinates>12.7548360932222,59.2701399304516,0.000000</coordinates>
        </Point>
    </Placemark>
</Document>
</kml>

答案 2 :(得分:0)

这就是我解决问题的方法......希望这会有所帮助。

          var layerData = new OpenLayers.Layer.Vector("test1", {
                renderers: ["SVG", "Canvas", "VML"],
                strategies: [new OpenLayers.Strategy.Save({
                    auto:true
                }),new OpenLayers.Strategy.Cluster({
                    distance: clusteringDistance, 
                    threshold: clusteringThreshold, 
                    shouldCluster: function(cluster, feature) {
                        updateFeatureStyle(feature);
                        if (feature.geometry.CLASS_NAME == "OpenLayers.Geometry.Point" && boundArea >= maxBoundAreaForClustering) {
                            return OpenLayers.Strategy.Cluster.prototype.shouldCluster.apply(this, arguments);
                        } else {
                            return false;
                        }
                    }
                })],
                styleMap: clusterStyle                              
            });
            blankLayer = true;   
            layerData.setVisibility(false);                                     

function updateFeatureStyle(feature) {
    feature.style.label = "\n\n " + feature.attributes.name;            
    feature.style.labelAlign = 'ct';
    feature.style.fontColor = 'red';
    feature.style.fontFamily = 'Arial';
    feature.style.fontSize = '10px';
    feature.style.fontOpacity = 1;
    feature.style.graphicTitle = feature.attributes.name;                           
}