天地图-图形绘制

最新推荐文章于 2024-05-10 14:45:41 发布

简析

最新推荐文章于 2024-05-10 14:45:41 发布

阅读量2.6k

点赞数

分类专栏：前端

原文链接：https://www.cnblogs.com/nuoye/p/10563555.html

版权

前端专栏收录该内容

63 篇文章 1 订阅

订阅专栏

<转> 原文地址：https://www.cnblogs.com/nuoye/p/10563555.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>天地图</title>
    <style>
        /*设置地图显示大小*/
        #mapDiv{
            width: 600px;
            height: 400px;
            position: relative;
            float: left;
        }
    </style>
    </head>
    <body onLoad="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 onLoad() {
            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>

https://blog.csdn.net/coder_giser/article/details/23790731

简析

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
天地图-图形绘制

原文地址：https://www.cnblogs.com/nuoye/p/10563555.html<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>天地图</title> <style> /*设置地图显示大小*/ #mapDiv{ width:
复制链接

扫一扫