使用 JavaScript 更改 KML 地标颜色

Question

你好 Stack Overflow 的人！！

老实说，我不知道是否有办法做到这一点，但我希望有办法，因为替代方案更加复杂，而且我不确定如何实现。目前，我在一个页面上运行了一个 Google 地球插件，并带有一些其他控件。该页面应该显示一个图表，其中包含调制解调器的延迟和信噪比数据，以及一个包含大量附加信息的网格，以帮助我的 ISP 在解决调制解调器故障时做得更好。

我的问题是：在 JavaScript 中有没有一种方法可以修改 Google 地球地标的颜色而不会弄乱 KML？

我知道您可以在 KML 中执行类似的操作

<Style id="normalPlacemark">
  <IconStyle>
    <color>ffffff00</color>
    <scale>5</scale>
    <Icon>
      <href>http://maps.google.com/mapfiles/kml/pushpin/wht-pushpin.png</href>
    </Icon>
  </IconStyle>
</Style>

但我一直无法使用 C# 或 JavaScript 中的 AddKMLFromString() 将其附加到整个 XML 中的正确位置（我真的不熟悉）以使页面识别它。

这是我目前正在使用的修改后的插件代码：

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
    var ge;
    google.load("earth", "1");

    //Create an instance of the Earth
    function init() {
        google.earth.createInstance('gmap', initCallback, failureCallback);
    }

    function initCallback(pluginInstance) {
        ge = pluginInstance;
        ge.getWindow().setVisibility(true);

        //URL for KML file which is taken directly from Google
        //The KML in question is Google's giant file for weather data
        var href = 'aurlwherewetherdatalives.kml';

        //Use Google's fetch KML method to get the weather KML file and add it to our plugin's instance
        google.earth.fetchKml(ge, href, function (kmlObject) {
            if (kmlObject) {
                ge.getFeatures().appendChild(kmlObject);
            }
            if (kmlObject.getAbstractView() !== null)
                ge.getView().setAbstractView(kmlObject.getAbstractView());
        });

        //Turn on Country Borders, States, and Cities
        ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);

        //By default, remoteExists uses True where JavaScript wants true
        var jsRemoteExists = <%= remoteExists.ToString().ToLower() %>;

        //If the remote exists, create a placemark and camera at its location using the
        //the latitude and longitude variables retreived in the c#
        if (jsRemoteExists)
            {
                //Variables have been created
                var lat = <%= CSHARPLat %>;
                var lon = <%= CSHARPLong %>;



                ge.getWindow().setVisibility(true);

                // Create the placemark and add it to Earth.
                var placemark = ge.createPlacemark('');

                // Set the placemark's location.  
                var point = ge.createPoint('');
                point.setLatitude(lat);
                point.setLongitude(lon);
                placemark.setGeometry(point);

                // Add the placemark to Earth.
                ge.getFeatures().appendChild(placemark);

                var la = ge.createLookAt('');
                la.setLatitude(lat);
                la.setLongitude(lon);
                la.setRange(150000);
                ge.getView().setAbstractView(la);
        }

    }
    function failureCallback(errorCode) {
    }

    function addKmlFromString(kmlString) {
        var kmlObject = ge.parseKml(kmlString);

        ge.getFeatures().appendChild(kmlObject);
    }


    window.onload = init();
</script>

在后面的 C# 代码中找到将上面的 KML 添加到字符串并找到合适的位置来添加样式会更好吗？我一直在倾注谷歌的 API 并试图将它添加到不同的地方，大多数时候它只是中断并且不显示天气数据或地标。最终目标是根据遥控器是标称、处于警报还是处于警告状态来更改地标的颜色。我已经在这里和谷歌上寻找答案，但在 JS 中似乎没有做任何事情，而且我似乎无法以正确的方式附加 KML 以使其更改地标颜色。有人有什么想法吗？

Answer 1

我最终还是自己解决了这个问题。希望任何寻找答案的人都可以在这里找到答案。

我看到很多建议根据样式将图像换成不同颜色的东西，但找不到任何描述如何操作的地方。原因是 JavaScript 隐藏在不知名的地方。谷歌的 API 有时可能……不是非常用户友好。所以，可搜索的更好，对吧？我希望这会对某人有所帮助。

在 C# 中，我有一个带有链接（绝对路径，因为本地人不想工作）的 switch 语句，指向我存储图像并将其传递给 JavaScript 的地方：

var statusURL = '<%= CSHARPstatusURL %>';

稍后，您可能需要调整位置，这样您就不会像我一样隐藏任何其他图层，因为我是动态生成 KML，您需要这些方便的小线条：

        // Define a custom icon.
        var icon = ge.createIcon('');
        icon.setHref(statusURL);

        var style = ge.createStyle(''); //create a new style
        style.getIconStyle().setIcon(icon); //apply the icon to the style
        style.getIconStyle().setScale(1.5); //set the icon's size
        placemark.setStyleSelector(style); //apply the style to the placemark

这将允许您创建图标样式，这是我一直希望的原始方式。为自己创建一些图像并在 GIMP 中修改颜色饱和度或其他东西，你就可以开始了。干杯！