高德地图画扇形v3.0

80 阅读 0 评论 53 点赞

我是靠谱客的博主忧郁小熊猫，最近开发中收集的这篇文章主要介绍高德地图画扇形v3.0，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

2.0 更新部分bug 增加了另一种画法，避免模糊

3.0 新增点击事件，可以点击扇区，弹窗展示内容

！高德地图画扇形不如百度画扇形，去百度吧。

！

$(document).ready(function(){
var map = new AMap.Map('allmap', {
resizeEnable: true,
zoom:12,
center:[116.335183,39.941735]
});
/*
* 添加Canvas图层
*/
var canvas = document.createElement('canvas');
canvas.width = map.getSize().width;
canvas.height = map.getSize().height;
var context = canvas.getContext('2d');
//context.strokeStyle='white';
//canvas.style.zIndex = AMap.Overlay.getZIndex(this._point.lat);
context.globalAlpha = 1;
context.lineWidth = 2;
var radious = 0;
var secNumber = 1;
var draw
= function(argument) {
context.clearRect(0,0,canvas.width,canvas.height)
context.globalAlpha = (context.globalAlpha-0.3+1)%1;
radious=50;
var pixel = map.lnglatTocontainer(new AMap.LngLat(116.344496,39.939976));
var startPoint=Math.PI/180*90;
//Math.PI是3.14相当于180度，所以想转多少度就除以180乘以度数
for(var i=0;i<3;i++){
context.fillStyle = 'rgb(0,100,255)';
context.strokeStyle = 'rgb(0,100,255)';
context.beginPath();
//定义起点
console.log(Math.PI);
console.log(Math.PI/3);
context.moveTo(pixel.getX(),pixel.getY());
context.arc(pixel.getX(),pixel.getY(),200,startPoint,startPoint+Math.PI/3,false);
context.fill();
startPoint+=Math.PI*2/3;
}
}
var CanvasLayer = new AMap.CanvasLayer({
canvas: canvas,
bounds: map.getBounds( ),
zooms: [3, 18],
});
CanvasLayer.setMap(map);
draw();
})

//上边用canvas画出来的放大了会模糊，还有一个用另一种方式画的

var ORIGIN_LONGLAT = [116.335183, 39.941735];
var map = new AMap.Map('allmap', {
resizeEnable: true, //是否监控地图容器尺寸变化
center: ORIGIN_LONGLAT,
zoom: 13, //初始化地图层级
});
//地图加载完成
map.on("complete", function () {
var ORIGIN_LONGLAT2 =[116.384069,39.940796];
AMap.plugin('AMap.CustomLayer', function () {
var canvas = document.createElement('canvas');
customLayer = new AMap.CustomLayer(canvas, {
zooms: [3, 20],
alwaysRender: true,//缩放过程中是否重绘，复杂绘制建议设为false
zIndex: 22,
opacity:0.6
});
var onRender = function () {
let size = map.getSize();//resize
let width = size.width;
let height = size.height;
canvas.style.width = width + 'px';
canvas.style.height = height + 'px';
canvas.width = width;
canvas.height = height;//清除画布
var deg = Math.PI / 180;
var ctx = canvas.getContext('2d');
ctx.fillStyle = '#08549a';
ctx.strokeStyle = 'blue';
ctx.lineWidth = 4;
let pos2 = map.lngLatToContainer(ORIGIN_LONGLAT2);
let pos = map.lngLatToContainer(ORIGIN_LONGLAT);
//半径，这个可以根据中心点计算出例如50米外的经纬度然后传进来。
let radius=Math.sqrt((pos.x-pos2.x)*(pos.x-pos2.x)+(pos.y-pos2.y)*(pos.y-pos2.y));
ctx.beginPath();
var p = 45;
//动态设置需要旋转多少度
var startPoint = 0 - Math.PI/180*120 + Math.PI/180*p;
for(var i = 0; i < 3; i++){
ctx.moveTo(pos.x, pos.y);
ctx.arc(pos.x, pos.y, radius,startPoint ,startPoint+Math.PI / 3);
ctx.lineTo(pos.x, pos.y);
ctx.closePath();
ctx.stroke();
ctx.fill();
startPoint += Math.PI * 2 / 3;
}
}
customLayer.render = onRender;
customLayer.setMap(map);
customLayer.show();
addClickHandler("1<br/>2<br/>3");
//传入弹窗时想要展示的内容.我这里瞎传的，根据高德的api直接写死了一个。
});
});
// 点击事件
function addClickHandler(content) {
map.on("click", function (e) {
//获取当前经纬度传入下边，让弹窗展示在点击的位置
// 打开信息窗体
var lnglat = {Q:e.lnglat.getLat(),R:e.lnglat.getLng(),lng:e.lnglat.getLng(),lat:e.lnglat.getLat()};
openInfo(lnglat);
}
);
}
// // 定义信息窗口样式
// var opts = {
//
width: 240,
// 信息窗口宽度
//
height: 140,
// 信息窗口高度
//
title: "信息窗口", // 信息窗口标题
//
enableMessage: true//设置允许信息窗发送短息
// };
//在指定位置打开信息窗体
function openInfo(lnglat) {
//构建信息窗体中显示的内容
var info = [];
info.push("<div class='input-card content-window-card'><div><img style="float:left;" src=" https://webapi.amap.com/images/autonavi.png "/></div> ");
info.push("<div style="padding:7px 0px 0px 0px;"><h4>高德软件</h4>");
info.push("<p class='input-item'>电话 : 010-84107000
邮编 : 100102</p>");
info.push("<p class='input-item'>地址 :北京市朝阳区望京阜荣街10号首开广场4层</p></div></div>");
infoWindow = new AMap.InfoWindow({
content: info.join("")
//使用默认信息窗体框样式，显示信息内容
});
console.log(map.getCenter())
infoWindow.open(map, lnglat);
}