1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > 百度地图开发探索 添加覆盖物(圆形 多边形 行政区)围栏 typescript angular

百度地图开发探索 添加覆盖物(圆形 多边形 行政区)围栏 typescript angular

时间:2022-05-11 06:43:24

相关推荐

百度地图开发探索  添加覆盖物(圆形 多边形 行政区)围栏  typescript angular

添加覆盖物

话不多说,先上图,看图写代码(添加点、弹窗的在上一章有整理)

1、圆形围栏:
2、多边形围栏:
3、行政区围栏:

画图:

图形的展示:

// 画围栏drawFence(fenceDetail: any) {this.fenceDetail = null; // 数据处理const pointArr: any = []; // 数据处理this.fencePolygon = []; // 数据处理let pointView: any = []; // 数据处理let points: any = []; // 数据处理const fenceSpecialJson = JSON.parse(fenceDetail.fenceSpecialJson); // 数据处理// 圆if (fenceDetail.fenceShape === 0) {this.fencePolygon = new BMap.Circle(fenceSpecialJson.centerPoint,fenceSpecialJson.radius,{strokeColor: '#6099FF', strokeWeight: 2, strokeOpacity: 0.5 });// 处理圆坐标pointView = fenceDetail.fencePolygon.replace('MULTIPOLYGON(((', '').replace(')))', '').split(',').map((item: string) => {const values = item.split(' ');return {lng: Number(values[0]),lat: Number(values[1]),};});}// 多边形if (fenceDetail.fenceShape === 1) {fenceDetail.fencePoints[0].forEach((ele: any) => {pointArr.push(new BMap.Point(ele.lng, ele.lat));});// 创建多边形this.fencePolygon = new BMap.Polygon(pointArr, {strokeColor: '#6099FF',strokeWeight: 2,strokeOpacity: 0.5,});pointView = pointView.concat(this.fencePolygon.getPath());points = this.fencePolygon.getPath();}let adminPoint: any;// 行政区围栏if (fenceDetail.fenceShape === 2) {const bdary = new BMap.Boundary();// 获取行政区围栏的方法,因为数据已存储 所以我没有重新获取// bdary.get(fenceSpecialJson.administrative, (rs: any) => {fenceDetail.fencePoints.forEach((element: any, i: number) => {pointView = pointView.concat(element);this.fencePolygonArr[i] = new BMap.Polygon(element, {strokeColor: '#6099FF',strokeWeight: 2,strokeOpacity: 0.5,});this.map.addOverlay(this.fencePolygonArr[i]);});adminPoint = fenceDetail.fencePoints[0][0];this.map.setViewport(pointView); // 调整视野if (!this.isPassedValue) {this.fencePop(fenceDetail, adminPoint);}// });}// 行政区围栏外的要逐个添加if (fenceDetail.fenceShape !== 2) {this.map.addOverlay(this.fencePolygon);this.map.setViewport(pointView); // 调整视野 为避免异步,拆开this.fencePop(fenceDetail); // 围栏弹窗}}

圆:需要圆心、半径

Circle:Circle(圆心: Point, 半径: Number, opts: CircleOptions)

CircleOptions:strokeColor-圆形边线颜色 fillColor-圆形填充颜色 strokeOpacity-圆形边线透明度

多边形:需要点数组

Polygon:Polygon(points: Array, opts: PolygonOptions)

行政区 :

Boundary():创建行政区域搜索的对象实例

方法:get(name: String, callback: function) name: 查询省、直辖市、地级市、或县的名称 。回调返回行政区的 数组。再利用多边形的方法进行画围栏

上面的代码中因为数据已存储 所以我没有重新获取,因为行政区围栏有多个数组,所以我将起单独处理,单独添加

围栏添加、视野调整 :

this.map.addOverlay(围栏);

this.map.setViewport(点数组);

注:

因为行政区围栏有多个数组,所以我将起单独处理,单独添加,另外调整视野因为原来获取行政区围栏是通过Boundary获取的,会有异步效果,所以对行政区的视野调整进行了拆分。

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。