google earth 加载kml文档

最新推荐文章于 2023-03-28 16:06:31 发布

iteye_5378

最新推荐文章于 2023-03-28 16:06:31 发布

阅读量538

点赞数

分类专栏： GoogleEarth 文章标签： Google Dojo Ajax CSS C

GoogleEarth 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

最近在研究google maps api 发现google 还是很强大的吗。分享一个用google earth加载kml的代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Earth API - KML DOM Tree</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAARC7PH2j-iFdDFh-hFqsjcxR3cJ6aT3OxndQgjnI_aT33JlI0aBRGCqXJ5SgG_ejRC1BdQm--hPcxHg"></script>
<script type="text/javascript" src="js/poly-hack.js"></script>
<script type="text/javascript" src="js/kmlwalk.js"></script>
<style type="text/css">
@import "http://ajax.googleapis.com/ajax/libs/dojo/1.2.3/dijit/themes/tundra/tundra.css";
@import "http://ajax.googleapis.com/ajax/libs/dojo/1.2.3/dojo/resources/dojo.css";
</style>

<style type="text/css">@import "css/index.css";</style>
<script type="text/javascript">
// <![CDATA[

djConfig = { parseOnLoad: true };
google.load('dojo', '1.2.3');

google.load('maps', '2');
google.load('earth', '1');

var g_ge;
var g_earthDisabled = false;
var g_kmlObject;

google.setOnLoadCallback(function() {
dojo.require('dijit.layout.BorderContainer');
dojo.require('dijit.layout.SplitContainer');
dojo.require('dijit.layout.ContentPane');
dojo.require('dijit.Tree');
//dojo.require('dijit.CheckboxTree');
dojo.require("dijit.form.CheckBox");
dojo.require('dijit.form.Button');
dojo.require('dijit.form.TextBox');

dojo.require('dojo.data.ItemFileWriteStore');

dojo.require('dojo.parser');
dojo.require('dojo.cookie');
dojo.require('dojo.fx');

dojo.addOnLoad(function() {
// load checkboxtree
var scpt = document.createElement('script');
scpt.src = 'js/CheckboxTree.js';
document.body.appendChild(scpt);

dijit.byId('load-button').setDisabled(true);
// build earth
google.earth.createInstance(
'map3d',
function(ge) {
g_ge = ge;
g_ge.getWindow().setVisibility(true);
g_ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);
g_ge.getLayerRoot().enableLayerById(g_ge.LAYER_BORDERS, true);
g_ge.getLayerRoot().enableLayerById(g_ge.LAYER_BUILDINGS, true);

dijit.byId('load-button').setDisabled(false);
},
function() {
g_earthDisabled = true;
dijit.byId('load-button').setDisabled(true);
});
});
});

var g_treeIdObjectMap = null;

function buildTreeUI(kmlObject) {
delete g_treeIdObjectMap;
g_treeIdObjectMap = {};

var treeData = {
identifier: 'id',
label: 'name',
items: []
};

// walk the loaded KML object DOM
walkKmlDom(kmlObject, function(context) {
// generate a random, unique ID for this node (Dojo requires a unique ID
// per each node)
var nodeId = Number(new Date()).toString() + Math.round(Math.random() * 99999).toString();
g_treeIdObjectMap[nodeId] = this;

// create the tree node for this item
var treeNodeData = {
id: nodeId,
name: (this.getName() ? this.getName() : '<' + this.getType() + '>'),
type: this.getType(),
checked: this.getVisibility(),
children: []
};

// add the tree node to the tree data hierarchy
context.current.push(treeNodeData);

// all actual KML child nodes will be added to this tree node's
// children list
context.child = treeNodeData.children;
}, { rootContext: treeData.items });

if (dijit.byId('tree'))
dijit.byId('tree').destroy();

// create the Dojo tree widget
// and set its data to the hierarchy we just
// built using walkKmlDom
var treeDiv = document.createElement('div');
treeDiv.style.height = '100%';
dojo.byId('left').appendChild(treeDiv);

var store = new dojo.data.ItemFileWriteStore({ data: treeData });

var model = new dijit.tree.CheckboxForestStoreModel({
store: store,
labelAttr: 'name',
typeAttr: 'type'
});

var tree = new dijit.CheckboxTree({
id: 'tree',
model: model
}, treeDiv);

dojo.connect(store, 'onSet', function(item, attribute, oldValue, newValue) {
if (oldValue != newValue &&
attribute == 'checked') {
var kmlObject = g_treeIdObjectMap[store.getValue(item, 'id')];
if (!kmlObject)
return;

kmlObject.setVisibility(newValue);

if (newValue == true) {
var c = kmlObject;
while (c && 'setVisibility' in c) {
c.setVisibility(newValue);
c = c.getParentNode();

}
}
}
});

dojo.connect(tree, 'onClick', function(item) {
if (item) {
var kmlObject = g_treeIdObjectMap[store.getValue(item, 'id')];
if (!kmlObject)
return;

flyToFeature(kmlObject);
}
});

var oldGetIconClass = tree.getIconClass;
tree.getIconClass = function(item, opened) {
var cls = '';
if (item) {
var kmlObject = g_treeIdObjectMap[store.getValue(item, 'id')];
if (kmlObject) {
if ('getGeometry' in kmlObject && kmlObject.getGeometry()) {
cls = kmlObject.getGeometry().getType();
} else {
cls = kmlObject.getType();
}
}
}

return cls + ' ' + oldGetIconClass.apply(tree, [item, opened]);
};

tree.getLabelClass = function(item, opened) {
if (item && tree.model.mayHaveChildren(item)) {
return 'folder';
}

return '';
};

expandTree();
}

function expandTree() {
var tree = dijit.byId('tree');

function expandChildNode(node) {
dojo.forEach(node.getChildren(), function(c) {
tree._expandNode(c);
expandChildNode(c);
}, this);
}

expandChildNode(tree.rootNode);
}

function loadKml() {
var url = dijit.byId('kml-url').getValue();

google.earth.fetchKml(g_ge, url, function(kmlObject) {
if (!kmlObject) {
// show error
setTimeout(function() {
alert('Error loading KML.');
}, 0);
return;
}

if (g_kmlObject)
g_ge.getFeatures().removeChild(g_kmlObject);

g_kmlObject = kmlObject;
g_ge.getFeatures().appendChild(g_kmlObject);
flyToFeature(g_kmlObject);

buildTreeUI(g_kmlObject);
});
}

function flyToFeature(kmlFeature) {
var aspectRatio = dojo.coords('center').w * 1.0 / dojo.coords('center').h;
var lookAt = computeFitLookAt(g_ge, kmlFeature, aspectRatio);
if (lookAt)
g_ge.getView().setAbstractView(lookAt);
}

// ]]>
</script>
</head>
<body class="tundra">
<div id="container" dojoType="dijit.layout.BorderContainer" gutters="false" region="center" style="height: 100%">

<div id="top" dojoType="dijit.layout.ContentPane" region="top">
<h1 style="margin:0; padding:0">
</h1>
<input id="kml-url" dojoType="dijit.form.TextBox" value="http://59.50.128.42/kml/plant/xinzhi/GCA02A000.kml"/>
<button id="load-button" dojoType="dijit.form.Button" οnclick="loadKml();">加载</button>
</div>

<div id="left" dojoType="dijit.layout.ContentPane" region="left"
splitter="true" minsize="200" style="width: 202px; z-index: 101; left: 1px; position: absolute; top: 53px;">

</div>

<div id="center" dojoType="dijit.layout.ContentPane" region="center" style="height: 86%; z-index: 100; left: 228px; width: 686px; position: absolute; top: 52px;">
<div id="map3d" ></div>
</div>

<div id="bottom" dojoType="dijit.layout.ContentPane" region="bottom">
</div>

</div>
</body>
</html>