高德地图js 开发四：折线的绘制

62 阅读 0 评论 41 点赞

我是靠谱客的博主标致黄蜂，最近开发中收集的这篇文章主要介绍高德地图js 开发四：折线的绘制，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

var map;
InitMap(11, [114.312151, 30.58454]);//默认武汉中心坐标
        //地图初始化
        function InitMap(zoom, arr) {
            map = new AMap.Map('container', {
                zoom: zoom,//级别
                center: arr,//中心点坐标
                viewMode: '3D'//使用3D视图
            });
            //鼠标点击的坐标//经度getLng，纬度getLat
            map.on('click', function (e) {
                let arr = [e.lnglat.getLng(), e.lnglat.getLat()];
                
            });

            //AMap.plugin(["AMap.PolyEditor"], function () {
            //    // 实例化多边形编辑器，传入地图实例和要进行编辑的多边形实例
            //    let polygonEditor = new AMap.PolyEditor();
            //    map.addControl(polygonEditor);
            //    // 开启编辑模式
            //    //polygonEditor.open();
            //});
        }

//武汉三环线坐标
        var ThirdPath = [
            [114.171371, 30.6264], [114.179611, 30.626843], [114.188108, 30.624258], [114.23068, 30.625587],
            [114.239177, 30.630684], [114.250593, 30.63637], [114.26733, 30.64693], [114.283895, 30.660284],
            [114.29883, 30.664271], [114.314623, 30.671211], [114.329643, 30.682495], [114.354191, 30.693271],
            [114.369211, 30.694072], [114.38097, 30.690825], [114.410128, 30.647327], [114.42223, 30.631439],
            [114.433216, 30.584752], [114.441027, 30.562942], [114.459566, 30.538402], [114.454845, 30.508743],
            [114.458622, 30.496319], [114.456648, 30.486324], [114.457506, 30.479519], [114.441971, 30.467007],
            [114.300449, 30.457761], [114.269721, 30.46871], [114.175994, 30.528909], [114.163978, 30.578431],
            [114.169643, 30.597642], [114.161317, 30.606423], [114.160373, 30.612691], [114.171359, 30.626725],
        ];
//绘制线
        function Polyline(path) {
            let 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 即为编辑后的折线对象
            //})
        };
 Polyline(ThirdPath);