基于GEPlugin 对google earth 二次开发,实现动态航迹功能
最近一直在研究google earth 的二次开发,我选择了GEPlugin 插件
1.首先要做好准备工作,下载插件和jsapi.js、default.I.js
GEPlugin插件:https://download.csdn.net/download/qq_41164267/10715305
js文件:https://download.csdn.net/download/qq_41164267/10715272
2.安装GEPlugin插件,这个没什么好说的,一直下一步就行
3.下面就是具体代码了
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<!-- <meta http-equiv="X-UA-Compatible"content="IE=11;IE=10;IE=9; IE=8; IE=7; IE=EDGE" /> -->
<style type="text/css">
body,td,th {
margin: 0px;
}
</style>
<script type="text/javascript" src="jsapi.js"> </script>
<script type="text/javascript" src="default.I.js"> </script>
<script type="text/javascript" src="kml.js"> </script>
<script type="text/javascript">
var ge;
var g_crafteObj = null; //�ɻ�ģ��
var g_craftURL = window.location.href;
g_craftURL = g_craftURL.substring(0, g_craftURL.lastIndexOf("/")) + "/res/craft2.dae";
function init(){
google.earth.createInstance('map3d', initCB, failureCB);
}
function initCB(instance){
ge = instance;
ge.getWindow().setVisibility(true);
// add a navigation control
ge.getNavigationControl().setVisibility(ge.VISIBILITY_AUTO);
// add some layers
ge.getLayerRoot().enableLayerById(ge.LAYER_BORDERS, true);
ge.getLayerRoot().enableLayerById(ge.LAYER_ROADS, true);
ge.getLayerRoot().enableLayerById(ge.LAYER_TREES, true);
ge.getLayerRoot().enableLayerById(ge.LAYER_TERRAIN, true);
ge.getOptions().setStatusBarVisibility(true);
//定位地图项
var lat = 30.949932;
var lon = 104.323297;
var alt = 1800;
var la = ge.createLookAt('');
la.set(lat, lon, alt, ge.ALTITUDE_RELATIVE_TO_GROUND, 0, 50,1500);
ge.getView().setAbstractView(la);
//标点
var placemark = ge.createPlacemark('');
// // 设置图标url
placemark.setName("打个点?");
var icon = ge.createIcon('');
icon.setHref('http://maps.google.com/mapfiles/kml/paddle/red-circle.png');
var style = ge.createStyle('');
/style.getIconStyle().setIcon(icon);
// 标点设置大小
style.getIconStyle().setScale(1);
placemark.setStyleSelector(style);
var point = ge.createPoint('');
point.setlatitude( 30.949932);
point.setLongitude( 104.323297);
placemark.setGeometry(point);
ge.getFeatures().appendChild(placemark);
// ge.createFolder("eee");
var chinaNetworkLink = ge.createNetworkLink(ge.LIST_ITEM_CHECK);
chinaNetworkLink.setFlyToView(true);
v2(chinaNetworkLink);
}
function v2(chinaNetworkLink){
//加载kml动画文件
var link2 = ge.createLink("");
link2.setHref( "http://127.0.0.1/chengdu/admin/data/chengdu2/watch.kml" );
chinaNetworkLink.set(link2,true,true);
ge.getFeatures().appendChild(chinaNetworkLink);
}
function failureCB(errorCode){//加载地球出错
}
google.setOnLoadCallback(init);
</script>
</head>
<body>
<div id="map3d" style="margin:0; height: 100%; width: 100%;"></div>
</body>
</html>
以上是web的代码,有一点得说一下,加图片或者kml文件时,必须放在服务器上,否则无法实现,也就是开头是http://
kml文件就不贴出来了,以后会介绍kml的一些规范
效果图: