shaojiahao
/
ShangHaiYuan-AnXin
2
0
Fork 0
Code Issues 11 Pull Requests Projects Releases Wiki Activity
Browse Source

gis主页初步完善

上海一张图
陈鹏飞 4 years ago
parent
dd7b077258
commit
ef48519715
7 changed files with 232 additions and 76 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. 61
      src/app/gis-management/gis-labeling/gis-labeling.component.ts
  2. 2
      src/app/ui/collection-tools-plan/collection-tools.component.ts
  3. 40
      src/modules/map/declare/factory.ts
  4. 109
      src/modules/map/declare/gaode-map.ts
  5. 26
      src/modules/map/declare/keda-map.ts
  6. 32
      src/modules/map/declare/map-tools.ts
  7. 38
      src/modules/map/declare/map.d.ts

61
src/app/gis-management/gis-labeling/gis-labeling.component.ts
Unescape View File

@ -3,6 +3,7 @@ import { Component, OnInit, Renderer2, ElementRef, Inject, NgZone, ViewChild } f
import { FormBuilder, FormGroup, FormControl } from '@angular/forms';
import { MatDialog, MatDialogRef, MAT_DIALOG_DATA } from '@angular/material/dialog';
import { MatSnackBar, MatSnackBarConfig } from '@angular/material/snack-bar';
import { IMap } from '@src/modules/map/declare/map';
declare var AMap: any;
declare var QRCode: any;
@ -212,7 +213,7 @@ export class GisLabelingComponent implements OnInit {
})
}
//地图范围圆圈---重点单位
circle = new AMap.Circle({
circle = MapFactory.CircleInstance({
center: null,
radius: 0, //半径
strokeOpacity: 1,
@ -224,7 +225,7 @@ export class GisLabelingComponent implements OnInit {
zIndex: 50,
})
//地图范围圆圈---水源
circleofwater = new AMap.Circle({
circleofwater = MapFactory.CircleInstance({
center: null,
radius: 0, //半径
strokeOpacity: 1,
@ -236,7 +237,7 @@ export class GisLabelingComponent implements OnInit {
zIndex: 50,
})
//地图范围圆圈---消防力量
circleoffireForce = new AMap.Circle({
circleoffireForce = MapFactory.CircleInstance({
center: null,
radius: 0, //半径
strokeOpacity: 1,
@ -248,7 +249,7 @@ export class GisLabelingComponent implements OnInit {
zIndex: 50,
})
//地图范围圆圈---联动力量
circleoflinkageForces = new AMap.Circle({
circleoflinkageForces = MapFactory.CircleInstance({
center: null,
radius: 0, //半径
strokeOpacity: 1,
@ -276,7 +277,7 @@ export class GisLabelingComponent implements OnInit {
this.circle.setCenter(this.markers[0]._position)
this.circle.setMap(this.map)
let Distance
let lnglat = new AMap.LngLat(this.selectedUnit.location.x, this.selectedUnit.location.y) // lng, lat 替换成传入的坐标
let lnglat = MapFactory.LngLatInstance(this.selectedUnit.location.x, this.selectedUnit.location.y) // lng, lat 替换成传入的坐标
if (this.unitAreaDefault == '0') {
this.circle.setRadius(this.Calculationofdistance(this.map.getBounds()) / 2)
Distance = Math.abs(lnglat.offset(0, this.Calculationofdistance(this.map.getBounds()) / 2).lat - this.selectedUnit.location.y)
@ -386,12 +387,12 @@ export class GisLabelingComponent implements OnInit {
div.style.color = fontColor;
div.style.fontSize = '14px';
div.style.textAlign = 'center';
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
context.marker.setOffset(MapFactory.PixelInstance(-size / 2, -size / 2));
context.marker.setContent(div)
};
var _renderMarker = (context) => {
var content = `<img class='clusterImg' src="${context.data[0].image}" alt="">`;
var offset = new AMap.Pixel(-15, -15);
var offset = MapFactory.PixelInstance(-15, -15);
context.marker.setContent(content)
context.marker.setOffset(offset)
}
@ -441,7 +442,7 @@ export class GisLabelingComponent implements OnInit {
// 创建一个自定义内容的 infowindow 实例
this.infoWindow = new AMap.InfoWindow({
position: [item.location.x, item.location.y],
offset: new AMap.Pixel(0, -30),
offset: MapFactory.PixelInstance(0, -30),
content: markerContent,
});
this.infoWindow.open(this.map);
@ -480,7 +481,7 @@ export class GisLabelingComponent implements OnInit {
this.circleoffireForce.setCenter(this.markers[0]._position)
this.circleoffireForce.setMap(this.map)
let Distance
let lnglat = new AMap.LngLat(this.selectedUnit.location.x, this.selectedUnit.location.y) // lng, lat 替换成传入的坐标
let lnglat = MapFactory.LngLatInstance(this.selectedUnit.location.x, this.selectedUnit.location.y) // lng, lat 替换成传入的坐标
if (this.fireForceAreaDefault == '0') {
this.circleoffireForce.setRadius(this.Calculationofdistance(this.map.getBounds()) / 2)
Distance = Math.abs(lnglat.offset(0, this.Calculationofdistance(this.map.getBounds()) / 2).lat - this.selectedUnit.location.y)
@ -557,12 +558,12 @@ export class GisLabelingComponent implements OnInit {
div.style.color = fontColor;
div.style.fontSize = '14px';
div.style.textAlign = 'center';
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
context.marker.setOffset(MapFactory.PixelInstance(-size / 2, -size / 2));
context.marker.setContent(div)
};
var _renderMarker = (context) => {
var content = `<img class='clusterImg' src="${context.data[0].image}" alt="">`;
var offset = new AMap.Pixel(-15, -15);
var offset = MapFactory.PixelInstance(-15, -15);
context.marker.setContent(content)
context.marker.setOffset(offset)
}
@ -601,7 +602,7 @@ export class GisLabelingComponent implements OnInit {
this.circleoflinkageForces.setCenter(this.markers[0]._position)
this.circleoflinkageForces.setMap(this.map)
let Distance
let lnglat = new AMap.LngLat(this.selectedUnit.location.x, this.selectedUnit.location.y) // lng, lat 替换成传入的坐标
let lnglat = MapFactory.LngLatInstance(this.selectedUnit.location.x, this.selectedUnit.location.y) // lng, lat 替换成传入的坐标
if (this.linkageForcesAreaDefault == '0') {
this.circleoflinkageForces.setRadius(this.Calculationofdistance(this.map.getBounds()) / 2)
Distance = Math.abs(lnglat.offset(0, this.Calculationofdistance(this.map.getBounds()) / 2).lat - this.selectedUnit.location.y)
@ -700,12 +701,12 @@ export class GisLabelingComponent implements OnInit {
div.style.color = fontColor;
div.style.fontSize = '14px';
div.style.textAlign = 'center';
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
context.marker.setOffset(MapFactory.PixelInstance(-size / 2, -size / 2));
context.marker.setContent(div)
};
var _renderMarker = (context) => {
var content = `<img class='clusterImg' src="${context.data[0].image}" alt="">`;
var offset = new AMap.Pixel(-15, -15);
var offset = MapFactory.PixelInstance(-15, -15);
context.marker.setContent(content)
context.marker.setOffset(offset)
}
@ -750,7 +751,7 @@ export class GisLabelingComponent implements OnInit {
this.circleofwater.setCenter(this.markers[0]._position)
this.circleofwater.setMap(this.map)
let Distance
let lnglat = new AMap.LngLat(this.selectedUnit.location.x, this.selectedUnit.location.y) // lng, lat 替换成传入的坐标
let lnglat = MapFactory.LngLatInstance(this.selectedUnit.location.x, this.selectedUnit.location.y) // lng, lat 替换成传入的坐标
//如果选择当前的视野范围算出查询半径
if (this.waterAreaDefault == '0') {
@ -840,12 +841,12 @@ export class GisLabelingComponent implements OnInit {
div.style.color = fontColor;
div.style.fontSize = '14px';
div.style.textAlign = 'center';
context.marker.setOffset(new AMap.Pixel(-size / 2, -size / 2));
context.marker.setOffset(MapFactory.PixelInstance(-size / 2, -size / 2));
context.marker.setContent(div)
};
var _renderMarker = (context) => {
var content = `<img class='clusterImgCollection' src="${context.data[0].image}" alt="">`;
var offset = new AMap.Pixel(-15, -15);
var offset = MapFactory.PixelInstance(-15, -15);
context.marker.setContent(content)
context.marker.setOffset(offset)
}
@ -957,7 +958,7 @@ export class GisLabelingComponent implements OnInit {
this.showLeftDiv = false
}
map: any //地图
map: IMap //地图
markers: any = []; //markers标注
//地图2D 3D切换
@ -991,18 +992,14 @@ export class GisLabelingComponent implements OnInit {
//地图初始化
mapInit() {
let that = this
var layer = new AMap.createDefaultLayer({
var layer = MapFactory.LayerInstance({
zooms: [3, 20], //可见级别
visible: true, //是否可见
opacity: 1, //透明度
zIndex: 0, //叠加层级
resizeEnable: true //是否监控地图容器尺寸变化,
})
// that.map = new AMap.Map('map', {
// layers: [layer], //当只想显示标准图层时layers属性可缺省,
// });
that.map = MapFactory.MapInstance('map', { layers: [layer] }).self;
debugger;
}).self;
that.map = MapFactory.MapInstance('map', { layers: [layer] });
that.map.setCity('上海市');
AMap.plugin(["AMap.RangingTool", "AMap.MouseTool"], function () {
that.mouseTool = new AMap.MouseTool(that.map);
@ -1073,7 +1070,7 @@ export class GisLabelingComponent implements OnInit {
imageSize: new AMap.Size(19, 31),
image: "https://webapi.amap.com/theme/v1.3/markers/b/end.png"
}),
offset: new AMap.Pixel(-9, -31)
offset: MapFactory.PixelInstance(-9, -31)
},
midMarkerOptions: {//可缺省
icon: new AMap.Icon({
@ -1081,7 +1078,7 @@ export class GisLabelingComponent implements OnInit {
imageSize: new AMap.Size(19, 31),
image: "https://webapi.amap.com/theme/v1.3/markers/b/mid.png"
}),
offset: new AMap.Pixel(-9, -31)
offset: MapFactory.PixelInstance(-9, -31)
},
lineOptions: {//可缺省
strokeStyle: "solid",
@ -1185,7 +1182,7 @@ export class GisLabelingComponent implements OnInit {
// 创建一个自定义内容的 infowindow 实例
this.infoWindow = new AMap.InfoWindow({
position: [e.location.x, e.location.y],
offset: new AMap.Pixel(0, -30),
offset: MapFactory.PixelInstance(0, -30),
content: markerContent,
});
this.infoWindow.open(this.map);
@ -1198,7 +1195,7 @@ export class GisLabelingComponent implements OnInit {
marker.on('click', (ev) => { //marker点击事件
this.infoWindow = new AMap.InfoWindow({
position: [e.location.x, e.location.y],
offset: new AMap.Pixel(0, -30),
offset: MapFactory.PixelInstance(0, -30),
content: markerContent,
});
this.infoWindow.open(this.map);
@ -1232,7 +1229,7 @@ export class GisLabelingComponent implements OnInit {
this.showLeftDiv = false
this.isShowRouteGIS = true
this.routeEnd = e.name
this.endCoordinate = new AMap.LngLat(e.location.x, e.location.y)
this.endCoordinate = MapFactory.LngLatInstance(e.location.x, e.location.y).self
}
//全景漫游
@ -1313,14 +1310,14 @@ export class GisLabelingComponent implements OnInit {
for (let index = 0; index < result.tips.length; index++) {
const element = result.tips[index];
if (element.location) {
that.startCoordinate = new AMap.LngLat(element.location.lng, element.location.lat)
that.startCoordinate = MapFactory.LngLatInstance(element.location.lng, element.location.lat).self
return
}
}
}
} else {//终点
that.routeEndList = result.tips
that.endCoordinate = new AMap.LngLat(result.tips[0].location.lng, result.tips[0].location.lat)
that.endCoordinate = MapFactory.LngLatInstance(result.tips[0].location.lng, result.tips[0].location.lat).self
}
});

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

@ -19,7 +19,6 @@ import * as ObjectID from 'bson-objectid';
import { AxMessageSystem } from 'src/app/working-area/model/axMessageSystem';
import { MapFactory } from 'src/modules/map/declare/factory';
import { IMap, IMarker, IMarkOptions } from 'src/modules/map/declare/map';
declare var AMap: any
declare global {
interface Window {
@ -1463,6 +1462,7 @@ export class CollectionToolsPlanComponent implements OnInit {
startMarker.id = element.Id
startMarker.on('click', (e) => {
console.log(e)
this.clickId = e.target.id
this.setAssetsProperty(this.canvasData.originaleveryStoreyData.data[e.target.id])
});

40
src/modules/map/declare/factory.ts
Unescape View File

@ -1,15 +1,16 @@
const mapSupplier: number = 1;//1:高德
const mapSupplier: number = 1; //1:高德
import { IMap, IMapOptions, IMarker, IPixel, IMarkOptions, ILngLat } from './map'
import { GaoDeLngLat, GaoDeMap, GaoDeMarker, GaoDePixel } from './gaode-map'
import { IMap, IMapOptions, IMarker, IPixel, IMarkOptions, ILngLat, ILayer, ICircle, IMarkerCluster, IRenderClusterMarker } from './map'
import { GaodeCircle, GaodeLayer, GaoDeLngLat, GaoDeMap, GaoDeMarker, GaoDeMarkerCluster, GaoDePixel, GaoDeRenderClusterMarker } from './gaode-map'
import { KeDaLngLat, KeDaMap, KeDaMarker, KeDaPixel } from './keda-map';
import MapTools from './map-tools';
export class MapFactory {
public static MapInstance(container: string, options: IMapOptions | any): IMap {
let config = MapTools.InstanceConvert(options);
switch (mapSupplier) {
case 1: return new GaoDeMap(container, options);
case 2: return new KeDaMap(container, options);
case 1: return new GaoDeMap(container, config);
case 2: return new KeDaMap(container, config);
default: return null;
}
}
@ -29,6 +30,13 @@ export class MapFactory {
}
}
public static MarkerClusterInstance(map:IMap,list:Object[],options:object): IMarkerCluster {
switch (mapSupplier) {
case 1: return new GaoDeMarkerCluster(map,list,options);
default: return null;
}
}
public static LngLatInstance(x: number, y: number): ILngLat {
switch (mapSupplier) {
case 1: return new GaoDeLngLat(x, y);
@ -37,5 +45,25 @@ export class MapFactory {
}
}
public static LayerInstance(options:any):ILayer{
switch (mapSupplier) {
case 1: return new GaodeLayer(options);
default: return null;
}
}
public static CircleInstance(options:any):ICircle{
switch (mapSupplier) {
case 1: return new GaodeCircle(options);
default: return null;
}
}
public static RenderClusterMarkerInstance(context,dom:string,pixel:IPixel):IRenderClusterMarker{
switch (mapSupplier) {
case 1: return new GaoDeRenderClusterMarker();
default: return null;
}
}
}

109
src/modules/map/declare/gaode-map.ts
Unescape View File

@ -1,15 +1,31 @@
import { ILngLat, IMap, IMapOptions, IMarker, IMarkOptions, IPixel } from './map'
import { ICircle, ILayer, ILngLat, IMap, IMapOptions, IMarker, IMarkerCluster, IMarkOptions, IPixel, IRenderClusterMarker, ISelf } from './map'
import MapTools from './map-tools';
declare var AMap: any;
export class GaoDeMap implements IMap {
self: any;//AMap.Map
class GaodeBasic implements ISelf{
self: any;
discriminator: string="ISelf";
}
export class GaoDeMap extends GaodeBasic implements IMap {
constructor(container: string, options: IMapOptions) {
super();
this.self = new AMap.Map(container, options);
}
discriminator: 'ISelf';
add(obj: any) {
return this.self.add(obj)
getCity(callback: Function) {
return this.self.getCity(callback)
}
setZoomAndCenter(zoom: number, pos: number[]) {
return this.self.setZoomAndCenter(zoom,pos)
}
plugin(eventName: string[], callback: Function) {
return this.self.plugin(eventName,callback)
}
getBounds() {
return this.self.getBounds()
}
add(obj: IMarker) {
return this.self.add(obj.self)
}
remove(obj: any) {
return this.self.remove(obj)
@ -34,22 +50,24 @@ export class GaoDeMap implements IMap {
}
}
export class GaoDePixel implements IPixel {
self: any;
export class GaoDePixel extends GaodeBasic implements IPixel {
constructor(x: number, y: number) {
super();
this.self = new AMap.Pixel(x, y);
}
discriminator: 'ISelf';
}
export class GaoDeMarker implements IMarker {
self: any;
export class GaoDeMarker extends GaodeBasic implements IMarker {
constructor(options: IMarkOptions) {
super();
let conf = MapTools.InstanceConvert(options);
this.self = new AMap.Marker(options);
this.self = new AMap.Marker(conf);
}
setMap() {
this.self.setMap(null)
}
get id(): string {
return this.self
return this.self.id;
}
set id(str: string) {
this.self.id = str;
@ -57,13 +75,70 @@ export class GaoDeMarker implements IMarker {
on(eventName: string, callback: Function): void {
this.self.on(eventName, callback);
}
discriminator: 'ISelf';
}
export class GaoDeLngLat implements ILngLat {
self: any;
export class GaoDeMarkerCluster extends GaodeBasic implements IMarkerCluster {
constructor(map:IMap,list:Object[],options:any) {
super();
options.renderClusterMarker.
this.self = new AMap.MarkerCluster(map.self,list,options)
}
}
export class GaoDeLngLat extends GaodeBasic implements ILngLat {
constructor(x: number, y: number) {
super();
this.self = new AMap.LngLat(x, y);
}
discriminator: 'ISelf';
offset(x: number, y: number) {
return this.self.offset(x,y)
}
}
export class GaodeLayer extends GaodeBasic implements ILayer{
constructor(options: any) {
super();
this.self = new AMap.createDefaultLayer(options);
}
}
export class GaodeCircle extends GaodeBasic implements ICircle{
constructor(options: any) {
super();
this.self = new AMap.Circle(options);
}
setMap(map: any) {
return this.self.setMap(map)
}
setCenter(pos: number[]) {
return this.self.setCenter(pos)
}
setRadius(num:number) {
return this.self.setRadius(num)
}
}
export class GaoDeRenderClusterMarker implements IRenderClusterMarker{
setContent(dom: string | HTMLDivElement) {
throw new Error('Method not implemented.');
}
setOffset(IPixel: any) {
throw new Error('Method not implemented.');
}
getFirstImage(context: any): string {
return context.data[0].image;
}
getCount(context: any): number {
return context.count;
}
// renderMarker(context: any, content: string, pixel: IPixel): void {
// context.marker.setContent(content);
// context.marker.setOffset(pixel);
// }
test = (a)=>{
return (b)=>{a+b}
};
}

26
src/modules/map/declare/keda-map.ts
Unescape View File

@ -8,7 +8,19 @@ export class KeDaMap implements IMap {
opt.configUrl = "";
this.self = new KMap(opt);
}
discriminator: 'ISelf';
getCity(callback: Function) {
throw new Error('Method not implemented.');
}
setZoomAndCenter(zoom: number, pos: number[]) {
throw new Error('Method not implemented.');
}
plugin(eventName: string[], callback: Function) {
throw new Error('Method not implemented.');
}
getBounds() {
throw new Error('Method not implemented.');
}
discriminator= 'ISelf';
add(obj: any) {
throw new Error('Method not implemented.');
}
@ -48,7 +60,7 @@ export class KeDaPixel implements IPixel {
constructor(x: number, y: number) {
this.self = [x, y];
}
discriminator: 'ISelf';
discriminator= 'ISelf';
}
export class KeDaMarker implements IMarker {
@ -60,6 +72,9 @@ export class KeDaMarker implements IMarker {
};
this.self = d;
}
setMap() {
throw new Error('Method not implemented.');
}
get id(): string {
throw new Error('Method not implemented.');
}
@ -69,12 +84,15 @@ export class KeDaMarker implements IMarker {
on(eventName: string, callback: Function): void {
throw new Error('Method not implemented.');
}
discriminator: 'ISelf';
discriminator= 'ISelf';
}
export class KeDaLngLat implements ILngLat {
self: any;
constructor(x: number, y: number) {
this.self = new KMap.LngLat(x, y);
}
discriminator: 'ISelf';
offset(x: number, y: number) {
throw new Error('Method not implemented.');
}
discriminator= 'ISelf';
}

32
src/modules/map/declare/map-tools.ts
Unescape View File

@ -1,15 +1,33 @@
export default class MapTools {
public static InstanceConvert(obj: any): any {
debugger
if (obj == null) {
public static InstanceConvert(data: any): any {
if (data == null) {
return
}
var propNames = Object.getOwnPropertyNames(obj.prototype);
for (var name in propNames) {
if (obj[name].discriminator === "ISelf") {
obj[name] = obj[name].self;
let obj = Object.assign({},data);
let convert = (data:any)=>{
if (data.discriminator === "ISelf") {
return data.self;
}
return data;
}
let process = (obj:any)=>{
if(obj==undefined)return;
if(!(obj instanceof Object)) return;
for (var name in obj) {
if(obj[name] instanceof Array){
for(var j in obj[name]){
process(j);
}
continue;
}
obj[name] = convert(obj[name]);
process(obj[name]);
}
}
process(obj);
return obj;
}
}

38
src/modules/map/declare/map.d.ts vendored
Unescape View File

@ -1,23 +1,21 @@
//AMap.Circle
//AMap.Map
//AMap.Icon
//AMap.Pixel
//AMap.LngLat
export interface ISelf {
self: any;
readonly discriminator: "ISelf";
discriminator: string;
}
export interface IMap extends ISelf {
on(eventName: string, callback: Function);
add(obj: any): any;
plugin(eventName: string[], callback: Function);
add(obj: IMarker): any;
remove(obj: any): any;
setCity(city: string): any;
getCity(callback: Function): any;
setZoom(zoom: number): any;
setZoomAndCenter(zoom: number,pos:number[]): any;
getZoom(): any;
setCenter(x: number[]): any;
getCenter(): any;
getBounds(): any;
}
export interface IMapOptions {
@ -28,19 +26,41 @@ export interface IMapOptions {
export interface IMarker extends ISelf {
id: string;
on(eventName: string, callback: Function);
setMap();
}
export interface IMarkerCluster extends ISelf {
}
export interface IRenderClusterMarker{
getCount(context):number;
getFirstImage(context):string;
setContent(dom:string|HTMLDivElement);
setOffset(IPixel);
}
export class IMarkOptions {
position?: ILngLat;
content?: string;
offset?: IPixel;
}
export interface IPixel extends ISelf {
}
export interface ILngLat extends ISelf {
offset(x:number, y: number)
}
export interface ILayer extends ISelf{
}
export interface ICircle extends ISelf{
setRadius(num:number);
setCenter(pos:number[])
setMap(map:any)
}
Write Preview
Loading…
Cancel
Save