使用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, //层级
				})
			}
		}
	})
},

最终展示效果:
在这里插入图片描述

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐