多边形(MultiPolygon)

支持简单多边形、环形、多洞、飞地(多块同属一个逻辑主体)、边线/填充样式、3D拔起等功能。
对行政区划显示、电子围栏、园区范围、服务范围、地块、楼块等应用场景提供支持,满足您对多边形使用上的各类诉求。

Head Head Head

MultiPolygon 类 以图层的方式对多边形覆盖物进行单条或批量绘制,以及删改等操作。



实例说明:
多边形类参考:MultiPolygon
样式参数,参考:PolygonStyle
数据格式,参考:PolygonGeometry

//初始化地图
var map = new TMap.Map('mapContainer', {
    center: new TMap.LatLng(40.038515, 116.272185),//地图显示中心点
    zoom:16 //缩放级别
});
var path = [ //多边形轮廓点串(LatLng数组)
    new TMap.LatLng(40.041054, 116.272303),
    new TMap.LatLng(40.039419, 116.272721),
    new TMap.LatLng(40.039764, 116.274824),
    new TMap.LatLng(40.041374, 116.274491),
]
//初始化polygon
var polygon = new TMap.MultiPolygon({
    id: 'polygon-layer', //图层id
    map: map, //设置多边形图层显示到哪个地图实例中
    //多边形样式
    styles: {
        'polygon': new TMap.PolygonStyle({
            'color': '#3777FF', //面填充色
            'showBorder':false, //是否显示拔起面的边线
            'borderColor': '#00FFFF' //边线颜色
        })
    },
    //多边形数据
    geometries: [
        {
            'id': 'p1', //该多边形在图层中的唯一标识(删除、更新数据时需要)
            'styleId': 'polygon', //绑定样式名
            'paths': path, //多边形轮廓
        }
    ]
});

查看示例

多边形拔起-3D棱柱

与平面多边形不同的是,3D多边形拔起(棱柱)的样式类变成了:ExtrudablePolygonStyle,其可设置3D拔起高度、以及棱柱边线样式。

//初始化地图
var map = new TMap.Map('mapContainer', {
    center: new TMap.LatLng(40.038515, 116.272185),//地图显示中心点
    zoom:16 //缩放级别
});
var path = [
    [40.03854009824492,116.26174449920654],
    [40.03854009824492,116.26260280609131],
    [40.03870438053774,116.26341819763184],
    [40.038342958971086,116.26384735107422],
    [40.037882965115706,116.26423358917236],
    [40.03768582394209,116.2642765045166],
    [40.037455825185845,116.26311779022217],
    [40.037258682777356,116.26328945159912],
    [40.03719296851454,116.26243114471436],
    [40.037488682198514,116.26165866851807],
    [40.03791582192258,116.26208782196045],
    [40.038178675807515,116.26140117645264],
    [40.03847438521698,116.26140117645264]
]
//转为LatLng数组
path = path.map(p => {
    return new TMap.LatLng(p[0], p[1]);
});
 
//初始化polygon
var polygon = new TMap.MultiPolygon({
    id: 'polygon-layer', //图层id
    map: map, //设置多边形图层显示到哪个地图实例中
    //多边形样式
    styles: {
        'polygon': new TMap.ExtrudablePolygonStyle({
            'color': 'rgba(0,125,255,0.7)', //面填充色
            'showBorder':false, //是否显示拔起面的边线
            'extrudeHeight':100, //多边形拔起高度
            'borderColor': '#999' //边线颜色
        })
    },
    //多边形数据
    geometries: [
        {
            'id': 'p1', //该多边形在图层中的唯一标识(删除、更新数据时需要)
            'styleId': 'polygon', //绑定样式名
            'paths': path, //多边形轮廓
        }
    ]
});

查看示例

圆形(MultiCircle)

一般用于周边搜索范围的显示


//初始化地图
var map = new TMap.Map("container", {
  zoom: 12, //设置地图缩放级别
  center: new TMap.LatLng(39.984104, 116.307503) //设置地图中心点坐标
});
//创建圆形覆盖物
var circle = new TMap.MultiCircle({ 
  map,
  styles: { // 设置圆形样式
	'circle': new TMap.CircleStyle({
	  'color': 'rgba(41,91,255,0.16)',
	  'showBorder': true,
	  'borderColor': 'rgba(41,91,255,1)',
	  'borderWidth': 2,
	}),
  },
  geometries: [{
	styleId: 'circle',
	center: center, //圆形中心点坐标 
	radius: 6500,	//半径(单位:米)
  }],
});				

查看示例

这篇文章对您解决问题是否有帮助?

已解决
未解决