文档章节

天地图-第六篇-图形绘制

o
 osc_fmg49rzg
发布于 2019/03/20 10:56
字数 764
阅读 17
收藏 0

精选30+云产品,助力企业轻松上云!>>>

<!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>

在图层上绘制图形和相关坐标面积的获取

o
粉丝 0
博文 500
码字总数 0
作品 0
私信 提问
加载中
请先登录后再评论。

暂无文章

unity列表控件Horizontal/Vertical/Grid Layout Group用法介绍

1. Grid Layout Group 为Panel控件添加Grid Layout Group,子控件为四个按钮,分别为Grid,Calendar,Gear,User: 默认属性为 为方便演示,按钮的底色为控件自带image,按钮上面的图标为其子...

路过暴风
34分钟前
19
0
Distinct()与lambda? - Distinct() with lambda?

问题: Right, so I have an enumerable and wish to get distinct values from it. 是的,所以我有一个可枚举的,并希望从中获得不同的值。 Using System.Linq , there's of course an ext......

法国红酒甜
39分钟前
8
0
学习编写编译器[关闭] - Learning to write a compiler [closed]

问题: Preferred languages : C/C++, Java, and Ruby. 首选语言 :C / C ++,Java和Ruby。 I am looking for some helpful books/tutorials on how to write your own compiler simply for......

技术盛宴
今天
17
0
OSChina 周一乱弹 —— 毛巾又怎么样?!我在乎的是大姐姐温柔的怀抱!

Osc乱弹歌单(2020)请戳(这里) 【今日歌曲】 @薛定谔的兄弟 :分享洛神有语创建的歌单「我喜欢的音乐」: 《雨 因你而下,于你而止》- Seto 手机党少年们想听歌,请使劲儿戳(这里) @Dan...

小小编辑
今天
41
1
MySQL 常用操作

1 创建/打开/删除数据库 create database db;create database db character set utf8mb4;use db;drop database db;alter database db character set utf8mb4; 2 修复表 mysqlcheck --a......

氷泠
今天
13
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部