自定義圖層

html,body,#container {

width: 100%;

height: 100%;

}

var map = new AMap.Map('container', {

center: [116.306206, 39.975468],

zooms: [3, 10],

zoom:3

});

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))

})

}

callback(positions)

}

});

});

}

function addLayer(positions){

AMap.plugin('AMap.CustomLayer', function() {

var canvas = document.createElement('canvas');

var customLayer = new AMap.CustomLayer(canvas, {

zooms: [3, 10],

alwaysRender:true,//縮放過程中是否重繪，復雜繪制建議設為false

zIndex: 120

});

var onRender = function(){

var retina = AMap.Browser.retina;

var size = map.getSize();//resize

var width = size.width;

var height = size.height;

canvas.style.width = width+'px'

canvas.style.height = height+'px'

if(retina){//高清適配

width*=2;

height*=2;

}

canvas.width = width;

canvas.height = height;//清除畫布

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

ctx.fillStyle = '#08f';

ctx.strokeStyle = '#fff';

ctx.beginPath();

for (var i = 0; i < positions.length; i += 1) {

var center = positions[i].center;

var pos = map.lngLatToContainer(center);

var r = positions[i].radius;

if(retina){

pos = pos.multiplyBy(2);

r*=2

}

ctx.moveTo(pos.x+r, pos.y)

ctx.arc(pos.x, pos.y, r, 0, 2*Math.PI);

}

ctx.lineWidth = retina?6:3

ctx.closePath();

ctx.stroke();

ctx.fill();

}

customLayer.render = onRender;

customLayer.setMap(map);

});

}

getData(addLayer);

總結

以上是生活随笔為你收集整理的android高德地图自定义图层,自定义图层-Canvas的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。