使用polygons获取面图层数据
首先,使用polygons获取面图层数据
<!-- 地图展示 -->
<view class="mymap">
<map class="mymap__map" :latitude="mapxx.latitude" :longitude="mapxx.longitude"
:scale="mapxx.scale" :markers="mapxx.markers" :polygons="mapxx.polygons" @callouttap="toMap()" @labeltap="toMap()">
</map>
</view>
然后,在data中配置变量信息
data(){
return{
mapxx:{
latitude:35.931616, //维度
longitude:120.008822, //经度
scale:16,
szwz:'',
markers:{
id:0,
latitude:35.931616,
longitude:120.008822,
iconPath:'/static/images/map/nav-wyrd.png',
width: infowidth,
height: infoheight,
},
polygons: []
},
}
}
最后,在mounted方法中调用初始化方法
mounted(){
this.initmapPolygon();
},
initmapPolygon(){
// debugger;
runSQL(`select sde.ST_AsText(shape) as point from sde.dt_amap where sszb = '${this.zbxx.sszb}';`).then(res=>{
if(res[0].length>0){
// 处理获取到的数据信息
let Spoint = null;
let pathPoint = null;
let pointss = [];
let stystrokecolor = ['#FF7A79','#F9B93D','#54DE43','#87ABFF','#FF8D48','#18CEA6','#22DCF7','#A087FF','#FF48BB','#FFA1EA','#FF4A67','#FFDE5F']
let styfillcolor = ['#FF7A791a','#F9B93D1a','#54DE431a','#87ABFF1a','#FF8D481a','#18CEA61a','#22DCF71a','#A087FF1a','#FF48BB1a','#FFA1EA1a','#FF4A671a','#FFDE5F1a']
let fillColor = "";
let strokeColor = "";
for (let i = 0; i < res[0].length; i++) {
pointss = [];
Spoint = res[0][i].POINT.value;
Spoint = Spoint.substring(
Spoint.indexOf("((") + 3,
Spoint.length - 2
);
Spoint = Spoint.split(", ");
let path = [];
fillColor = styfillcolor[i];
strokeColor = stystrokecolor[i];
for (let a = 0; a < Spoint.length; a++) {
pathPoint = Spoint[a].split(" "); //i = 6
pointss.push({
["longitude"]: Number(pathPoint[0]),
["latitude"]: Number(pathPoint[1])
})
}
this.mapxx.polygons.push({
//多边形的坐标数组
points: pointss,
fillColor: fillColor, //填充颜色
strokeColor: strokeColor, //描边颜色
strokeWidth: 2, //描边宽度
zIndex: 1, //层级
})
}
}
})
},
最终展示效果: