天地图整理
天地图1
<!DOCTYPE html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8"/> <meta name="keywords" content="天地图"/> <title>天地图－地图API－范例－信息窗口</title> <script type="text/javascript" src="http://api.tianditu.com/js/maps.js"></script> <script> var map; var zoom = 12; function onLoad() { var points = []; //初始化地图对象 map=new TMap("mapDiv"); //设置显示地图的中心点和级别 map.centerAndZoom(new TLngLat(117, 36.7,),zoom); //允许鼠标双击放大地图 map.enableHandleMouseScroll(); //创建图片对象 var icon = new TIcon("http://api.tianditu.com/img/map/markerA.png",new TSize(19,27),{anchor:new TPixel(9,27)}); //第一个点 //向地图上添加自定义标注 points.push(new TLngLat(117, 36.7)); var marker = new TMarker(new TLngLat(117, 36.7),{icon:icon}); map.addOverLay(marker); TEvent.addListener(marker,"click",function(p){ //创建信息窗口对象 var infoWin=new TInfoWindow(new TLngLat(117, 36.7),new TPixel([0,-34])); //设置信息窗口要显示的内容 infoWin.setLabel("添加的信息窗口"); //向地图上添加信息窗口 map.addOverLay(infoWin); }); //第二个点 var marker2 = new TMarker(new TLngLat(117.2, 36.3),{icon:icon}); map.addOverLay(marker2); points.push(new TLngLat(117.2, 36.3)); TEvent.addListener(marker2,"click",function(p){ //创建信息窗口对象 var infoWin=new TInfoWindow(new TLngLat(117.2, 36.3),new TPixel([0,-34])); //设置信息窗口要显示的内容 infoWin.setLabel("<span style='color:red'>添加<span>"); //向地图上添加信息窗口 map.addOverLay(infoWin); }); alert(points); //创建线对象 var line = new TPolyline(points,{strokeColor:"red", strokeWeight:5, strokeOpacity:1}); //向地图上添加线 map.addOverLay(line); } </script> </head> <body onLoad="onLoad()"> <div id="mapDiv" style="position:absolute;width:600px; height:500px"></div> <div style="position:absolute;left:620px;"> <ul> <li>本示例演示如何在地图上显示一个信息浮窗。</li> <p><a href="http://lbs.tianditu.com/api-new/examples.html">返回所有范例列表</a></p> </ul> </div> </body> </html>
天地图备份
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta name="keywords" content="天地图"/>
<title>天地图－地图API－范例－信息窗口</title>
<script type="text/javascript" src="http://api.tianditu.com/js/maps.js"></script>
<script>
var map;
var zoom = 12;
function onLoad()
{ var points = [];
//初始化地图对象
map=new TMap("mapDiv");
//设置显示地图的中心点和级别
map.centerAndZoom(new TLngLat(117, 36.7,),zoom);
//允许鼠标双击放大地图
map.enableHandleMouseScroll();
//创建图片对象
var icon = new TIcon("http://api.tianditu.com/img/map/markerA.png",new TSize(19,27),{anchor:new TPixel(9,27)});
//第一个点
//向地图上添加自定义标注
var lnglat=new TLngLat(117, 36.7);
points.push(lnglat);
var marker = new TMarker(new TLngLat(117, 36.7),{icon:icon});
map.addOverLay(marker);
TEvent.addListener(marker,"click",function(p){
//创建信息窗口对象
var infoWin=new TInfoWindow(lnglat,new TPixel([0,-34]));
//设置信息窗口要显示的内容
infoWin.setLabel("添加的信息窗口");
//向地图上添加信息窗口
map.addOverLay(infoWin);
});
//第二个点
var marker2 = new TMarker(new TLngLat(117.2, 36.3),{icon:icon});
map.addOverLay(marker2);
var lnglat1=new TLngLat(117.2, 36.3);
points.push(lnglat1);
TEvent.addListener(marker2,"click",function(p){
//创建信息窗口对象
var infoWin=new TInfoWindow(lnglat1,new TPixel([0,-34]));
//设置信息窗口要显示的内容
infoWin.setLabel("添加");
//向地图上添加信息窗口
map.addOverLay(infoWin);
});
alert(points);
//创建线对象
var line = new TPolyline(points,{strokeColor:"red", strokeWeight:5, strokeOpacity:1});
//向地图上添加线
map.addOverLay(line);
}
</script>
</head>
<body onLoad="onLoad()">
<div id="mapDiv" style="position:absolute;width:600px; height:500px"></div>
<div style="position:absolute;left:620px;">
<ul>
<li>本示例演示如何在地图上显示一个信息浮窗。</li>
<p><a href="http://lbs.tianditu.com/api-new/examples.html">返回所有范例列表</a></p>
</ul>
</div>
</body>
</html>
山东地图
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="天地图山东" />
<title>天地图山东地图API－示例－轨迹运动</title>
<script src="http://www.sdmap.gov.cn/api/olapi/js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://www.sdmap.gov.cn/api/olapi/ol/openlayers.js"></script>
<style type="text/css">
body{width: 100%;height: 100%;position: absolute;margin: 0;}
#outter{height: 100%}
#mapDiv{height: 100%;width: 100%}
#describediv {
line-height: 26px;
padding: 10px;
font-size: 13px;
background-color: #FFF;
background-position: bottom left;
background-repeat: repeat-x;
background-image: url("http://www.sdmap.gov.cn/api/olapi/images/describebac.jpg");
border: solid 1px #808080;
display: block;
position: absolute;
right: 36px;
top: 60px;
width: 260px;
z-index: 1001;
overflow-y: auto;
-webkit-box-shadow: #4E4B4B 0px 3px 6px;
-moz-box-shadow: #4E4B4B 0px 3px 6px;
box-shadow: #4E4B4B 0px 3px 6px;
z-index: 1003;
}
#reback{position: absolute;bottom: 10px;right: 100px;z-index: 1002;}
#reback a{background-color: #7D7D7D; padding: 10px;color: #FFF;}
</style>
<script type="text/javascript">
//定义地图对象
var map;
var moving;
var points;
$(function () {
map = new OpenLayers.Map("mapDiv", {
allOverlays: true,
numZoomLevels: 19,
displayProjection: "EPSG:4490",
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.ArgParser(),
new OpenLayers.Control.Attribution()]
});
map.addLayer(new SDTDTLayer());
map.setCenter(new OpenLayers.LonLat(117.024, 36.6878), 11);
//创建矢量图层
var graphicLayer = new OpenLayers.Layer.Vector("graphicLayer", { style: OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']) });
map.addLayer(graphicLayer);
//创建选择控件
selectControl = new OpenLayers.Control.SelectFeature([graphicLayer]);
map.addControl(selectControl);
selectControl.activate();
//线
var line = new OpenLayers.Geometry.LineString([
new OpenLayers.Geometry.Point(116.895, 36.6513),
new OpenLayers.Geometry.Point(116.972, 36.773),
new OpenLayers.Geometry.Point(117.089212, 36.65343),
new OpenLayers.Geometry.Point(117.466312, 36.73743)
]);
//添加点
//点
var style = {
externalGraphic: 'A.png',
graphicWidth: 20,
graphicHeight: 34
};
//点可以放在循环里面1
var pt = new OpenLayers.Geometry.Point(116.895, 36.6513);
var feature = new OpenLayers.Feature.Vector(pt, null, style);
graphicLayer.addFeatures([feature]);
graphicLayer.events.on({ "featureselected": featureSelected });
function featureSelected(fea) {
selectControl.unselectAll();
}
//图
var popup = new OpenLayers.Popup.FramedCloud("xx", new OpenLayers.LonLat(116.895, 36.6513),
null, "<div><div style='padding: 0 15px'>添加的信息窗口</div></div>", null, true);
map.addPopup(popup);
//点可以放在循环里面2
var pt = new OpenLayers.Geometry.Point(116.972, 36.773);
var feature = new OpenLayers.Feature.Vector(pt, null, style);
graphicLayer.addFeatures([feature]);
var popup = new OpenLayers.Popup.FramedCloud("xx", new OpenLayers.LonLat(116.972, 36.773),
null, "<div><div style='padding: 0 15px'>添加的信息窗口</div></div>", null, true);
map.addPopup(popup);
//点二3
var pt = new OpenLayers.Geometry.Point(117.089212, 36.65343);
var feature = new OpenLayers.Feature.Vector(pt, null, style);
graphicLayer.addFeatures([feature]);
//点三4
var pt = new OpenLayers.Geometry.Point(117.466312, 36.73743);
var feature = new OpenLayers.Feature.Vector(pt, null, style);
graphicLayer.addFeatures([feature]);
/* vectors.addFeatures([feature]);*/
var style = {
strokeColor: "#00ff00",
strokeWidth: 2,
strokeDashstyle: "dash"
};
var feature = new OpenLayers.Feature.Vector(line, null, style);
graphicLayer.addFeatures([feature]);
var graphic = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(116.895, 36.6513), null,
{ externalGraphic: 'http://www.sdmap.gov.cn/api/olapi/images/car.png', graphicWidth: 25, graphicHeight: 51 });
graphicLayer.addFeatures(graphic);
document.getElementById("openTool").onclick = function () {
points = line.getVertices();
graphic.geometry.x = points[0].x;
graphic.geometry.y = points[0].y;
graphicLayer.redraw();
move(0, 1);
};
document.getElementById("closeTool").onclick = function () {
clearInterval(moving);
};
///根据序列点坐标 进行移动
function move(start, end) {
var x1 = points[start].x;
var y1 = points[start].y;
var x2 = points[end].x;
var y2 = points[end].y;
var p = (y2 - y1) / (x2 - x1); //斜率
var v = 0.01; //速度
moving = setInterval(function () {
//分别计算 x,y轴方向速度
if (Math.abs(p) == Number.POSITIVE_INFINITY) //无穷大
graphic.geometry.y += v;
else {
graphic.geometry.x += (1 / Math.sqrt(1 + p * p)) * v;
graphic.geometry.y += (p / Math.sqrt(1 + p * p)) * v;
}
//计算汽车角度
graphic.style.rotation = (Math.PI / 2 - Math.atan(p)) * 180 / Math.PI;
//图层刷新
// map.graphics.redraw();
graphicLayer.redraw();
if (Math.abs(graphic.geometry.x - x2) < 0.01 && Math.abs(graphic.geometry.y - y2) < 0.01) {
clearInterval(moving);
start++;
end++;
if (end < points.length)
move(start, end);
}
}, 50);
}
});
</script>
</head>
<body>
<div id="outter">
<div id="mapDiv">
</div>
<div id="describediv">
本示例演示标注点沿着轨迹移动的功能。点击“开启”按钮，地图上的小车将沿着轨迹运动<br />
<input type="button" id="openTool" value="开启" />
<input type="button" id="closeTool" value="关闭" />
</div>
<div id="close">
</div>
<p id="reback"><a href="http://sdmap.gov.cn/API/olapi/api.html?index=1">返回所有范例列表</a></p> </div></body>
</html>
qqq
<!doctype html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<meta name="keywords" content="天地图山东" />
<title>天地图山东地图API－示例－轨迹运动</title>
<script src="http://www.sdmap.gov.cn/api/olapi/js/jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="http://www.sdmap.gov.cn/api/olapi/ol/openlayers.js"></script>
<style type="text/css">
body{width: 100%;height: 100%;position: absolute;margin: 0;}
#outter{height: 100%}
#mapDiv{height: 100%;width: 100%}
#describediv {
line-height: 26px;
padding: 10px;
font-size: 13px;
background-color: #FFF;
background-position: bottom left;
background-repeat: repeat-x;
background-image: url("http://www.sdmap.gov.cn/api/olapi/images/describebac.jpg");
border: solid 1px #808080;
display: block;
position: absolute;
right: 36px;
top: 60px;
width: 260px;
z-index: 1001;
overflow-y: auto;
-webkit-box-shadow: #4E4B4B 0px 3px 6px;
-moz-box-shadow: #4E4B4B 0px 3px 6px;
box-shadow: #4E4B4B 0px 3px 6px;
z-index: 1003;
}
#reback{position: absolute;bottom: 10px;right: 100px;z-index: 1002;}
#reback a{background-color: #7D7D7D; padding: 10px;color: #FFF;}
</style>
<script type="text/javascript">
//定义地图对象
var map;
var moving;
var points;
$(function () {
map = new OpenLayers.Map("mapDiv", {
allOverlays: true,
numZoomLevels: 19,
displayProjection: "EPSG:4490",
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.ArgParser(),
new OpenLayers.Control.Attribution()]
});
map.addLayer(new SDTDTLayer());
map.setCenter(new OpenLayers.LonLat(117.024, 36.6878), 11);
//创建矢量图层
var graphicLayer = new OpenLayers.Layer.Vector("graphicLayer", { style: OpenLayers.Util.extend({}, OpenLayers.Feature.Vector.style['default']) });
map.addLayer(graphicLayer);
//创建选择控件
selectControl = new OpenLayers.Control.SelectFeature([graphicLayer]);
map.addControl(selectControl);
selectControl.activate();
//线
var line = new OpenLayers.Geometry.LineString([
new OpenLayers.Geometry.Point(116.895, 36.6513),
new OpenLayers.Geometry.Point(116.972, 36.773),
new OpenLayers.Geometry.Point(117.089212, 36.65343),
new OpenLayers.Geometry.Point(117.466312, 36.73743)
]);
//添加点
//点
var style = {
externalGraphic: 'A.png',
graphicWidth: 20,
graphicHeight: 34
};
//点可以放在循环里面1
var pt = new OpenLayers.Geometry.Point(116.895, 36.6513);
var feature = new OpenLayers.Feature.Vector(pt, null, style);
graphicLayer.addFeatures([feature]);
graphicLayer.events.on({ "featureselected": featureSelected });
function featureSelected(fea) {
selectControl.unselectAll();
}
//图
var popup = new OpenLayers.Popup.FramedCloud("xx", new OpenLayers.LonLat(116.895, 36.6513),
null, "<div><div style='padding: 0 15px'>添加的信息窗口</div></div>", null, true);
map.addPopup(popup);
//点可以放在循环里面2
var pt = new OpenLayers.Geometry.Point(116.972, 36.773);
var feature = new OpenLayers.Feature.Vector(pt, null, style);
graphicLayer.addFeatures([feature]);
var popup = new OpenLayers.Popup.FramedCloud("xx", new OpenLayers.LonLat(116.972, 36.773),
null, "<div><div style='padding: 0 15px'>添加的信息窗口</div></div>", null, true);
map.addPopup(popup);
//点二3
var pt = new OpenLayers.Geometry.Point(117.089212, 36.65343);
var feature = new OpenLayers.Feature.Vector(pt, null, style);
graphicLayer.addFeatures([feature]);
//点三4
var pt = new OpenLayers.Geometry.Point(117.466312, 36.73743);
var feature = new OpenLayers.Feature.Vector(pt, null, style);
graphicLayer.addFeatures([feature]);
/* vectors.addFeatures([feature]);*/
var style = {
strokeColor: "#00ff00",
strokeWidth: 2,
strokeDashstyle: "dash"
};
var feature = new OpenLayers.Feature.Vector(line, null, style);
graphicLayer.addFeatures([feature]);
var graphic = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(116.895, 36.6513), null,
{ externalGraphic: 'http://www.sdmap.gov.cn/api/olapi/images/car.png', graphicWidth: 25, graphicHeight: 51 });
graphicLayer.addFeatures(graphic);
document.getElementById("openTool").onclick = function () {
points = line.getVertices();
graphic.geometry.x = points[0].x;
graphic.geometry.y = points[0].y;
graphicLayer.redraw();
move(0, 1);
};
document.getElementById("closeTool").onclick = function () {
clearInterval(moving);
};
///根据序列点坐标 进行移动
function move(start, end) {
var x1 = points[start].x;
var y1 = points[start].y;
var x2 = points[end].x;
var y2 = points[end].y;
var p = (y2 - y1) / (x2 - x1); //斜率
var v = 0.01; //速度
moving = setInterval(function () {
//分别计算 x,y轴方向速度
if (Math.abs(p) == Number.POSITIVE_INFINITY) //无穷大
graphic.geometry.y += v;
else {
graphic.geometry.x += (1 / Math.sqrt(1 + p * p)) * v;
graphic.geometry.y += (p / Math.sqrt(1 + p * p)) * v;
}
//计算汽车角度
graphic.style.rotation = (Math.PI / 2 - Math.atan(p)) * 180 / Math.PI;
//图层刷新
// map.graphics.redraw();
graphicLayer.redraw();
if (Math.abs(graphic.geometry.x - x2) < 0.01 && Math.abs(graphic.geometry.y - y2) < 0.01) {
clearInterval(moving);
start++;
end++;
if (end < points.length)
move(start, end);
}
}, 50);
}
});
</script>
</head>
<body>
<div id="outter">
<div id="mapDiv">
</div>
<div id="describediv">
本示例演示标注点沿着轨迹移动的功能。点击“开启”按钮，地图上的小车将沿着轨迹运动<br />
<input type="button" id="openTool" value="开启" />
<input type="button" id="closeTool" value="关闭" />
</div>
<div id="close">
</div>
<p id="reback"><a href="http://sdmap.gov.cn/API/olapi/api.html?index=1">返回所有范例列表</a></p> </div></body>
</html>
浙公网安备 33010602011771号