使用高德地图自定义创建图层（svg）

这段时间做的一个项目，需要在地图上绘制简单的图形。在学习高德地图JS API的过程中，发现高德地图提供的点、线等API并不能满足我的需求，还好它开放了自定义图层CustomLayer，官方说自定义图层支持canvas、svg、甚至dom，这里我用的是svg，多说无益，上代码。一、高德地图以下的步骤在官方文档中都有，而且官方文档比较齐全。首先需要去高德API官网申请自己的key，此步略过。拿到key

托尼沙滩裤

10291人浏览 · 2020-11-05 13:07:46

托尼沙滩裤 · 2020-11-05 13:07:46 发布

这段时间做的一个项目，需要在地图上绘制简单的图形。在学习高德地图JS API的过程中，发现高德地图提供的点、线等API并不能满足我的需求，还好它开放了自定义图层CustomLayer，官方说自定义图层支持canvas、svg、甚至dom，这里我用的是svg，多说无益，上代码。

实现效果图

一、高德地图

以下的步骤在官方文档中都有，而且官方文档比较齐全。

首先需要去高德API官网申请自己的key，此步略过。

拿到key后在页面中引入地图所用的js

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=申请的key"></script>

准备一个放置地图的容器，指定特定的高度，宽度。我是将容器高度宽度全部设置为100%。

<div id="container"></div>

html, body, #container {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

最后一步，在js中指定容器，加载地图，然后就可以在页面中看到你的地图了。

// 第一个参数是容器名称，第二个参数可以按自己需求随意配置。
var map = new AMap.Map('container', {
    zoom: 15, // 缩放等级
    center: [115.49481017, 38.88656455], // 中心点
    features: ['bg', 'road', 'building'] // 设置地图中显示的元素, 'bg'（地图背景）、'point'（POI点）、'road'（道路）、'building'（建筑物）
});

二、自定义图层

下面开始编写自定义图层，除过地图所用的js文件，我还用到了jquery。

首先地图有一部分是异步加载的，所以需要在地图加载完成后，再去编写自定义图层，否则容易报错，而地图也给我们提供了complete事件。

map.on('complete', function(){
    // TODO 编写自定义图层
})

然后声明svg，创建图层

svg和地图类似，也需要先声明一个容器，此容器和地图等宽等高

var svg = $('<svg id="drawing" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" ></svg>')[0];

#drawing {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

创建图层

// 第一个参数传入我们创建的svg对象，第二个参数为图层配置，可以根据自己需求进行配置
var customLayer = new AMap.CustomLayer(svg, {
    zIndex: 100,
    zooms: [3, 18],
    alwaysRender: true
});
map.add(customLayer); // 要把图层添加到地图中

二、在图层中画自己喜欢的图形。

为了简化代码，项目中采用了svg.js

// 调用svg.js提供的SVG函数，传入我们创建的svg对象，创建所需要的draw对象。
var draw = SVG(svg);

现在我们开始在地图上画线。

我们规定在地图上单击即为线的起点，再进行单击即为线的终点。

首先为地图注册单机事件

var isDraw = false; // 用来判断是开始画线还是结束画线。
var startPix; // 用来存储起点
map.on('click', function(ev){
    isDraw = !isDraw;
    if(isDraw) {
        // isDraw为true就标明起点
        startPos = ev.pixel; 
    }else{
        // isDraw为false就画线。 
    }
})

然后编写画线函数

function drawLine(start, end) {
    var lineWth = 3;
    var lineColor = 'blue';
    var x = start.x;
    var y = start.y;
    var x1 = end.x;
    var y1 = end.y;
    line = draw.line(x, y, x1, y1).stroke({ color: lineColor, width: lineWth });
    return line; 
}

然后完善地图单击事件

map.on('click', function(ev){
    isDraw = !isDraw;
    if(isDraw){
        // isDraw为true就标明起点
        startPix = ev.pixel;
    }else{
        // isDraw为false就画线。 
        var endPix = ev.pixel;
        drawLine(startPix, endPix);
    }
})

至此就可以在地图上简单的画直线了。

但是当我们单击地图开始画线时，此时地图上没有任何东西，再点击地图时，线突然的出现，这样显得比较突兀。现在我们需要修改成，当开始画线时，线跟随鼠标移动而移动，再点击地图时，结束画线。

我们需要先注册地图mousemove事件

map.on('mousemove', function (ev) {
    if(isDraw) {
        drawLine(startPix, ev.pixel)
    }
});

注册完鼠标移动时间后，线是可以跟随鼠标移动了，但是现在出现了一个小问题:

所有画的线都留下了来了，这时我们需要将多余的线去掉。

在鼠标移动时去掉多余的线，这里需要用到draw对象的group功能。

var lineGroup; // 声明一个对象 存储line。
map.on('click', function(ev){
    isDraw = !isDraw;
    if(isDraw){
        // isDraw为true就标明起点
        startPix = ev.pixel;
        lineGroup = draw.group(); // 开始画线时创建一个group。
    }else{
        // isDraw为false就画线。 
        var endPix = ev.pixel;
        drawLine(startPix, endPix);
    }
});
map.on('mousemove', function(ev){
    if(isDraw) {
        lineGroup.clear(); // 在鼠标移动时先将group清空。
        var line = drawLine(startPix, ev.pixel);
        lineGroup.add(line);// 将新线添加到group中。
    }
})

至此，我们完成了让线跟随鼠标移动。

三、地图重绘时，让画的线随实际经纬度坐标重绘。

我们现在所画的线，在拖动、放大、缩小地图时，是不会跟随地图变化而变化的。

首先需要创建一个数组用来存储坐标点，一个对象用来存储起点坐标。

var positions = [];
var startPos;

然后开始画线记录起始点经纬度坐标，结束画线时将两点坐标存入数组。

map.on('click', function(ev){
    isDraw = !isDraw;
    if(isDraw){
        // isDraw为true就标明起点
        startPos = ev.lnglat; /*手动高亮*/
        startPix = ev.pixel;
        lineGroup = draw.group();
    }else{
        // isDraw为false就画线。 
        var endPix = ev.pixel;
        drawLine(startPix, endPix);
        positions.push({ /*手动高亮*/
            start: startPos,
            end: ev.lnglat
        })
    }
});

最后注册的是自定义层的重绘事件。

customLayer.render = onRender;
function onRender() {
    draw.clear(); // 先将画板清空
    for(var i = 0;i < positions.length;i++){
        // 需要将经纬度坐标转换为容器内坐标，lngLatToContainer是高德提供的转换方法
        var startPixCon = map.lngLatToContainer(positions[i].start);
        var endPixCon = map.lngLatToContainer(positions[i].end);
        drawLine(startPixCon, endPixCon);
    }
}

现在我们画的线就可以随地图变化而变化了。

最后附上个人编写全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>csdn</title>
</head>
<body>
    <style>
        html,body,#container{
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
        }
        #drawing { 
            margin: 0; padding: 0; width: 100%; height: 100%; }

    </style>

    <div id="container"></div>
    <div id="drawing"></div>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>

    <script src="https://webapi.amap.com/maps?v=1.4.15&key=自己的key"></script>
    <script type="text/javascript">
    // 第一个参数是容器名称，第二个参数可以按自己需求随意配置。
        var map = new AMap.Map('container',{ //加载地图
            zoom:15,
            center:[115.49481017, 38.88656455],
            features:['bg', 'road', 'building'],//地图中显示元素 'bg'（地图背景）、'point'（POI点）、'road'（道路）、'building'（建筑物）

        })
        map.on('complete',function(){//自定义图层

             //声明svg <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"width="3.5in" height="1in">
            var svg = $('<svg id="drawing" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" ></svg>')[0];
            var customLayer= new AMap.CustomLayer(svg,{ //创建图层
            zIndex:100,
            zooms:[3,18],
            alwaysRender:true,

            })
            map.add(customLayer);//把图层添加到地图中
            // 调用svg.js提供的SVG函数，传入创建的svg对象，创建所需要的draw对象。 
            var draw = SVG(svg);
            //注册单击事件
            var isDraw = false; //用来判断是开始还是结束
            var startPix; //储蓄起点
            var lineGroup;
            var positions = [];
            var startPos;
            map.on('click',function(ev){
                isDraw =!isDraw;
                if(isDraw){
                    //isDraw为true就表明起点
                    startPos = ev.lnglat; /*手动高亮*/
                    startPix = ev.pixel;
                    lineGroup = draw.group(); // 开始画线时创建一个group。

                    
                }
                else{// isDraw为false就画线。
                    var endPix = ev.pixel;
                    drawLine(startPix,endPix);
                    positions.push({ /*手动高亮*/
                    start: startPos,
                    end: ev.lnglat
                    })
                }
            });
            
            function drawLine(start,end){
                var lineWth = 3;
                var lineColor = 'blue';
                var x = start.x;
                var y = start.y;
                var x1 = end.x;
                var y1 = end.y;
                line = draw.line(x, y, x1, y1).stroke({ color: lineColor, width: lineWth });
                return line; 
            }
            map.on('mousemove', function (ev) {
            if(isDraw) {
               // drawLine(startPix, ev.pixel)
                lineGroup.clear(); // 在鼠标移动时先将group清空。
                var line = drawLine(startPix, ev.pixel);
                lineGroup.add(line);// 将新线添加到group中。
            }
            });
            //去掉多余的线

            customLayer.render = onRender;
                function onRender() {
                    draw.clear(); // 先将画板清空
                    for(var i = 0;i < positions.length;i++){
                        // 需要将经纬度坐标转换为容器内坐标，lngLatToContainer是高德提供的转换方法
                        var startPixCon = map.lngLatToContainer(positions[i].start);
                        var endPixCon = map.lngLatToContainer(positions[i].end);
                        drawLine(startPixCon, endPixCon);
                    }
                }
            

        })

       

    </script>
</body>
</html>

看到评论区有需要svg网格的
添加svg网格设计源代码

<!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">
    <title>浅色地图</title>
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <style>
        html,
        body,
        #container {
            width: 1570px;
            height: 715px;
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <script src="//webapi.amap.com/maps?v=2.0&key=d1bc8c8d59cf6d271829aff34e63d85b"></script>
    <script type="text/javascript">
        var map = new AMap.Map('container', {
            center: [120.258387, 31.531555],
            zooms: [14, 20],
            zoom: 5,

        });
        AMap.plugin(['AMap.ToolBar', 'AMap.Driving'], function() { //异步同时加载多个插件
            var toolbar = new AMap.ToolBar();
            map.addControl(toolbar);
        });

        function getData(callback) {
            AMap.plugin('AMap.DistrictSearch', function() {
                var search = new AMap.DistrictSearch();
                search.search('中国', function(status, data) {
                    if (status === 'complete') {
                        var positions = []
                        var provinces = data['districtList'][0]['districtList']
                        for (var i = 0; i < provinces.length; i += 1) {
                            positions.push({
                                center: provinces[i].center,
                                radius: Math.max(2, Math.floor(Math.random() * 10))
                            })
                        }
                        console.log(positions)
                        callback(positions)
                    }
                });
            });
        }

        function addLayer(positions) {
            var canvas = document.createElement('canvas');
            var customLayer = new AMap.CustomLayer(canvas, {
                zooms: [0, 24],
                zIndex: 120
            });
            var onRender = function() {

                var size = map.getSize(); //resize
                var width = size.width;
                var height = size.height;
                canvas.width = width;
                canvas.height = height; //清除画布
                //开始绘制
                var ctx = canvas.getContext("2d"); //获取元素工具
                // 1. 设置网格大小
                var girdSize = 65;

                // 2. 获取Canvas的width、height
                var CanvasWidth = ctx.canvas.width;
                var CanvasHeight = ctx.canvas.height;

                // 3. 采用遍历的方式，绘画x轴的线条
                var xLineTotals = Math.floor(CanvasHeight / girdSize); // 计算需要绘画的x轴条数
                for (var i = 0; i < xLineTotals; i++) {
                    ctx.beginPath(); // 开启路径，设置不同的样式
                    ctx.moveTo(0, girdSize * i - 0.5); // -0.5是为了解决像素模糊问题
                    ctx.lineTo(CanvasWidth, girdSize * i - 0.5);
                    ctx.strokeStyle = "rgba(255,255,255,0.7)"; // 设置每个线条的颜色
                    ctx.lineWidth = 1;
                    ctx.stroke();
                }
                // 4.采用遍历的方式，绘画y轴的线条
                var yLineTotals = Math.floor(CanvasWidth / girdSize); // 计算需要绘画y轴的条数
                for (var j = 0; j < yLineTotals; j++) {
                    ctx.beginPath(); // 开启路径，设置不同的样式
                    ctx.moveTo(girdSize * j, 0);
                    ctx.lineTo(girdSize * j, CanvasHeight);
                    ctx.strokeStyle = "rgba(255,255,255,0.7)"; // 设置每个线条的颜色
                    ctx.lineWidth = 1;
                    ctx.stroke();
                }


            }
            customLayer.render = onRender;
            customLayer.setMap(map);
        }
        getData(addLayer);
    </script>
</body>

</html>