195 lines
5.5 KiB
Vue
195 lines
5.5 KiB
Vue
<template>
|
||
<el-drawer
|
||
:title="areaName+'围栏设置'"
|
||
v-model="visible"
|
||
destroy-on-close
|
||
@closed="closeDrawer"
|
||
>
|
||
<el-form
|
||
:model="coordinates"
|
||
label-width="80px"
|
||
style="position:absolute;top:15px;left:200px;"
|
||
>
|
||
<el-form-item label="围栏名称" prop="name">
|
||
<el-input
|
||
v-model="coordinates.railName"
|
||
placeholder="请输入围栏名称"
|
||
clearable
|
||
style="width: 150px;"
|
||
></el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
<el-container v-loading="loading">
|
||
<el-main style="padding: 0 20px 20px 20px;">
|
||
<!--地图-->
|
||
<div id='mapContainer1'></div>
|
||
</el-main>
|
||
<el-footer>
|
||
<el-button
|
||
type="primary"
|
||
:loading="isSaveing"
|
||
@click="submit"
|
||
>
|
||
保存
|
||
</el-button>
|
||
<el-button @click="visible = false">取消</el-button>
|
||
</el-footer>
|
||
</el-container>
|
||
</el-drawer>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
emits: ["success", "closed"],
|
||
props: {
|
||
areaId: {
|
||
type: String,
|
||
},
|
||
areaName: {
|
||
type: String,
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
loading: false,
|
||
visible: true,
|
||
isSaveing: false,
|
||
coordinates:{
|
||
floorNo:'',
|
||
railName:'',
|
||
railType:1,//1:多边形；0表示圆形
|
||
mapType:'1',//点位信息有经纬度则为2，有xy则为1
|
||
color:'1',
|
||
polygon:{
|
||
points:[]
|
||
}
|
||
},
|
||
points:[],
|
||
};
|
||
},
|
||
mounted() {
|
||
this.$nextTick(()=>{
|
||
this.loadMap();
|
||
})
|
||
},
|
||
methods: {
|
||
loadMap(){
|
||
let that = this;
|
||
window.map = new jsmap.JSMap({
|
||
mapType: jsmap.JSMapType.MAP_3D,
|
||
container: 'mapContainer1',
|
||
mapServerURL: 'data/map',
|
||
enableShadows: false, //是否开启阴影 默认false
|
||
enableLighting: false, //是否开发光照 默认false
|
||
luminanceAtZenith: 0.54, //纹理亮度
|
||
scatteringIntensity: 1.0, //镜面强度
|
||
specularIntensity: 0, //散射强度
|
||
mapScaleLevelRange: [16, 23],//比例尺级别范围， 16级到23级,默认[1,24]
|
||
floorControlOptions: {
|
||
floorHeight: 20,//楼层间距
|
||
position: jsmap.JSControlPosition.RIGHT_TOP,//控件位置
|
||
offset: {
|
||
x: 10,
|
||
y: 10,
|
||
}//控件偏移位置
|
||
},
|
||
imageryProvider: jsmap.JSImageryProviderType.VECTOR_OSM,
|
||
backgroundColor: '#3798ff', //背景颜色
|
||
defaultTiltAngle: 30, //默认倾斜角设置，动态效果请参看地图演示平台
|
||
defaultRotateAngle: 60, //默认旋转角设置，动态效果请参看地图演示平台
|
||
});
|
||
window.map.openMapById('0000');
|
||
window.map.on('loadComplete', e => {
|
||
console.log('Map loadComplete!');
|
||
var pointMarker = new jsmap.JSPointMarker({
|
||
color: '#00FF00', //填充颜色
|
||
size: 10, //尺寸
|
||
position: new jsmap.JSPoint(114.628074820438, 38.8157131095379, 0), //坐标
|
||
floorId: 2, //楼层id,默认为1（地面）
|
||
outlineColor: '#CD5C5C', //边线颜色
|
||
outlineWidth: 2, //边线宽
|
||
depthTest: true, //是否开启深度检测
|
||
show: true, //是否显示
|
||
allowPicking: true, //是否允许点击
|
||
displayCondition: new jsmap.JSDisplayCondition(0.0, 1000), //可见范围
|
||
nearFarScale: new jsmap.JSNearFarScale(0.0, 10.0, 500, 0.5), //比例缩放
|
||
callback: (node) => {
|
||
console.log(node);
|
||
}//回调事件
|
||
});
|
||
window.map.addMarker(pointMarker);
|
||
let drawTool2 = new jsmap.JSDrawToolControl({
|
||
position: jsmap.JSControlPosition.RIGHT_TOP, //画图工具在容器中的相对位置，当前为右上
|
||
offset: {
|
||
x: 30,
|
||
y: 30
|
||
}, //偏移量
|
||
drawMode: jsmap.JSDrawMode.POLYGON, //画图类型POINT:画点 POLYLINE:画线 POLYGON:画面
|
||
//画图结束的回调，返回所画的面信息
|
||
callback: (feature) => {
|
||
console.log('add', feature);
|
||
console.log(feature.properties);//type:POLYGON;id:"";name:"";floorNo:"";floorId:""
|
||
console.log(feature.geometry);//feature.geometry.coordinates:[[],[]]面数组
|
||
this.coordinates.floorNo = feature.properties.floorNo;
|
||
this.coordinates.floorId = feature.properties.floorId;
|
||
that.points = feature.geometry.coordinates[0];
|
||
},
|
||
//移除相应面的回调，返回相应面信息
|
||
removeCallback: (feature) => {
|
||
// console.log('remove', feature);
|
||
},
|
||
//编辑相应面的回调，返回相应面信息
|
||
editCallback: (feature) => {
|
||
// console.log('editCallback', feature);
|
||
},
|
||
//定位到相应面的回调，返回相应面信息
|
||
locateCallback: (feature) => {
|
||
// console.log('locate..', feature);
|
||
}
|
||
});
|
||
window.map.addControl(drawTool2);
|
||
});
|
||
},
|
||
closeDrawer() {
|
||
this.$emit('closed');
|
||
},
|
||
//表单提交方法
|
||
submit() {
|
||
let that = this;
|
||
let pointXY = [];
|
||
let tool = new jsmap.JSMapCoordTool(window.map);
|
||
let points = that.points;
|
||
if(points.length>0){
|
||
that.isSaveing = true;
|
||
that.coordinates.color = 'rgba(255,0,0,.4)';
|
||
debugger;
|
||
points.forEach(item=>{
|
||
debugger;
|
||
let coordinate = {x:parseFloat(item[0]),y:parseFloat(item[1])};
|
||
let pixel = tool.mapToScreenCoordinate(coordinate);
|
||
pointXY.push(pixel);
|
||
});
|
||
that.coordinates.polygon.points = pointXY;
|
||
that.$API.am.area.bindRail.req(that.areaId,that.coordinates)
|
||
.then(res => {
|
||
that.isSaveing = false;
|
||
that.visible = false;
|
||
that.$emit("success");
|
||
that.$message.success("操作成功");
|
||
return res
|
||
}).catch(err => {
|
||
that.isSaveing = false;
|
||
return err
|
||
})
|
||
}else{}
|
||
},
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
.el-drawer.rtl{
|
||
width: 90%!important;
|
||
}
|
||
</style>
|