shaojiahao
/
AX.Angular9DataCollection
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity
Browse Source

[修改]修改地图;上传前删除缩略图

develop
邵佳豪 4 years ago
parent
bee372112b
commit
c46b552e0b
9 changed files with 267 additions and 68 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 28
      src/app/ui/basicinfo/basicinfo.component.html
  2. 47
      src/app/ui/basicinfo/basicinfo.component.scss
  3. 204
      src/app/ui/basicinfo/basicinfo.component.ts
  4. 12
      src/app/ui/collection-tools/collection-tools.component.ts
  5. BIN
      src/assets/images/close.png
  6. BIN
      src/assets/images/newposition.png
  7. BIN
      src/assets/images/ok.png
  8. BIN
      src/assets/images/oldposition.png
  9. 44
      src/styles.scss

28
src/app/ui/basicinfo/basicinfo.component.html
Unescape View File

@ -118,15 +118,31 @@
<button type="submit" color="primary" class="submit1" mat-button mat-raised-button>保存</button>
</div>
</div>
<div class="mainright">
<div class="mainright" id="setPosition">
<div style="width: 100%;height: 100%;" id="container">
</div>
<div class="searchinput">
<p>请输入单位名称:</p>
<input id='tipinput' type="text" autocomplete="off">
<p *ngIf="isMapLabel" style="color: red;">(已标注)</p>
<p *ngIf="!isMapLabel" style="color: red;">(未标注)</p>
<div class="gistopbox" *ngIf="isGisTopBox">
<div class="positionItem">
<span>
经度 :
</span>
<div class="itemNum">
{{markerPosition.x || '暂未标注'}}
</div>
</div>
<div class="positionItem">
<span>
纬度 :
</span>
<div class="itemNum">
{{markerPosition.y || '暂未标注'}}
</div>
</div>
<div class="setPosition" (click)="setPosition()">
<mat-icon style="width: 22px;height: 22px;font-size: 22px;">place</mat-icon> 位置
</div>
</div>
</div>
</div>

47
src/app/ui/basicinfo/basicinfo.component.scss
Unescape View File

@ -84,10 +84,51 @@
position: absolute;
left: 0;
top: 0;
p{
}
}
.gistopbox{
position: absolute;
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16);
border-radius: 4px;
left: 5%;
top: 10px;
width: 90%;
height:46px;
background: #FFFFFF;
display: flex;
justify-content: space-around;
align-items: center;
cursor: default;;
.positionItem{
width: 30%;
height: 35px;
display: flex;
align-items: center;
.itemNum{
background: #F2F2F2;
box-sizing: border-box;
padding-left: 10px;
width: 80%;
height: 32px;
line-height: 32px;
margin-left: 5px;
border-radius: 4px;
}
}
.setPosition{
cursor: pointer;
width: 15%;
height: 32px;
background: #2196F3;
color: #fff;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
}
}
}
}
}

204
src/app/ui/basicinfo/basicinfo.component.ts
Unescape View File

@ -1,4 +1,4 @@
import { Component, OnInit, Inject ,ViewChild} from '@angular/core';
import { Component, OnInit, Inject ,ViewChild, Renderer2, ElementRef} from '@angular/core';
import { MatTreeFlatDataSource, MatTreeFlattener } from '@angular/material/tree';
import { FlatTreeControl } from '@angular/cdk/tree';
import { HttpClient,HttpHeaders, HttpEventType } from '@angular/common/http';
@ -84,74 +84,176 @@ export class BasicinfoComponent implements OnInit {
buildingCustomData:any //存储当前建筑的自定义信息
allunittype: any //所有单位类型
allorganizing:any = [] //所有组织机构
constructor(private http: HttpClient, private tree: TreeService, private sanitizer: DomSanitizer, public dialog: MatDialog,public snackBar: MatSnackBar) { }
constructor(private elementRef: ElementRef,public renderer2: Renderer2,private http: HttpClient, private tree: TreeService, private sanitizer: DomSanitizer, public dialog: MatDialog,public snackBar: MatSnackBar) { }
isMapLabel:boolean
ngOnInit(): void {
this.getallunittype()
this.getorganization()
// this.getunitinfo()
this.getunitallbuilding()
}
isMapLabel:boolean
//地图标注位置
marker:any//单位点标记
markerPosition:any = {x: 0, y: 0}//单位坐标
map:any //地图实例
isGisTopBox:boolean = false//点击位置按钮
oldPositionMarker:any //旧位置marker实例
newPositionMarker:any //新位置marker实例
newPositionMarkerContent:any =
'<div class="custom-content-marker">' +
' <img src="/assets/images/newposition.png">' +
'</div>'
newPositionMarkerContentBtn:any =
'<div class="custom-content-marker">' +
' <img src="/assets/images/newposition.png">' +
' <div class="btnbox"><img id="setPositionOk" src="/assets/images/ok.png"><span>|</span><img id="setPositionClose" src="/assets/images/close.png"></div>' +
'</div>'
oldPositionMarkerContent:any =
'<div class="custom-content-marker">' +
' <img src="/assets/images/oldposition.png">' +
'</div>'
//初始化地图
labelGis(){
var map = new AMap.Map('container', {
this.map = new AMap.Map('container', {
zoom:12
})
if(this.isMapLabel){
this.marker = new AMap.Marker({
position: [this.unitinfo.location.x,this.unitinfo.location.y], // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
draggable: true
});
map.add(this.marker);
map.setFitView();
this.marker.on('dragging', (e)=>{
this.markerPosition = {x: e.lnglat.lng, y: e.lnglat.lat}
this.map.on('complete', () => {
this.isGisTopBox = true
});
if(this.isMapLabel){//如果已经标注单位坐标
console.log('已标注单位位置')
this.map.setCenter([this.unitinfo.location.x,this.unitinfo.location.y]);
this.oldPositionMarker = new AMap.Marker({
position: [this.unitinfo.location.x,this.unitinfo.location.y],
content: this.newPositionMarkerContent,
offset: new AMap.Pixel(-15, -18)
})
// 将 markers 添加到地图
this.map.add(this.oldPositionMarker);
}else{
console.log('未标注单位位置')
this.map.setCity('上海市');
}
//输入提示
var autoOptions = {
input: "tipinput"
};
AMap.plugin(['AMap.PlaceSearch','AMap.AutoComplete'], () =>{
var auto = new AMap.AutoComplete(autoOptions);
var placeSearch = new AMap.PlaceSearch({
// map: map
// pageSize: 5, // 单页显示结果条数
// pageIndex: 1 // 页码
}); //构造地点查询类
auto.on("select", (e)=>{
placeSearch.search(e.poi.name, (status, result) => {
if(this.marker){
map.remove(this.marker);
}
this.isMapLabel = true
// 查询成功时，result即对应匹配的POI信息
var poi = result.poiList.pois[0];
this.markerPosition = {x: poi.location.lng, y: poi.location.lat}
this.marker = new AMap.Marker({
position: poi.location, // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
title: poi.name,
draggable: true
});
map.add(this.marker);
map.setFitView();
this.marker.on('dragend', (e)=>{
this.markerPosition = {x: e.lnglat.lng, y: e.lnglat.lat}
})
}
//点击位置按钮
setPosition(){
this.isGisTopBox = false
if(this.isMapLabel){//如果已经标注单位坐标
console.log('已标注单位位置')
if(this.oldPositionMarker){
this.oldPositionMarker.setContent(this.oldPositionMarkerContent)
}
if(this.newPositionMarker){
this.newPositionMarker.setContent(this.oldPositionMarkerContent)
}
this.newPositionMarker = new AMap.Marker({
draggable: true,
position: [this.markerPosition.x,this.markerPosition.y],
content: this.newPositionMarkerContentBtn,
offset: new AMap.Pixel(-15, -18)
});
this.map.add(this.newPositionMarker);
let markerPosition
if(this.markerPosition.x && this.markerPosition.x != 0){
markerPosition = {x: this.markerPosition.x,y: this.markerPosition.y}
}else{
markerPosition = {x: this.map.getCenter().lng,y: this.map.getCenter().lat} //获取当前地图中心位置
}
this.newPositionMarker.on('dragend', (e)=>{
markerPosition = {x: e.lnglat.lng, y: e.lnglat.lat}
})
//点击确定
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionOk'),'click',(event)=>{
this.map.clearMap();
this.isGisTopBox = true
this.newPositionMarker = new AMap.Marker({
position: [markerPosition.x,markerPosition.y],
content: this.newPositionMarkerContent,
offset: new AMap.Pixel(-15, -18)
});
this.markerPosition = markerPosition
this.map.add(this.newPositionMarker);
})
//点击取消
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionClose'),'click',(event)=>{
this.isGisTopBox = true
this.map.clearMap();
this.newPositionMarker = new AMap.Marker({
position: [this.markerPosition.x,this.markerPosition.y],
content: this.newPositionMarkerContent,
offset: new AMap.Pixel(-15, -18)
});
});//注册监听，当选中某条记录时会触发
this.map.add(this.newPositionMarker);
})
}else{
console.log('未标注单位位置')
if(this.newPositionMarker){
this.newPositionMarker.setContent(this.oldPositionMarkerContent)
}
let center
if(this.markerPosition.x && this.markerPosition.x != 0){
center = [this.markerPosition.x,this.markerPosition.y]
}else{
center = this.map.getCenter(); //获取当前地图中心位置
this.map.setCenter(center);
}
this.newPositionMarker = new AMap.Marker({
draggable: true,
position: center,
content: this.newPositionMarkerContentBtn,
offset: new AMap.Pixel(-15, -18)
});
this.map.add(this.newPositionMarker);
let markerPosition
if(this.markerPosition.x && this.markerPosition.x != 0){
markerPosition = {x: this.markerPosition.x,y: this.markerPosition.y}
}else{
markerPosition = {x: this.map.getCenter().lng,y: this.map.getCenter().lat} //获取当前地图中心位置
}
this.newPositionMarker.on('dragend', (e)=>{
markerPosition = {x: e.lnglat.lng, y: e.lnglat.lat}
})
//点击确定
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionOk'),'click',(event)=>{
this.isGisTopBox = true
this.markerPosition = markerPosition
this.map.clearMap();
this.newPositionMarker = new AMap.Marker({
position: [this.markerPosition.x,this.markerPosition.y],
content: this.newPositionMarkerContent,
offset: new AMap.Pixel(-15, -18)
});
this.map.add(this.newPositionMarker);
})
this.renderer2.listen(this.elementRef.nativeElement.querySelector('#setPositionClose'),'click',(event)=>{
this.map.clearMap();
this.isGisTopBox = true
if(this.markerPosition.x && this.markerPosition.x != 0){//说明之前标过点
this.newPositionMarker = new AMap.Marker({
position: [this.markerPosition.x,this.markerPosition.y],
content: this.newPositionMarkerContent,
offset: new AMap.Pixel(-15, -18)
});
this.map.add(this.newPositionMarker);
}
})//取消
}
});
}
//获得所有单位类型
getallunittype() {
this.http.get("/api/BuildingTypes/Simple").subscribe(data => {

12
src/app/ui/collection-tools/collection-tools.component.ts
Unescape View File

@ -284,7 +284,7 @@ export class CollectionToolsComponent implements OnInit {
this.startUploading(imgFile)
}
objectName:any //上传对象名
startUploading (imgFile) {
async startUploading (imgFile) {
let _this = this
let file = imgFile || null //获取上传的文件
let fileSize = file.size || null //上传文件的总大小
@ -293,13 +293,21 @@ export class CollectionToolsComponent implements OnInit {
if (file && fileSize <= shardSize) { //上传文件<=5MB时
let formData = new FormData()
formData.append("file",file)
await new Promise((resolve,reject)=>{
this.http.delete(`/api/Objects/WebPlan2D/${companyId}/${file.name}?x-oss-process=image/resize,m_fixed,h_100,w_100`).subscribe(data=>{
console.log('删除缩略图成功')
resolve('删除缩略图成功')
})
})
this.http.post(`api/Objects/WebPlan2D/${companyId}`,formData).subscribe((data:any)=>{
this.objectName = data.objectName
const config = new MatSnackBarConfig();
config.verticalPosition = 'top';
config.duration = 3000
this.snackBar.open('上传成功','确定',config)
// this.http.delete(`/api/Objects/WebPlan2D/${this.objectName}?x-oss-process=image/resize,m_fixed,h_100,w_100`).subscribe(data=>{
// console.log('删除缩略图成功')
// })
//在原始素材对象和需要循环图片的对象中分别push最新上传的图片
let imgObj = {
"Tag": null,

BIN
src/assets/images/close.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 521 B

BIN
src/assets/images/newposition.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
src/assets/images/ok.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 561 B

BIN
src/assets/images/oldposition.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 KiB

44
src/styles.scss
Unescape View File

@ -80,10 +80,42 @@ table td.mat-footer-cell:last-of-type{
::-webkit-scrollbar-thumb{
background-color: #999;
}
.amap-logo{
display: none;
opacity:0 !important;
#setPosition{
.custom-content-marker {
position: relative;
width: 29px;
height: 36px;
}
.custom-content-marker img {
width: 100%;
height: 100%;
}
.custom-content-marker .btnbox {
position: absolute;
left: -20px;
bottom: -36px;
width: 68px;
height: 30px;
background:#FFFFFF;
border-radius: 60px;
color: #EBEBEB;
display: flex;
justify-content: space-around;
box-sizing: border-box;
padding: 0 5px;
align-items: center;
img{
width: 20px;
height: 20px;
cursor: pointer;
}
}
.custom-content-marker .close-btn:hover{
background: #666;
}
}
.amap-copyright {
opacity:0;
}

Write Preview
Loading…
Cancel
Save