百度地图（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