vue前端开发仿钉图系列（2）左侧图层列表的开发详解

　　项目开发前还是特别说明一下组件库的重要性，谢谢饿了么团队分享的element组件库，大大节省了页面的开发成本。左侧图层列表核心功能有1、根据图层类型展示点线面2、开关控制右侧地图上点线面的展示和隐藏3、点击数据列表，展示图层数据列表，点击某一行在地图上展示绘图信息，点击查看编辑弹出右侧编辑页面4、字段管理配置的字段，在底部数据列表动态展示5、更多操作相关的功能。整理总结不易，如需全部代码，请联系我15098950589（微信同号）和以往一样，先上效果图。

 

 

 

 

 

　　1、页面dom

<ul>
<li v-for="(item,index) in datalist" :key="item.id">
<div class="dataView">
<div class="topview">
<div>
<span v-if="item.layerType===0" class="dotspan">点</span>
<span v-if="item.layerType===1" class="linespan">线</span>
<span v-if="item.layerType===2" class="areaspan">面</span>
<span class="itemname">{{item.layerName}}</span>
<span v-if="item.isDefault===1" class="itemDefault">默认</span>
</div>
<el-switch v-model="item.isDisplay" :key="item.id" active-color="#409EFF"
inactive-color="#C0CCDA" :active-value="1" :inactive-value="0"
@change="handleGetDataList(item.isDisplay,item.id)">
</el-switch>
</div>
<div class="bottomView">
<span class="dataspan" @click="handleList(index,item)">数据列表({{item.dataSize}})</span>
<el-dropdown>
<span>
<el-button style="height:25px;padding:0;" type="text" size="mini">
{{$t('common.moreBtn')}}<i class="el-icon-arrow-down el-icon--right"></i>
</el-button>
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item v-if="item.layerType===0" style="height: 30px;" @click.native="handleSetDefault(item)">设为默认
</el-dropdown-item>
<el-dropdown-item style="height: 30px;" @click.native="handleConfig(item)">图层配置
</el-dropdown-item>
<el-dropdown-item style="height: 30px;" @click.native="handleManager(index,item.id)">
字段管理
</el-dropdown-item>
<el-dropdown-item style="height: 30px;" @click.native="handleDelete(index,item.id)">删除图层
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</li>
</ul>

　　2、开关状态变更，向父页面传递点线面数据

　　

handleGetDataList(status, id) {
console.log('开关状态', status, id)
let data={
isDisplay:status
}
//更新开关状态
UpdateLayerStatus(data,id).then(res => {

})
//先过滤开启开关的数据
let searchList = this.datalist.filter(item => item.isDisplay === 1)

console.log('过滤开启开关的图层数据',searchList)
var dotMarkers = []
var lineMarkers = []
var polygonMarkers = []

//累加展开所有的marker数据
searchList.forEach(item => {

if (item.layerType === 0) {
dotMarkers.push(...item.list)

} else if (item.layerType === 1) {
lineMarkers.push(...item.list)

} else if (item.layerType === 2) {
polygonMarkers.push(...item.list)
}
})
console.log('过滤开启开关的图层数据1',lineMarkers)
console.log('过滤开启开关的图层数据2',polygonMarkers)
this.$emit("childGetDotMarkerDataList", dotMarkers)
this.$emit("childGetLineMarkerDataList", lineMarkers)
this.$emit("childGetPolygonMarkerDataList", polygonMarkers)
}

　　3、父页面接收数据，绘制点线面

handelGetDotMarkers(markerList) {
//打开前先清空地图和数组数据
this.map.remove(this.markers);
this.markers = []

markerList.forEach(item => {
let that = this;

var marker = new AMap.Marker({
position: new AMap.LngLat(item.longitude, item.latitude),
//icon: 'https://a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png',
anchor: 'bottom-center'
});

marker.on('click', function(e) {
that.handleGetDataItem(item)
})

that.markers.push(marker)
})
this.map.add(this.markers);
}

handleGetLineMarkers(markerList) {
console.log('折线数据', markerList)
//打开前先清空地图和数组数据
this.map.remove(this.polylines);
this.polylines = []

markerList.forEach(item => {
let that = this;

//实例化折线对象
let polyline = new AMap.Polyline({
map: that.map, //初始化的地图变量
path: JSON.parse(item.lineJson), //折线的存放数组，很重中。一般是好多经纬度组成的数组。
strokeWeight: 5,
borderWeight: 1,
strokeStyle: "solid",
outlineColor: '#0d42e3',
strokeColor: "#0d42e3",
strokeOpacity: 0.6
});

polyline.on('click', function(e) {
that.handleGetDataItem(item)
})
that.polylines.push(polyline)
})

this.map.add(this.polylines);

}

handleGetPolygonMarkers(markerList) {
//打开前先清空地图和数组数据
this.map.remove(this.polygons)
this.polygons = []

markerList.forEach(item => {
let that = this;

//实例化面对象
let polygon = new AMap.Polygon({
map: that.map, //初始化的地图变量
path: JSON.parse(item.surJson) //面的存放数组，很重中。一般是好多经纬度组成的数组。
});
polygon.on('click', function(e) {
that.handleGetDataItem(item)
})
that.polygons.push(polygon)
})

this.map.add(this.polygons);
console.log('地图对象1', this.map)

}

 　　整理总结不易，如需全部代码，请联系我15098950589（微信同号）