有没有方法能通过一堆经纬度数据画出线路图

@Ta 03-20 16:30 207点击


小米8高配版(五颜六色)

回复列表(6)
  • 2
    @Ta / 03-20 16:41

    可以啊,就画相邻两个点的直线,一直画完就是一条线了。下面是openlayers3的方法,你参考一下。创建图层我就不贴代码了,反正你可能用的不是openlayers

    1.     function view_gj(data){ //线路
    2.         for(let i = 0;i < data.length;i++){
    3.             if((i+1) == data.length){
    4.                 return;
    5.             }
    6.             let feature_gj = new ol.Feature({
    7.             geometry:new ol.geom.LineString(
    8.                 [data[i],data[i+1]])
    9.             });
    10.             feature_gj.setStyle(new ol.style.Style({
    11.                 stroke: new ol.style.Stroke({
    12.                     width: 3,
    13.                     color: [0, 0, 255, 1]
    14.                 })
    15.             }));
    16.             vectorSource_gj.addFeature(feature_gj);
    17.         }
    18.     }
  • 3
    @Ta / 03-20 16:47

    @水木易安,不会用
    小米8高配版(五颜六色)

  • 4
    @Ta / 03-20 17:10

    @病猫,这不已经很简单了?打开就是源码.

    实在不行你看这段

    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
        <style>
        html,
        body,
        #container {
          width: 100%;
          height: 100%;
        }
        </style>
        <title>折线的绘制和编辑</title>
        <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
        <script src="https://webapi.amap.com/maps?v=1.4.13&key=您申请的key值&plugin=AMap.PolyEditor"></script>
        <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
    </head>
    <body>
    <div id="container"></div>
    <div class="input-card" style="width: 120px">
       <button class="btn" onclick="polyEditor.open()" style="margin-bottom: 5px">开始编辑</button> 
       <button class="btn" onclick="polyEditor.close()">结束编辑</button> 
    </div>
    <script type="text/javascript">
        var map = new AMap.Map("container", {
            center: [116.395577, 39.892257],
            zoom: 14
        });
    
        var path = [
            [116.362209, 39.887487],
            [116.422897, 39.878002],
            [116.372105, 39.90651],
            [116.428945, 39.89663]
        ];
    
        var polyline = new AMap.Polyline({
            path: path,
            isOutline: true,
            outlineColor: '#ffeeff',
            borderWeight: 3,
            strokeColor: "#3366FF", 
            strokeOpacity: 1,
            strokeWeight: 6,
            // 折线样式还支持 'dashed'
            strokeStyle: "solid",
            // strokeStyle是dashed时有效
            strokeDasharray: [10, 5],
            lineJoin: 'round',
            lineCap: 'round',
            zIndex: 50,
        })
    
        polyline.setMap(map)
        // 缩放地图到合适的视野级别
        map.setFitView([ polyline ])
    
        var polyEditor = new AMap.PolyEditor(map, polyline)
    
        polyEditor.on('addnode', function(event) {
            log.info('触发事件:addnode')
        })
    
        polyEditor.on('adjust', function(event) {
            log.info('触发事件:adjust')
        })
    
        polyEditor.on('removenode', function(event) {
            log.info('触发事件:removenode')
        })
    
        polyEditor.on('end', function(event) {
            log.info('触发事件: end')
            // event.target 即为编辑后的折线对象
        })
    </script>
    </body>
    </html>
    

    你把

    var path = [ [116.362209, 39.887487], [116.422897, 39.878002], [116.372105, 39.90651], [116.428945, 39.89663] ];

    改成你自己的点就好了

  • 5
    @Ta / 03-20 17:15

    @水木易安,谢谢
    小米8高配版(五颜六色)

  • 6
    @Ta / 03-22 07:50

    你从别人自拍照片里提取的?
    虎友高配版(绿色)

添加新回复
回复需要登录

[聊天-公共聊天室] TabKey9:哧溜一嘴油,重庆小面加芥末@a676774305,