<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>多边形的使用(添加、更新、删除)</title>
    <style type="text/css">
        body {
            margin: 0;
            height: 100%;
            width: 100%;
            position: absolute;
        }
        #mapContainer {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
        #tip {
            position: absolute;
            bottom: 20px;
            right: 10px;
            height: 80px;
            font-size: 12px;
        }
        #tip input[type='button'] {
            margin-top: 10px;
            height: 28px;
            line-height: 28px;
            outline: none;
            text-align: center;
            padding-left: 5px;
            padding-right: 5px;
            color: #FFF;
            background-color: #0D9BF2;
            border: 0;
            border-radius: 3px;
            margin-top: 5px;
            margin-left: 5px;
            cursor: pointer;
            margin-right: 10px;
        }
    </style>
</head>
<body>
<div id="mapContainer"></div>
<div id="tip">
    <input type="button" value="添加多边形覆盖物" onClick="javascript:addPolygon()"/>
    <input type="button" value="隐藏多边形覆盖物" onClick="javascript:polygon.hide()"/>
    <input type="button" value="显示多边形覆盖物" onClick="javascript:polygon.show()"/>
    <input type="button" value="更新多边形覆盖物" onClick="javascript:updatePolygon()"/>
    <input type="button" value="删除多边形覆盖物" onClick="javascript:polygon.setMap(null)"/>
</div>

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请的key值"></script>
<script type="text/javascript">
    var datas = ${datas};

    //初始化地图对象,加载地图
    var map = new AMap.Map("mapContainer", {
        resizeEnable: true,
        view: new AMap.View2D({
            center: new AMap.LngLat(116.397428, 39.90923),//地图中心点
            zoom: 11 //地图显示的缩放级别
        })
    });

    //添加多边形覆盖物
    function addPolygon() {
        var polygonArr = new Array();//多边形覆盖物节点坐标数组
        polygonArr.push(new AMap.LngLat("116.403322", "39.920255"));
        polygonArr.push(new AMap.LngLat("116.410703", "39.897555"));
        polygonArr.push(new AMap.LngLat("116.402292", "39.892353"));
        polygonArr.push(new AMap.LngLat("116.389846", "39.891365"));
        polygon = new AMap.Polygon({
            path: polygonArr,//设置多边形边界路径
            strokeColor: "#FF33FF", //线颜色
            strokeOpacity: 0.2, //线透明度
            strokeWeight: 3,    //线宽
            fillColor: "#1791fc", //填充色
            fillOpacity: 0.35//填充透明度
        });
        polygon.setMap(map);
    }
    //更新多边形覆盖物,除此以外还可通过插件AMap.PolyEditor进行多边形覆盖物的更新,详情参看AMap.PolyEditor相关示例介绍
    function updatePolygon() {
        var polygonArr2 = new Array(); //新多边形覆盖物节点坐标数组
        polygonArr2.push(new AMap.LngLat("116.368904", "39.923423"));
        polygonArr2.push(new AMap.LngLat("116.382122", "39.921176"));
        polygonArr2.push(new AMap.LngLat("116.387271", "39.922501"));
        polygonArr2.push(new AMap.LngLat("116.398258", "39.914600"));

        //新多边形覆盖物属性
        var polygonOptions = {
            zIndex: 10,
            strokeStyle: "solid",
            strokeColor: "#0000FF",
            strokeOpacity: 0.8,
            strokeWeight: 5,
            path: polygonArr2
        };
        polygon.setOptions(polygonOptions);
    }

    window.onload = function () {
        var container = document.getElementById("mapContainer");
        var maps = container.firstElementChild;
        var canvas = document.createElement("canvas");
        canvas.width = 1920;
        canvas.height = 1080;
        canvas.style.zIndex = 100000;
        canvas.style.position = "absolute";
        canvas.style.left = "0px";
        canvas.style.top = "0px";
        maps.appendChild(canvas);

        var canvasPoint = document.createElement("canvas");
        canvasPoint.width = 1920;
        canvasPoint.height = 1080;
        canvasPoint.style.zIndex = 100001;
        canvasPoint.style.position = "absolute";
        canvasPoint.style.left = "0px";
        canvasPoint.style.top = "0px";
        maps.appendChild(canvasPoint);


        var ctx = canvas.getContext("2d");
        var baseScale = map.getScale();

        var xy = function (lng, lat) {
            var cll = map.lngLatToContainer(new AMap.LngLat(lng, lat), map.getZoom());
            return cll;
        }

        var scale = function () {
            var sc = baseScale / map.getScale();
            return sc;
        };

        var canvasDatas = {};
        for (var i in datas) {
            var data = datas[i];
            var lineArr = [];
            for (var i = 1; i < data.length; i++) {
                var x = data[i].x;
                var y = data[i].y;
                if (x > 0 && y > 0)
                    lineArr.push(xy(x, y));
            }
            canvasDatas[i] = lineArr;
        }

        var redraw = function () {
            var sc = scale();
            canvas.width = canvas.width;


            var startTime = (new Date()).getTime();
            console.log('开始画图');


            ctx.beginPath();
            for (var i in canvasDatas) {
                var data = canvasDatas[i];

                for (var j = 0; j < data.length; j++) {
                    var first = data[j];
                    var last = data[j + 1];
                    if (last) {
                        ctx.fillStyle = "blue";
                        ctx.lineWidth = 1;
                        ctx.moveTo(first.x * sc, first.y * sc);
                        ctx.lineTo(last.x * sc, last.y * sc);
                    }
                }
            }
            ctx.stroke();


            var endTime = (new Date()).getTime();
            console.log('结束画图,使用时间(ms):', endTime - startTime);
        };
        redraw();
        map.on("dragging", function (e) {
            redraw();
        });
        map.on("zoomchange", function (e) {
            redraw();
        });
        map.on("resize", function (e) {
            redraw();
        });

        var k = 0;
        var ctxPoint = canvasPoint.getContext("2d");
        var drawPoint = function () {
            canvasPoint.width = canvasPoint.width;
            ctxPoint.beginPath();
            for (var i in canvasDatas) {
                var xy = canvasDatas[i][k];
                var img = new Image();
                img.src = "/images/4X4.png";
                ctxPoint.drawImage(img, xy.x, xy.y);
            }
            ctxPoint.stroke();
            k++;
        }

        setInterval(function () {
            drawPoint();
        }, 500);
    }
</script>
</body>
</html>

移动的时候每次获得容器对应的xy很卡,直接提出来计算
Logo

权威|前沿|技术|干货|国内首个API全生命周期开发者社区

更多推荐