天地图-第六篇-图形绘制
作者：互联网
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>天地图</title>
<style>
/*设置地图显示大小*/
#mapDiv{
width: 600px;
height: 400px;
position: relative;
float: left;
}
</style>
</head>
<body onl oad="onLoad()">
<!--地图容器-->
<div id="mapDiv"></div>
<div>
<span>操作</span>
<input type="button" onClick="drawMarker()" value="绘制点"/>
<input type="button" onClick="drawLine()" value="绘制线"/>
<input type="button" onClick="drawRectangle()" value="绘制矩形"/>
<input type="button" onClick="drawPolygon()" value="绘制多边形"/>
<input type="button" onClick="drawCircle()" value="绘制圆形"/>
<input type="button" onClick="drawRanging()" value="测距"/>
<input type="button" onClick="drawPolygonTool()" value="测面"/>
<input type="button" onClick="getDrawNumber()" value="获取图层个数"/>
<p>说明： 测距出现的点 框 和 线都属于图层 故一条线 + 俩个点 +连个点的说明 总共5个图层 </p>
<p>测面 是 面和 说明 共俩个图层</p>
</div>
</body>
<script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=你的密钥"></script>
<script type="text/javascript">
var map;
var zoom = 12;
function onl oad() {
map = new T.Map('mapDiv');
map.centerAndZoom(new T.LngLat(116.40769, 39.89945), zoom);
}
//绘制标注(点)
function drawMarker(){
var markerTool = new T.MarkTool(map, {follow: true});
map.clearOverLays();
markerTool.open();
//绑定mouseup事件 在用户每完成一次标注时触发事件。
markerTool.addEventListener("mouseup",getPoints1);
}
function getPoints1(e){
var points = e.currentLnglat;
//标注点的坐标
console.log(points);
}
//绘制线
function drawLine(){
var PolylineTool = new T.PolylineTool(map);
map.clearOverLays();
PolylineTool.open();
//绑定draw事件 用户每次完成拉框操作时触发事件。
PolylineTool.addEventListener("draw",getPoints2);
}
function getPoints2(e){
//用户当前绘制的折线的点坐标数组
console.log(e.currentLnglats);
console.log("用户当前绘制的折线的地理长度:"+e.currentDistance);
}
//绘制矩形
function drawRectangle(){
var rectTool = new T.RectangleTool(map);
map.clearOverLays();
rectTool.open();
//绑定draw事件 用户每次完成拉框操作时触发事件。
rectTool.addEventListener("draw",getPoints3);
}
function getPoints3(e){
var points = e.currentBounds;
console.log(points);
}
//绘制多边形
function drawPolygon(){
var PolygonTool = new T.PolygonTool(map);
map.clearOverLays();
PolygonTool.open();
//绑定draw事件 用户双击完成一次折线绘制时触发事件。
PolygonTool.addEventListener("draw",getPoints4);
}
function getPoints4(e){
//用户当前绘制的多边形的点坐标数组
console.log(e.currentLnglats);
console.log("用户最后绘制的多边形的地理面积:"+e.currentArea);
}
//测距
function drawRanging(){
var config = {
showLabel: true
};
lineTool = new T.PolylineTool(map, config);
lineTool.open();
//绑定addpoint事件 用户测距过程中，每次点击底图添加节点时触发事件。
lineTool.addEventListener("addpoint",getAddpoint);
}
function getAddpoint(e){
//用户当前绘制的折线的点坐标数组。
console.log(e.currentLnglats);
console.log("用户当前绘制的折线的地理长度:"+e.currentDistance)
}
//测面
function drawPolygonTool(){
var config = {
showLabel: true,
color: "blue", weight: 3, opacity: 0.5, fillColor: "#FFFFFF", fillOpacity: 0.5
};
//创建标注工具对象
polygonTool = new T.PolygonTool(map, config);
polygonTool.open();
//绑定addpoint事件 用户测距过程中，每次点击底图添加节点时触发事件。
polygonTool.addEventListener("draw",getDraw);
}
function getDraw(e){
//最后绘制的多边形的顶点坐标数组
console.log(e.currentLnglats);
console.log("用户最后绘制的多边形的地理面积:"+e.currentArea);
}
//绘制圆形
function drawCircle(){
var config = {
color: "blue",
weight: 3,
opacity: 0.5,
fillColor: "#FFFFFF",
fillOpacity: 0.5
}
var circleTool = new T.CircleTool(map,config);
circleTool.open();
//绑定drawend事件 用户完成绘制圆时触发
circleTool.addEventListener("drawend",getDrawend);
}
function getDrawend(e){
//中心点坐标
console.log(e.currentCenter);
var radius = e.currentRadius;
console.log("半径，单位为米:"+radius);
console.log("面积，单位为平方米:"+Math.PI * radius*radius);
}
//获取图层个数
function getDrawNumber(){
var len = map.getOverlays().length;
console.log("图层个数:"+len);
}
</script>
</html>在图层上绘制图形和相关坐标面积的获取。
标签：function,map,console,log,var,图形,绘制,第六篇 来源： https://blog.csdn.net/cherry_vicent/article/details/122615144