百度地图（26）-GL 矢量图标
1. 三维库依然可以添加矢量图标，甚至可以添加一些二维库中无法实现的功能。
如棱柱（prism）。
2.
1 /** 2 * 镂空面绘制 3 */ 4 function getBoundary() { 5 map.centerAndZoom(new BMapGL.Point(116.718, 40.142), 11); 6 map.enableScrollWheelZoom(true); 7 8 var bd = new BMapGL.Boundary(); 9 bd.get('北京市', function (rs) { 10 // console.log('外轮廓：', rs.boundaries[0]); 11 // console.log('内镂空：', rs.boundaries[1]); 12 var hole = new BMapGL.Polygon(rs.boundaries, { 13 fillColor: 'blue', 14 fillOpacity: 0.2 15 }); 16 map.addOverlay(hole); 17 }); 18 } 19 20 /** 21 * 线圆面可编辑 22 */ 23 var polygon; 24 var polyline; 25 var circle; 26 27 function openEdit(){ 28 polyline.enableEditing(); 29 polygon.enableEditing(); 30 circle.enableEditing(); 31 } 32 33 function closeEdit(){ 34 polyline.disableEditing(); 35 polygon.disableEditing(); 36 circle.disableEditing(); 37 } 38 39 function editPolygon() { 40 var point = new BMapGL.Point(116.404, 39.915); 41 map.centerAndZoom(point, 15); 42 map.enableScrollWheelZoom(true); 43 44 // 绘制面 45 polygon = new BMapGL.Polygon([ 46 new BMapGL.Point(116.387112, 39.920977), 47 new BMapGL.Point(116.385243, 39.913063), 48 new BMapGL.Point(116.394226, 39.917988), 49 new BMapGL.Point(116.401772, 39.921364), 50 new BMapGL.Point(116.41248, 39.927893) 51 ], { 52 strokeColor: 'blue', 53 strokeWeight: 2, 54 strokeOpacity: 0.5 55 }); 56 map.addOverlay(polygon); 57 // 绘制线 58 polyline = new BMapGL.Polyline([ 59 new BMapGL.Point(116.399, 39.910), 60 new BMapGL.Point(116.405, 39.920), 61 new BMapGL.Point(116.423493, 39.907445) 62 ], { 63 strokeColor: 'blue', 64 strokeWeight: 2, 65 strokeOpacity: 0.5 66 }); 67 map.addOverlay(polyline); 68 69 // 绘制圆 70 circle = new BMapGL.Circle(new BMapGL.Point(116.404, 39.915), 500, { 71 strokeColor: 'blue', 72 strokeWeight: 2, 73 strokeOpacity: 0.5 74 }); 75 map.addOverlay(circle); 76 77 openEdit(); 78 } 79 80 /** 81 * 贝塞尔曲线 82 */ 83 function addBezierCurve(){ 84 var point = new BMapGL.Point(113.504, 39.925); 85 map.centerAndZoom(point, 8); 86 map.enableScrollWheelZoom(); 87 88 var path = [ 89 new BMapGL.Point(116.399,39.910), 90 new BMapGL.Point(113.399,39.910), 91 new BMapGL.Point(110.399,39.910) 92 ]; 93 var cp1 = new BMapGL.Point(115.399,40.910); 94 var cp2 = new BMapGL.Point(114.399,38.910); 95 var cp3 = new BMapGL.Point(112.399,38.910); 96 var controlPoints = [ 97 [ 98 cp1, 99 cp2 100 ], 101 [ 102 cp3 103 ] 104 ]; 105 var bc = new BMapGL.BezierCurve(path, controlPoints); 106 map.addOverlay(bc); 107 map.addOverlay(new BMapGL.Marker(cp1)); 108 map.addOverlay(new BMapGL.Marker(cp2)); 109 map.addOverlay(new BMapGL.Marker(cp3)); 110 } 111 112 /** 113 * 棱柱 114 */ 115 function addPrism(){ 116 var point = new BMapGL.Point(116.404, 39.925); 117 map.centerAndZoom(point, 10); 118 map.setTilt(50); 119 map.enableScrollWheelZoom(); 120 var bd = new BMapGL.Boundary(); 121 bd.get('北京市', function (rs) { 122 var count = rs.boundaries.length; //行政区域的点有多少个 123 var pointArray = []; 124 for (var i = 0; i < count; i++) { 125 var path = []; 126 str = rs.boundaries[i].replace(' ', ''); 127 points = str.split(';'); 128 for (var j = 0; j < points.length; j++) { 129 var lng = points[j].split(',')[0]; 130 var lat = points[j].split(',')[1]; 131 path.push(new BMapGL.Point(lng, lat)); 132 } 133 var prism = new BMapGL.Prism(path, 5000, { 134 topFillColor: '#5679ea', 135 topFillOpacity: 0.5, 136 sideFillColor: '#5679ea', 137 sideFillOpacity: 0.9 138 139 }); 140 map.addOverlay(prism); 141 142 var events = ['click', 'mouseover', 'mouseout']; 143 for (let i = 0; i < events.length; i++) { 144 prism.addEventListener(events[i], e => { 145 switch (events[i]) { 146 case 'click': 147 alert('北京市'); 148 break; 149 case 'mouseover': 150 e.target.setTopFillColor('#475fab'); 151 e.target.setTopFillOpacity(1); 152 break; 153 case 'mouseout': 154 e.target.setTopFillColor('#5679ea'); 155 e.target.setTopFillOpacity(0.5); 156 break; 157 } 158 }); 159 } 160 } 161 }); 162 }
3. 页面显示
4 . 源码地址
https://github.com/WhatGIS/bdMap
