高德地图和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画图结合应用(一)相关推荐

从flexible.js引入高德地图谈起的移动端适配
曾几何时,前端还仅仅是PC端的.随着移动时代的兴起,h5及css3的推陈出新.前端的领域慢慢的由传统的pc端转入了移动端,这也导致了前端这一职业在风口的一段时间出尽了风头. 从开始的惶恐和无从下手,慢 ...
高德地图上画图!和3D绘制区域
封装了一些方法前提是引入高德api 才能使用这个办法 // 绘制进博会的区域$(document).ready(function () {// 绘制板块$.ajax({ //可以是一个json里面 ...
前端vue js 高德地图实现雷达扫描加载，借鉴百度地图等方法，采用Canvas解决雷达背景透明度问题，解决Canvas动态指针扫描造成浏览器卡顿问题
前端vue js 高德地图实现雷达扫描加载,借鉴百度地图等方法,采用Canvas解决雷达背景透明度问题,解决Canvas动态指针扫描造成浏览器卡顿问题经过3天的尝试,借鉴了好几个博客的思路,开发了一 ...
基于微信小程序Map标签及高德地图开源方法实现路径导航
微信小程序自带地图map标签,他是基于canvas画图功能进行的地图渲染,同时依赖微信的getlocation获取经纬度,绘制周边地图.地图上可以标点,画线,查看当地地理信息.但是自带的导航功能模块不 ...
amap vueamap 与_在vue中使用高德地图vue-amap
1.安装 vue-amap我安装指定版本0.5.10的版本 npm i --save vue-amap@0.5.10 2.main.js中的配置 // 高德离线地图 import VueAMap fr ...
python做地图导航_「Python」利用高德地图做你想做之事
玩grasshopper基本上都知道OpenStreetMap 这个地图网站,毕竟有一个好用的地图插件,可以在Rhino中绘制出所需,但是一个不好的地方就在于国内的数据量太少,无法满足我们的需求. 此 ...
vue.js高德地图实现热点图
1.在index.html引入高德地图JSAPI <script src="https://webapi.amap.com/maps?v=1.3&key=xxx"&g ...
python做地图导航_【Python】利用高德地图做你想做之事
原标题:[Python]利用高德地图做你想做之事 [版权声明] 作者:CPF 如需转载请联系CPF 如有侵权请联系大水牛平台玩grasshopper基本上都知道OpenStreetMap 这个地图网 ...
「Python」利用高德地图做你想做之事
玩grasshopper基本上都知道OpenStreetMap 这个地图网站,毕竟有一个好用的地图插件,可以在Rhino中绘制出所需,但是一个不好的地方就在于国内的数据量太少,无法满足我们的需求. 此 ...

高德地图和canvas画图结合应用(一)

高德地图和canvas画图结合应用(一)相关推荐

最新文章

热门文章