Question

如何使用javascript显示谷歌地球（KML）文件。

感谢

Answer 1

我假设你想在浏览器中查看KML文件，最好是Mozilla Firefox。首先，我想提供一些我们将在OpenLayers中使用的简单JavaScript。您应该尝试使用它们，因为它也使用JavaScript库。

这里我简要介绍一下如何编写代码。

<html>
<head>
<title>Google Layer with KML file</title>
<link rel="stylesheet" href="http://openlayers.org/api/theme/default/style.css" type="text/css" />
<link rel="stylesheet" href="http://openlayers.org/dev/examples/style.css" type="text/css" />
<script src='http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAl9RMqSzhPUXAfeBCXOussRTQDbvAygy0cfGJr8dEMAYKf3RWNBQqP9mjKIsqTfmAlz5LOJ3Xpy5s4w'></script>
<script src="http://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">

var map;

function init() {
    // Create the map object
    map = new OpenLayers.Map('map');
    // Create a Google layer
    var gmap = new OpenLayers.Layer.Google(
        "Google Streets", // the default
        {numZoomLevels: 20}
    );
    // Add layer to map
    map.addLayer(gmap);

    //Adding KML file to map
    map.addLayer(new OpenLayers.Layer.GML("KML", "kompleks_antarabangsa.kml", 
           {
            format: OpenLayers.Format.KML, 
            formatOptions: {
              extractStyles: true, 
              extractAttributes: true,
              maxDepth: 2
            }
           }));
    // Zoom to Kuala Lumpur, Malaysia
    map.setCenter(new OpenLayers.LonLat(101.686855,3.139003), 13);         
}
</script>
</head>
<body onload="init()">
<h1 id="title">Google Layer with KML file</h1>
<div id="map" style='width: 700px; height: 700px'></div>
</body>
</html>

如您所见，地图上有一个小橙点。这是在Google地图上加载的KML文件。

使用任何软件尝试并运行HTML代码。但是，我建议你使用Notepad ++。最后但并非最不重要的是，我希望我的答案对你来说为时已晚， Kyathi 。

Answer 2

//do axis call to the data url 
// parse the records to get the point and additional data 
//plot like this 
var features_1 = new Array(records.length -1);
    for (var i = 1; i < records.length; i++) {
      var coordinates = transform([  records[i][9], records[i][8]], 'EPSG:4326', 'EPSG:3857');
      features_1[i-1] = new Feature( {
        geometry: new Point(coordinates ),
        name: records[i][6],
        Magnitude: dat[i][dat[0].length -1],
        size : dat[i][dat[0].length -1]
      }) ;

  }
  var source = new VectorSource({
  features: features_1
  });

  var clusterSource = new Cluster({
    distance: 30,
    source: source
  });


vector = new VectorLayer({
  source: clusterSource,
  style: styleFunction
});

var raster = new TileLayer({
  source: new Stamen({
    layer: 'toner'
  })
});

var map = new Map({
  layers: [raster, vector],
  interactions: defaultInteractions().extend([new Select({
    condition: function(evt) {
      return evt.type == 'pointermove' ||
          evt.type == 'singleclick';
    },
    style: selectStyleFunction
  })]),
  target: 'map',
  view: new View({
    center: [0, 0],
    zoom: 2
  })
});

//

如何使用javascript显示KML文件

2 个答案: