高德地图JavaScript API 自定义顶层Canvas与地图交互

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

杨安康

6801人浏览 · 2015-06-09 11:59:35

杨安康 · 2015-06-09 11:59:35 发布


<!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很卡，直接提出来计算

向您推荐>>Eolink开发者社区

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

更多推荐

ELK实现containerd的容器日志采集展示【基于logging的全栈监测】

企业级ELK Stack构建介绍

云原生

深入理解 Mocha 测试框架：从零实现一个 Mocha

前言什么是自动化测试自动化测试在很多团队中都是Devops环节中很难执行起来的一个环节，主要原因在于测试代码的编写工作很难抽象，99%的场景都需要和业务强绑定，而且写测试代码的编写工作量往往比编写实际业务代码的工作量更多。在一些很多业务场景中投入产出比很低，适合写自动化测试的应该是那些中长期业务以及一些诸如组件一样的基础库。自动化测试是个比较大的概念，其中分类也比较多，比如单元测试，端对端测试，集

云原生

(20200916 Solved)docker-compose up创建容器自动退出

问题描述如题，创建容器后自动退出了。并且docker start container无效解决方案原因是缺失了控制终端的配置，需要在docker-compose.yml中增加tty:true ，有时候这样也不行，需要再增加一个command:/bin/bash，命令不一定是这个，需要是一个不会退出的命令，然后用-d后台启动容器。Referencesdocker-compose启动容器后自动退出...