高德地图和canvas画图结合应用(一)
现在重构web项目的时候发现,以前项目中是高德画基站的扇区的时候,通过计算点来画多边形,在站点的数量比较多的时候,会增加请求,同时计算扇区的时候有大量的计算,这样会极度浪费服务器的性能,所以对这块进行了改良,直接使用的高德地图的canvas层在画基站,效果如下图所示:
其代码为:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>ImageLayer</title>
<meta id="viewport" name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0"/>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main1119.css"/>
<script src="http://webapi.amap.com/maps?v=1.4.2&key=您申请的key值"></script> -->
</head> <body>
<div id="container"></div> <script>
var map = new AMap.Map('container', {
resizeEnable: true,
// viewMode:"3D",
zoom:15,
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=0;
for(var i=0;i<3;i++){
context.fillStyle = 'rgb(0,100,255)';
context.strokeStyle = 'rgb(0,100,255)';
context.beginPath();
//定义起点
context.moveTo(pixel.getX(),pixel.getY());
context.arc(pixel.getX(),pixel.getY(),50,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(); </script>
</body>
</html>
高德地图和canvas画图结合应用(一)的更多相关文章
- 高德地图和canvas画图结合应用(二)
上节讲述了如在在高德地图中添加canvas图层,这节就讲述下如何在canvas图层添加鼠标的事件. 在上节脚本的最后加入以下代码: var text; $('#container').on('clic ...
- 从flexible.js引入高德地图谈起的移动端适配
曾几何时,前端还仅仅是PC端的.随着移动时代的兴起,h5及css3的推陈出新.前端的领域慢慢的由传统的pc端转入了移动端,这也导致了前端这一职业在风口的一段时间出尽了风头. 从开始的惶恐和无从下手,慢 ...
- [WEB地图] 2017高德地图API WEB开发(key申请,地图搭建)简约教程
前端时间因为公司需要研究 了一下百度的教程 然后写个简约的笔记记录一下自己学习的收获,只为了满足自己暂时的写作热情 高德地图WEB开发(key申请.api)简约教程 1.首先我们需要去“高德地 ...
- 毕业设计总结(1)-canvas画图
去年6月底完成的毕业设计,到现在也才开始给它做个总结,里面有很多可以学习和借鉴的东西. 我的毕业设计的题目是“一种路径规划算法的改进与设计”,具体的要求可参见下面的表格: 题目 一种路径规划算法的改进 ...
- 【高德地图API】地理编码与逆地理编码
一.地理编码 该功能实现地理编码服务,即地址匹配,从已知的地址描述到对应的经纬度坐标的转换,即根据地址信息,查询该地址所对应的点坐标等,地址(address) 为必选项,城市(city)为可选项. & ...
- 在vue中使用高德地图vue-amap
1.安装 vue-amap我安装指定版本0.5.10的版本 npm i --save vue-amap@0.5.10 2.main.js中的配置 key申请地址教程:https://lbs.amap. ...
- vue-element-admin 引入高德地图并做海量点标记
第一步: 首先在index.html入口文件中添加引入高德地图的js,并填写自己在官网申请的key.如果没有申请不填写也是可以的. plugin:项目中如果有需要引入插件则使用没有直接去掉就行. &l ...
- 在高德地图上用svg.js绘制简单图形
这段时间做的一个项目,需要在地图上绘制简单的图形.在学习高德地图JS API的过程中,发现高德地图提供的点.线等API并不能满足我的需求,还好它开放了自定义图层CustomLayer,官方说自定义图层 ...
- 高德地图API中折线polyline不能跨越180度经度线的解决方案
1.问题 最近在使用高德地图的API,有一个需求是画出对象的历史轨迹,采用了高德地图API中的折线polyline函数.但如果需要跨180度经度线的折线,会出现不能跨越的情况,如下图所示: 图中有三个 ...
随机推荐
- vijos-1382 寻找主人
题意: 给出两个同样长度的数字串: 求两个串是否本质同样.同样则输出最小表示. 长度L似乎给的不正确,大概是2000000左右吧: 题解: 最小表示法裸题.证明正确性啥的详见论文吧: 这东西大体的思路 ...
- node17
一.复习 cookie是在res中设置,req中读取的.第一次的访问没有cookie. cookie的存储大小有限,kv对.对用户可见,用户可以禁用.清除Cookie.可以被篡改. cookie用来制 ...
- bzoj5106: [CodePlus2017]汀博尔(二分答案)
5106: [CodePlus2017]汀博尔 题目:传送门 题解: 百题纪念!!! 原谅一下第一百题刷了到水题... 直接二分月份然后判断(注意上界大小) 代码: #include<cstdi ...
- SSH Key的生成和使用(for git)
SSH Key的生成和使用 一.总结 1.用git base生成ssh,会生成id_rsa.pub文件,还有一个私钥文件. $ ssh-keygen -t rsa -C “youremailn ...
- Python 异常(Exception)
1. 字符串为构造函数的参数 >> raise Exception('hyperdirve overload') Exception Traceback (most recent call ...
- pugixml读取unicode编码的xml文件的做法
作者:朱金灿 来源:http://blog.csdn.net/clever101 实际上在多字节编码的情况下,即以记事本打开显示的ANSI编码的,如下图: pugixml是可以直接读取中文字符的,示例 ...
- 不实例化一个 class 的时候使用它的property
class A: @property def name(self): " print(A.name) # <property object at 0x10d54cf98> cla ...
- web移动端-弹性盒模型
(父元素加) : /*新版弹性盒模型*/ /* display: flex; */ /*设置主轴方向为水平方向*/ /* flex-direction: row; */ /*设置主轴方向为垂直方向*/ ...
- shell学习日志
0.shell的变量同环境变量不同,存在用户环境区. 变量赋值的方式是: variable_name = variable_value a= "hello" $a对a进行取值 关于 ...
- 微信小程序的开启授权,当单机取消授权后 再次授权
//单机去搜索 toSearch:function(){ this.getLocation(res => { console.log('成功') wx.navigateTo({ url: `.. ...