使用Openlayers从外部KML文件在openstreetmap中显示地标名称

Question

我正在尝试加载特定状态的KML文件并显示其名称的县。我使用以下代码。

 map = new OpenLayers.Map({
            div: "map_canvas",
            allOverlays: true
        });

        var osm = new OpenLayers.Layer.OSM();
        var styleMap = new OpenLayers.StyleMap({'default':{
            label : "${name}"

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

            })
        });



        map.addLayers([osm,sundials]);

        map.addControl(new OpenLayers.Control.LayerSwitcher());

        map.setCenter(new OpenLayers.LonLat(0, 0), 3);

现在正确显示KML文件，但未显示县名。（附上结果图片）！

XML文件看起来像

<Document>
        <name>United States Counties</name>
        <Style id='Style3-polygon-1'>
            <LabelStyle>
                <scale>0.8</scale>
            </LabelStyle>
            <LineStyle>
                <color>ffa8d7b6</color>
                <width>1</width>
            </LineStyle>
            <PolyStyle>
                <color>ff29c773</color>
            </PolyStyle>
            <BalloonStyle>
                <text>$[description]</text>
            </BalloonStyle>
        </Style>
        <Style id='Style3-polygon-1-hover'>
            <LineStyle>
                <color>ffa8d7b6</color>
                <width>1</width>
            </LineStyle>
            <PolyStyle>
                <color>ff29c773</color>
            </PolyStyle>
            <BalloonStyle>
                <text>$[description]</text>
            </BalloonStyle>
        </Style>
        <StyleMap id='Style3-polygon-1-map'>
            <Pair>
                <key>normal</key>
                <styleUrl>#Style3-polygon-1</styleUrl>
            </Pair>
            <Pair>
                <key>highlight</key>
                <styleUrl>#Style3-polygon-1-hover</styleUrl>
            </Pair>
        </StyleMap>
        <Placemark>
            <name>Aitkin</name>
            <snippet></snippet>
            <description><![CDATA[<div>
MN-Aitkin
</div>]]></description>
            <styleUrl>#Style3-polygon-1-map</styleUrl>
            <ExtendedData>
                <Data name='State Abbr.'>
                    <value>MN-Aitkin</value>
                </Data>
                <Data name='County Name'>
                    <value>mn</value>
                </Data>
                <Data name='State-County'>
                    <value>MN</value>
                </Data>
                <Data name='value'>
                    <value>526.0226226</value>
                </Data>
                <Data name='GEO_ID'>
                    <value>05000US27001</value>
                </Data>
                <Data name='GEO_ID2'>
                    <value>27001</value>
                </Data>
                <Data name='Geographic Name'>
                    <value>Aitkin County, Minnesota</value>
                </Data>
                <Data name='STATE num'>
                    <value>27</value>
                </Data>
                <Data name='COUNTY num'>
                    <value>1</value>
                </Data>
                <Data name='FIPS formula'>
                    <value>27001.0</value>
                </Data>
                <Data name='Has error'>
                    <value></value>
                </Data>
            </ExtendedData><Polygon><outerBoundaryIs><LinearRing><coordinates>-93.05408,46.20649 -93.05421,46.20823 -93.05419,46.20965 -93.05412,46.21283 -93.05409,46.2138 -93.05403,46.21847 -93.054,46.2261 -93.05412,46.24161 -93.05419,46.24676 -93.0541,46.26842 -93.05407,46.28187 -93.0538,46.31176 -93.05374,46.32576 -93.05378,46.32944 -93.05371,46.33036 -93.05376,46.33888 -93.05407,46.36721 -93.05412,46.3804 -93.05418,46.38731 -93.05473,46.4148 -93.05485,46.41927 -93.05489,46.42117 -93.05533,46.43976 -93.05533,46.44373 -93.05531,46.45141 -93.05525,46.46333 -93.05529,46.47313 -93.05536,46.52685 -93.05541,46.53137 -93.05551,46.5389 -93.05575,46.56708 -93.05481,46.59258 -93.06371,46.62103 -93.06388,46.62991 -93.06377,46.63054 -93.06385,46.63295 -93.06447,46.6547 -93.0648,46.67386 -93.0647,46.68015 -93.06454,46.68285 -93.06459,46.68415 -93.06442,46.68815 -93.06414,46.6919 -93.0638,46.69672 -93.0635,46.70887 -93.06286,46.7377 -93.06179,46.76189 -93.06153,46.76655 -93.06153,46.7666 -93.06113,46.78424 -93.06103,46.78869 -93.06101,46.78939 -93.06083,46.79786 -93.05986,46.8421 -93.05947,46.85365 -93.05932,46.85812 -93.05894,46.86951 -93.05884,46.87494 -93.05894,46.88162 -93.05893,46.88191 -93.05889,46.88584 -93.05875,46.8944 -93.05861,46.89914 -93.05827,46.9106 -93.05826,46.91086 -93.05798,46.92368 -93.0579,46.93014 -93.05777,46.93965 -93.05756,46.94973 -93.057,46.98125 -93.05672,46.99994 -93.05658,47.00732 -93.05629,47.0161 -93.05601,47.0244 -93.05594,47.02641 -93.056,47.02641 -93.07411,47.02637 -93.09664,47.02632 -93.17387,47.02546 -93.18728,47.02525 -93.23808,47.02615 -93.25289,47.02641 -93.27663,47.02684 -93.28055,47.02691 -93.28582,47.02701 -93.29009,47.02719 -93.29575,47.02742 -93.30887,47.02797 -93.32855,47.02827 -93.43947,47.02838 -93.56249,47.02944 -93.57709,47.02941 -93.58646,47.02954 -93.59338,47.02966 -93.59822,47.02955 -93.60745,47.0295 -93.62885,47.02934 -93.6533,47.02898 -93.66564,47.02902 -93.67942,47.02914 -93.76285,47.03025 -93.77526,47.03042 -93.77528,47.02869 -93.77492,47.00431 -93.77477,46.98089 -93.77487,46.97538 -93.77503,46.96505 -93.77511,46.95953 -93.77521,46.95727 -93.77521,46.95458 -93.77522,46.95212 -93.77521,46.94862 -93.77525,46.9432 -93.77517,46.93924 -93.77508,46.93543 -93.77502,46.93207 -93.77497,46.92857 -93.77489,46.91516 -93.77508,46.88938 -93.77516,46.88185 -93.77525,46.87495 -93.77531,46.86655 -93.77536,46.86175 -93.77552,46.85637 -93.77555,46.85117 -93.77555,46.84822 -93.77586,46.81778 -93.77601,46.80405 -93.77602,46.80289 -93.77685,46.77329 -93.77714,46.73442 -93.77803,46.67766 -93.77829,46.63291 -93.77821,46.6137 -93.77791,46.59013 -93.79094,46.58774 -93.8028,46.58513 -93.81137,46.56775 -93.81092,46.55284 -93.81076,46.53363 -93.8114,46.51584 -93.81217,46.50219 -93.81169,46.48339 -93.81117,46.45739 -93.81078,46.44177 -93.81015,46.41986 -93.81018,46.41236 -93.81019,46.40837 -93.8103,46.4021 -93.81061,46.34182 -93.81067,46.31164 -93.81042,46.25105 -93.80718,46.24811 -93.80691,46.24797 -93.79946,46.24878 -93.79628,46.2432 -93.79615,46.2432 -93.75984,46.24373 -93.72728,46.24409 -93.70808,46.24442 -93.70126,46.24453 -93.69065,46.24468 -93.68406,46.24478 -93.66084,46.24512 -93.63685,46.24555 -93.62916,46.2456 -93.54353,46.24701 -93.5268,46.24713 -93.505,46.24693 -93.49318,46.24678 -93.43065,46.24641 -93.43047,46.23706 -93.43042,46.23021 -93.43044,46.22114 -93.43011,46.20857 -93.42982,46.19637 -93.4296,46.1832 -93.42989,46.17337 -93.43016,46.16611 -93.43034,46.16178 -93.43129,46.15656 -93.43182,46.15418 -93.43183,46.15399 -93.42058,46.15427 -93.40637,46.15462 -93.38262,46.1557 -93.3268,46.15804 -93.30847,46.15886 -93.30489,46.15891 -93.28945,46.1593 -93.27752,46.15939 -93.2729,46.15937 -93.26847,46.15939 -93.26439,46.15946 -93.25833,46.15921 -93.23084,46.15876 -93.17898,46.15855 -93.15425,46.15833 -93.13983,46.15824 -93.13535,46.15822 -93.12296,46.15829 -93.11547,46.1584 -93.10791,46.15838 -93.10298,46.15835 -93.09377,46.15833 -93.08377,46.15831 -93.07403,46.15829 -93.06795,46.1583 -93.05528,46.15827 -93.05387,46.15812 -93.05387,46.15821 -93.05388,46.16661 -93.05404,46.18284 -93.05417,46.18951 -93.05419,46.19383 -93.05421,46.19823</coordinates></LinearRing></outerBoundaryIs></Polygon></Placemark>
        <Style id='Style3-polygon-2'>

如何在地图上显示各县的名称？

Answer 1

我认为你也需要一个背景：

var styleMap = new OpenLayers.StyleMap({
    "default": new OpenLayers.Style({
        label: "${label}"
    }, {
        context: {
            label: function (feature) {
                return feature.attributes.name;
            }
        }
    })
});