多边形(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, //半径(单位:米)
}],
});
这篇文章对您解决问题是否有帮助?
已解决
未解决