|
|
|
|
@ -1,5 +1,6 @@
|
|
|
|
|
import { Component, OnInit } from '@angular/core'; |
|
|
|
|
declare var AMap: any; |
|
|
|
|
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar'; |
|
|
|
|
|
|
|
|
|
@Component({ |
|
|
|
|
selector: 'app-water-road', |
|
|
|
|
@ -8,39 +9,73 @@ declare var AMap: any;
|
|
|
|
|
}) |
|
|
|
|
export class WaterRoadComponent implements OnInit { |
|
|
|
|
|
|
|
|
|
constructor() { } |
|
|
|
|
|
|
|
|
|
ngOnInit(): void { |
|
|
|
|
constructor(public snackBar: MatSnackBar) { } |
|
|
|
|
isshow:boolean = true |
|
|
|
|
textcontant:any = localStorage.getItem(sessionStorage.getItem("companyId") + "waterroad") || "" |
|
|
|
|
clickicon(){ |
|
|
|
|
this.isshow = !this.isshow |
|
|
|
|
} |
|
|
|
|
save(){ |
|
|
|
|
localStorage.setItem(sessionStorage.getItem("companyId") + "waterroad",this.textcontant) |
|
|
|
|
const config = new MatSnackBarConfig(); |
|
|
|
|
config.verticalPosition = 'top'; |
|
|
|
|
config.duration = 3000 |
|
|
|
|
this.snackBar.open('保存成功','确定',config); |
|
|
|
|
} |
|
|
|
|
ngAfterViewInit(): void { |
|
|
|
|
window.setTimeout(()=>{ |
|
|
|
|
this.mapInit() |
|
|
|
|
},0) |
|
|
|
|
map:any //地图
|
|
|
|
|
ngOnInit(): void { |
|
|
|
|
setTimeout(() => { |
|
|
|
|
this.creatMap() |
|
|
|
|
|
|
|
|
|
}, 0); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
//地图初始化
|
|
|
|
|
mapInit () { |
|
|
|
|
//创建地图
|
|
|
|
|
let map = new AMap.Map('map', { |
|
|
|
|
resizeEnable: true, |
|
|
|
|
cursor: 'default', |
|
|
|
|
zooms:[6,18], |
|
|
|
|
|
|
|
|
|
creatMap(){ |
|
|
|
|
var satellite = new AMap.TileLayer.Satellite(); |
|
|
|
|
var roadNet = new AMap.TileLayer.RoadNet(); |
|
|
|
|
|
|
|
|
|
// 创建一个 icon
|
|
|
|
|
var startIcon = new AMap.Icon({ |
|
|
|
|
image: '../../../assets/images/fireHydrant.png', |
|
|
|
|
// // 图标所用图片大小
|
|
|
|
|
imageSize: new AMap.Size(20, 20), |
|
|
|
|
// // 图标取图偏移量
|
|
|
|
|
// imageOffset: new AMap.Pixel(-9, -3)
|
|
|
|
|
}); |
|
|
|
|
let arr = [{lng:108.299405,lat: 22.894884}, |
|
|
|
|
{lng:108.597409,lat: 22.80883}, |
|
|
|
|
{lng:108.689419,lat: 23.061775}, |
|
|
|
|
{lng:107.971188,lat: 22.950537}, |
|
|
|
|
{lng:107.847592,lat: 23.090833}, |
|
|
|
|
{lng:108.176374,lat: 22.790585}, |
|
|
|
|
{lng:108.407087,lat: 22.671522}, |
|
|
|
|
{lng:108.158521,lat: 22.61322}, |
|
|
|
|
{lng:107.925062,lat: 22.565038}, |
|
|
|
|
{lng:108.180494,lat: 22.501616}, |
|
|
|
|
{lng:107.743222,lat: 22.535121}] |
|
|
|
|
let Arr = [] |
|
|
|
|
arr.forEach(item=>{ |
|
|
|
|
let viaMarker = new AMap.Marker({ |
|
|
|
|
position: new AMap.LngLat(item.lng, item.lat), |
|
|
|
|
icon: startIcon, |
|
|
|
|
offset: new AMap.Pixel(-10, -10) |
|
|
|
|
}) |
|
|
|
|
Arr.push(viaMarker) |
|
|
|
|
}) |
|
|
|
|
|
|
|
|
|
this.map = new AMap.Map('map',{ |
|
|
|
|
zoom: 16 |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
this.map.on('click', (e) => { |
|
|
|
|
console.log(e.lnglat.getLng() + ',' + e.lnglat.getLat())
|
|
|
|
|
}); |
|
|
|
|
// //构造路线导航类 实际路线
|
|
|
|
|
// let driving = new AMap.Driving({
|
|
|
|
|
// map: map,
|
|
|
|
|
// showTraffic: true,
|
|
|
|
|
// isOutline: true,
|
|
|
|
|
// });
|
|
|
|
|
// driving.search( [{keyword: '广西消防总队',city:'广西'},{keyword: '万科公园里',city:'广西'},{keyword: '南宁明安医院',city:'广西'}], );
|
|
|
|
|
// //构造路线导航类 导航路线
|
|
|
|
|
// let drivingTwo = new AMap.Driving({
|
|
|
|
|
// map: map,
|
|
|
|
|
// showTraffic: false,
|
|
|
|
|
// });
|
|
|
|
|
// drivingTwo.search( [{keyword: '广西消防总队',city:'广西'},{keyword: '南宁明安医院',city:'广西'}], );
|
|
|
|
|
//function (status,result) { console.log(status,result) } //地图路线 匹配起始点回调函数
|
|
|
|
|
//new AMap.LngLat(116.379028, 39.865042), new AMap.LngLat(116.427281, 39.903719) / [{keyword: '淄博站',city:'山东'},{keyword: '淄博北站',city:'山东'}], //路线可搜索, 可用坐标
|
|
|
|
|
|
|
|
|
|
this.map.setCity('南宁市') |
|
|
|
|
this.map.add(Arr);//火源标点
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
