|
阅读：4498回复：0
openlayer加载椭圆
openlayer目前没有加载椭圆的方法，通过自定义加载。
实现思路，自定义canvas绘制椭圆，将canvas以image实现添加到openlayer层中。 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Openlayer地图加载椭圆</title> <link href="./libs/ol/ol.css" rel="stylesheet" type="text/css" /> <script src="./libs/ol/ol.js" type="text/javascript"></script> <style type="text/css"> #map { width: 100%; height: 100%; position: absolute; } </style> </head> <body> <div id="map"></div> <script type="text/javascript"> var layer = new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'http://www.google.cn/maps/vt?pb=!1m5!1m4!1i{z}!2i{x}!3i{y}!4i256!2m3!1e0!2sm!3i342009817!3m9!2szh-CN!3sCN!5e18!12m1!1e47!12m3!1e37!2m1!1ssmartmaps!4e0&token=32965' }) }); var vector = new ol.layer.Vector({ source: new ol.source.Vector() }); var view = new ol.View({ center: new ol.proj.fromLonLat([120, 30]), zoom: 7 }); var map = new ol.Map({ layers: [layer, vector], view: view, target: "map", logo: false }); var feature = new ol.Feature({ geometry: new ol.geom.Point(new ol.proj.fromLonLat([120, 30])) }); map.on("moveend", function(e) { var zoom = map.getView().getZoom(); //获取当前地图的缩放级别 console.log(zoom); var canvas = document.getElementById("roundEllipseCanvas"); if (canvas == null) { var canvas = document.createElement("canvas"); //创建一个canvas标签 document.getElementById("map").appendChild(canvas); canvas.id = "roundEllipseCanvas"; canvas.style.display = 'none'; } canvas.width = zoom * 20; canvas.height = zoom * 20; var context = canvas.getContext("2d"); context.roundEllipse = roundEllipse; context.roundEllipse(canvas.width, canvas.height, zoom); var style = new ol.style.Style({ image: new ol.style.Icon({ img: canvas, imgSize: [canvas.width, canvas.height] }) }); feature.setStyle(style); try { vector.getSource().removeFeature(feature); } catch (e) { console.log(e) } vector.getSource().addFeature(feature); }); var roundEllipse = function(width, height, zoom) { var ctx = this; //根据地图放大,改变椭圆大小,需要根据实际情况计算,此处只是一个demo ctx.ellipse(width / 2, height / 2, width/2, height/4, 0, 0, Math.PI * 2); ctx.fillStyle = "#058"; ctx.strokeStyle = "#000"; ctx.fill(); ctx.stroke(); return this; } </script> </body> </html> js绘制椭圆参考:https://blog.csdn.net/gao_xu_520/article/details/58588020 |
|
