高德地圖JavaScript API 自定義頂層Canvas與地圖互動
阿新 • • 發佈：2019-01-23
<!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很卡，直接提出來計算