项目需要前端接入天地图

代码鄙陋，请谨慎参考。

这里给出了地图初始化，画出点标记连出来多段折现，使用的官方api的polyline。
原理与leaflet大同小异，如果需要各个项目重用封装vue会更实用一些。
这里添加polyline，polygon等等这些东西是通过addOverLay这个接口添加到地图，这里一经调用直接渲染，如果要干涉渲染过程还需要进一步研究。

polyline想要的点列表应该是下面这样的

测试天地图11111:Array(6)

0:T.Fq {lat: 39.90421, lng: 116.41534}
1:T.Fq {lat: 39.90552, lng: 116.36831}
2:T.Fq {lat: 39.93159, lng: 116.36522}
3:T.Fq {lat: 39.93001, lng: 116.41157}
4:T.Fq {lat: 39.93422, lng: 116.38101}
5:T.Fq {lat: 39.93343, lng: 116.38616}

对应一个简单的页面是这样：


<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>Playground</title>
    <link href="../assets/css/0-common/bootstrap.min.css" rel="stylesheet"/>
    <script src="../assets/js/0-common/require.js"></script>
    <script src="../assets/js/0-common/app.js"></script>
    <script src="http://api.tianditu.com/api?v=4.0" type="text/javascript"></script>
</head>
<body>

<div id="app" style="margin-top:10px;">
    <div class="row">
        <div class="col-xs-offset-2">
            <div class="form-group">
                <div class="col-xs-2">
                    <button class="btn btn-danger edit">编辑</button>
                    <button class="btn btn-primary save">保存</button>
                </div>
                <div class="col-xs-4">
                    <input type="text" name="POIAddress" class="form-control address" placeholder="这里填写地址信息"/>
                </div>
            </div>
            <div id="mapDiv" style="position:absolute;width:800px; height:500px; top:90px;"></div>
        </div>
    </div>
</div>
<script>
    require(['vue', 'jquery', 'cmodules'], function (Vue, $) {
        var map = new T.Map('mapDiv');
        (function init(){
            $.call('getpoilist',{search:'天地图',limit:4000}, function (resp) {
                let groups = resp.rows.groupby('POIAddress',function (line) {
                    return T.LngLat(line.Longitude, line.Latitude)
                })
                console.log(groups)
                $.each(groups,function(){
                    console.log(this)
                    let polyline = new T.Polyline(this,{
                        color:'red',
                        weight:3,
                        opacity:0.5,
                        lineStyle:'solid'
                    })
                    map.addOverLay(polyline);
                })
            })
        })()

        var lnglat = new T.LngLat(116.40969, 39.89945)
        map.centerAndZoom(lnglat, 12);
        var pointlist = []
        var status = 'display'//display,edit
        map.on('click', function (e) {
            if(status==='edit'){
                map.clearOverLays();
                var point = e.lnglat;
                pointlist.push(point)
                let polyline = new T.Polyline(pointlist,{
                    color:'red',
                    weight:3,
                    opacity:0.5,
                    lineStyle:'solid'
                })
                map.addOverLay(polyline);
                console.log(pointlist,polyline)
            }
        })
        $('.edit').click(function () {
            map.clearOverLays();
            pointlist = []
            status = 'edit';
        })
        $('.save').click(function () {

            let poilist = pointlist.map(function (e,i) {
                return ({
                    POIAddress:$('.address').val(),
                    Latitude: e.lat,
                    Longitude: e.lng,
                    ord:i
                })
            })
            $.each(poilist, function () {
                $.call('savepoi',this, function (resp) {
                    if(!resp) alert('请求异常')
                    if(!resp.success) alert(resp.message)
                })
            })
        })

    })
</script>
</body>
</html>

有什么不好的地方欢迎在评论区吐槽

项目需要前端接入天地图

猜你喜欢