百度地图绘制围栏,圆形,多边形,行政区域

this.map.clearOverlays();//先清除覆盖物
      if (row.circle) {
        let item = row.circle;
        var point = new BMapGL.Point(item.lon / 1000000, item.lat / 1000000);
        this.map.centerAndZoom(point, 15);
        // 创建圆 位置 范围 样式属性
        var circle = new BMapGL.Circle(point, 500, {
          strokeColor: "blue",
          strokeWeight: 2,
          strokeOpacity: 0.5
        });
        this.map.addOverlay(circle);
      } else if (row.polygon) {
        let list = [];
        row.polygon.forEach(element => {
          list.push(
            new BMapGL.Point(element.lon / 1000000, element.lat / 1000000)
          );
        });
        // 创建多边形   点集合 样式属性
        var polygon = new BMapGL.Polygon(list, {
          strokeColor: "blue",
          strokeWeight: 2,
          strokeOpacity: 0.5
        });
        this.map.addOverlay(polygon);
      } else if (row.city) {
        let dist = new BMapGL.DistrictLayer({
          name: "(" + row.city.name + ")",//城市名字  浙江省杭州市
          kind: 1,
          fillColor: "#618bf8",
          strokeColor: "#daeafa",
          viewport: true
        });
        this.map.addDistrictLayer(dist);
      }

DistrictLayer类参考

构造函数:

构造函数说明
BMapGL.DistrictLayer(options, callback)行政区划聚合图层构造函数

参数说明:

构造函数类型说明
optionsObject行政区划图层样式配置对象
callbackFunction回调函数

options属性变量:

options属性类型说明
nameArray欲获取的行政区划名称,格式为字符串或数组。如果是大区情况,只能采用字符串格式,如"(北京,天津,河北),山东"
kindnumber行政区划显示级别,0为省级行政区划,1为市级行政区划,2为区级行政区划
strokeColorstring描边颜色,默认为'#ff0'
strokeOpacitynumber描边线透明度
strokeWeightnumber描边线粗细,默认为1
fillColorstring填充颜色,默认为'#00f'。格式为字符串或数组。注意,目前行政区划没有名称标识,数组颜色与返回子层级区域顺序一一对应,暂不支持对子层级的特定市区县设置指定颜色。
viewportboolean是否自动根据行政区划来调节到最佳显示视野,默认为false

方法:

方法名说明
map.addDistrictLayer(district: DistrictLayer)地图上添加行政区划图层,参数district为指定的行政区划实例
map.removeDistrictLayer(district: DistrictLayer)地图上移除指定的行政区划图层,参数district为指定的行政区划实例
searchBoundary(options, callback(res))搜索某个行政区划,通过回调函数实现自定义行政区划绘制。其中参数options同上面的构造函数的参数配置,callback(res)为回调函数。
  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
百度地图API提供了绘制多边形的功能。通过使用百度地图JavaScript API提供的相关函数和方法,我们可以很方便地绘制出具有多个边界的多边形。 在绘制多边形的Demo中,首先需要在HTML页面中引入百度地图的JavaScript库,并创建一个地图的容器。然后,通过调用`new BMap.Map`函数创建一个地图实例。接下来,可以通过百度地图提供的`getDrivingRoute`函数来获取行驶路线的坐标点,从而确定多边形的边界。 一旦获得了路线的坐标点,我们可以通过`new BMap.Polygon`函数创建一个多边形实例,并将路线的坐标点作为参数传入。然后,调用地图实例的`addOverlay`方法将多边形添加到地图中。 为了能够看到整个多边形,可以使用`setViewport`方法将地图的中心和缩放级别调整到合适的位置。最后,使用`enableScrollWheelZoom`方法可以开启鼠标滚轮缩放功能。 通过以上步骤,我们就可以成功绘制出一个路多边形的Demo。当用户使用鼠标滚轮进行缩放时,地图中的多边形也会相应地进行放大或缩小,从而展现出不同的效果。 值得一提的是,百度地图API还支持自定义多边形的样式和交互行为。我们可以通过设置多边形的属性,如线条颜色、填充颜色、透明度等,来实现不同的样式效果。同时,可以注册相关的事件监听器,如点击事件、鼠标移入、移出事件等,以实现对多边形的响应。 通过百度地图API提供的绘制多边形的功能,我们可以方便地在地图上展示复杂的路线和区域边界信息,为用户提供更加直观和交互性的地图应用体验。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值