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

搜索框下拉整理..part

上海一张图
赵旭 4 years ago
parent
dc6abd98b9
commit
bcf0ec6e1d
6 changed files with 181 additions and 181 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 85
      src/app/data-collection/data-collection.module.ts
  2. 37
      src/modules/map/declare/KeDaSearch/keDaSearch.ts
  3. 0
      src/modules/map/declare/component/SearchDownListPlugins/SearchDownList.html
  4. 0
      src/modules/map/declare/component/SearchDownListPlugins/SearchDownList.scss
  5. 39
      src/modules/map/declare/component/SearchDownListPlugins/SearchDownList.ts
  6. 101
      src/modules/map/declare/keda-map.ts

85
src/app/data-collection/data-collection.module.ts
Unescape View File

@ -1,56 +1,55 @@
import { NgModule } from '@angular/core'; import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common'; import { CommonModule } from '@angular/common';
import {A11yModule} from '@angular/cdk/a11y'; import { A11yModule } from '@angular/cdk/a11y';
import {DragDropModule} from '@angular/cdk/drag-drop'; import { DragDropModule } from '@angular/cdk/drag-drop';
import {PortalModule} from '@angular/cdk/portal'; import { PortalModule } from '@angular/cdk/portal';
import {ScrollingModule} from '@angular/cdk/scrolling'; import { ScrollingModule } from '@angular/cdk/scrolling';
import {CdkStepperModule} from '@angular/cdk/stepper'; import { CdkStepperModule } from '@angular/cdk/stepper';
import {CdkTableModule} from '@angular/cdk/table'; import { CdkTableModule } from '@angular/cdk/table';
import {CdkTreeModule} from '@angular/cdk/tree'; import { CdkTreeModule } from '@angular/cdk/tree';
import {MatAutocompleteModule} from '@angular/material/autocomplete'; import { MatAutocompleteModule } from '@angular/material/autocomplete';
import {MatBadgeModule} from '@angular/material/badge'; import { MatBadgeModule } from '@angular/material/badge';
import {MatBottomSheetModule} from '@angular/material/bottom-sheet'; import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
import {MatButtonModule} from '@angular/material/button'; import { MatButtonModule } from '@angular/material/button';
import {MatButtonToggleModule} from '@angular/material/button-toggle'; import { MatButtonToggleModule } from '@angular/material/button-toggle';
import {MatCardModule} from '@angular/material/card'; import { MatCardModule } from '@angular/material/card';
import {MatCheckboxModule} from '@angular/material/checkbox'; import { MatCheckboxModule } from '@angular/material/checkbox';
import {MatChipsModule} from '@angular/material/chips'; import { MatChipsModule } from '@angular/material/chips';
import {MatStepperModule} from '@angular/material/stepper'; import { MatStepperModule } from '@angular/material/stepper';
import {MatDatepickerModule} from '@angular/material/datepicker'; import { MatDatepickerModule } from '@angular/material/datepicker';
import {MatDialogModule} from '@angular/material/dialog'; import { MatDialogModule } from '@angular/material/dialog';
import {MatDividerModule} from '@angular/material/divider'; import { MatDividerModule } from '@angular/material/divider';
import {MatExpansionModule} from '@angular/material/expansion'; import { MatExpansionModule } from '@angular/material/expansion';
import {MatGridListModule} from '@angular/material/grid-list'; import { MatGridListModule } from '@angular/material/grid-list';
import {MatIconModule} from '@angular/material/icon'; import { MatIconModule } from '@angular/material/icon';
import {MatInputModule} from '@angular/material/input'; import { MatInputModule } from '@angular/material/input';
import {MatListModule} from '@angular/material/list'; import { MatListModule } from '@angular/material/list';
import {MatMenuModule} from '@angular/material/menu'; import { MatMenuModule } from '@angular/material/menu';
import {MatNativeDateModule, MatRippleModule, MatOption} from '@angular/material/core'; import { MatNativeDateModule, MatRippleModule, MatOption } from '@angular/material/core';
import {MatPaginatorModule} from '@angular/material/paginator'; import { MatPaginatorModule } from '@angular/material/paginator';
import {MatProgressBarModule} from '@angular/material/progress-bar'; import { MatProgressBarModule } from '@angular/material/progress-bar';
import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
import {MatRadioModule} from '@angular/material/radio'; import { MatRadioModule } from '@angular/material/radio';
import {MatSelectModule} from '@angular/material/select'; import { MatSelectModule } from '@angular/material/select';
import {MatSidenavModule} from '@angular/material/sidenav'; import { MatSidenavModule } from '@angular/material/sidenav';
import {MatSliderModule} from '@angular/material/slider'; import { MatSliderModule } from '@angular/material/slider';
import {MatSlideToggleModule} from '@angular/material/slide-toggle'; import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import {MatSnackBarModule} from '@angular/material/snack-bar'; import { MatSnackBarModule } from '@angular/material/snack-bar';
import {MatSortModule} from '@angular/material/sort'; import { MatSortModule } from '@angular/material/sort';
import {MatTableModule} from '@angular/material/table'; import { MatTableModule } from '@angular/material/table';
import {MatTabsModule} from '@angular/material/tabs'; import { MatTabsModule } from '@angular/material/tabs';
import {MatToolbarModule} from '@angular/material/toolbar'; import { MatToolbarModule } from '@angular/material/toolbar';
import {MatTooltipModule} from '@angular/material/tooltip'; import { MatTooltipModule } from '@angular/material/tooltip';
import {MatTreeModule} from '@angular/material/tree'; import { MatTreeModule } from '@angular/material/tree';
import { FormsModule, ReactiveFormsModule } from '@angular/forms'; import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { DataCollectionRoutingModule } from './data-collection.routing'; import { DataCollectionRoutingModule } from './data-collection.routing';
import { AddWater, WaterCollectionComponent } from './water-collection/water-collection.component'; import { AddWater, WaterCollectionComponent } from './water-collection/water-collection.component';
import { AddFireForce, FireForceComponent, ViewDetails } from './fire-force/fire-force.component'; import { AddFireForce, FireForceComponent, ViewDetails } from './fire-force/fire-force.component';
import { AddLinkageForce, LinkageForcesComponent, ViewDetails2 } from './linkage-forces/linkage-forces.component'; import { AddLinkageForce, LinkageForcesComponent, ViewDetails2 } from './linkage-forces/linkage-forces.component';
import { NzTreeModule } from 'ng-zorro-antd/tree'; import { NzTreeModule } from 'ng-zorro-antd/tree';
import { KedaSearchComponent } from '@src/modules/map/declare/KeDaSearch/keDaSearch';
@NgModule({ @NgModule({
declarations: [WaterCollectionComponent, FireForceComponent, LinkageForcesComponent,AddWater,AddFireForce,ViewDetails,AddLinkageForce,ViewDetails2,KedaSearchComponent], declarations: [WaterCollectionComponent, FireForceComponent, LinkageForcesComponent, AddWater, AddFireForce, ViewDetails, AddLinkageForce, ViewDetails2],
imports: [ imports: [
CommonModule, CommonModule,
A11yModule, A11yModule,

37
src/modules/map/declare/KeDaSearch/keDaSearch.ts
Unescape View File

@ -1,37 +0,0 @@
import { Component, OnInit, Inject } from '@angular/core';
import { AutocompleteSelect } from '../map';
@Component({
selector: 'keDa-Search',
templateUrl: './keDaSearch.html',
styleUrls: ['./keDaSearch.scss']
})
export class KedaSearchComponent {
constructor() { }
static instance: KedaSearchComponent
public searchList:AutocompleteSelect[] = []; //list
public leftCss:string = '0px';
public topCss:string = '0px';
public minWidthCss:string = '0px';
ngOnInit(): void {
KedaSearchComponent.instance = this
}
// input 添加监听事件
addDOMEvent (id:string) {
let input = document.getElementById(id)
let DOM = input.getBoundingClientRect()
// this.left = DOM.left
// this.top = DOM.top + DOM.height + 2
// this.minWidth = DOM.width
}
select(e) {
console.log(e)
}
}

0
src/modules/map/declare/KeDaSearch/keDaSearch.html → src/modules/map/declare/component/SearchDownListPlugins/SearchDownList.html
Unescape View File

0
src/modules/map/declare/KeDaSearch/keDaSearch.scss → src/modules/map/declare/component/SearchDownListPlugins/SearchDownList.scss
Unescape View File

39
src/modules/map/declare/component/SearchDownListPlugins/SearchDownList.ts
Unescape View File

@ -0,0 +1,39 @@
import { Component, OnInit, Inject } from '@angular/core';
import { AutocompleteSelect } from '../../map';
@Component({
selector: 'SearchDownList',
templateUrl: './SearchDownList.html',
styleUrls: ['./SearchDownList.scss']
})
export class SearchDownList implements OnInit {
private $input;
constructor(inputListenId: string) {
this.$input = document.getElementById(inputListenId);
}
public searchList: AutocompleteSelect[] = []; //list
public leftCss: string = '0px';
public topCss: string = '0px';
public minWidthCss: string = '0px';
ngOnInit(): void {
}
// input 添加监听事件
addDOMEvent() {
let input = document.getElementById(id)
let DOM = input.getBoundingClientRect()
// this.left = DOM.left
// this.top = DOM.top + DOM.height + 2
// this.minWidth = DOM.width
}
select(e) {
console.log(e)
}
watch() {
//TODO:修改leftCss ,topCss
}
}

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

@ -1,15 +1,14 @@
import { AutocompleteSearchCallback, AutocompleteSelectCallback, HtmlRender, IAutocomplete, ICircle, IDriving, IInfoWindow, ILayer, ILngLat, IMap, IMapOptions, IMarker, IMarkerCluster, IMarkOptions, IMouseTool, IPixel, IPlaceSearch, IRenderClusterMarker, ISelf, ITileLayer, PixelRender, PlaceSearchCallback } from './map' import { AutocompleteSearchCallback, AutocompleteSelectCallback, HtmlRender, IAutocomplete, ICircle, IDriving, IInfoWindow, ILayer, ILngLat, IMap, IMapOptions, IMarker, IMarkerCluster, IMarkOptions, IMouseTool, IPixel, IPlaceSearch, IRenderClusterMarker, ISelf, ITileLayer, PixelRender, PlaceSearchCallback } from './map'
import * as ObjectID from 'bson-objectid'; import * as ObjectID from 'bson-objectid';
import { KedaSearchComponent } from './KeDaSearch/keDaSearch';
declare var KMap: any; declare var KMap: any;
class KedaBasic implements ISelf { class KedaBasic implements ISelf {
self: any; self: any;
discriminator: string = "ISelf"; discriminator: string = "ISelf";
} }
const cityPosition:number[] = [121.469167918, 31.232262275]; //上海市 坐标 const cityPosition: number[] = [121.469167918, 31.232262275]; //上海市 坐标
const beforCity:string = "上海市"; //当前城市 const beforCity: string = "上海市"; //当前城市
const cityCode:string = "310000"; //当前城市 行政编码 const cityCode: string = "310000"; //当前城市 行政编码
export class KeDaMap extends KedaBasic implements IMap { export class KeDaMap extends KedaBasic implements IMap {
constructor(container: string, options: IMapOptions) { //地图初始化 constructor(container: string, options: IMapOptions) { //地图初始化
@ -19,7 +18,7 @@ export class KeDaMap extends KedaBasic implements IMap {
opt.configUrl = "/assets/kmap/Kmap.config.json"; opt.configUrl = "/assets/kmap/Kmap.config.json";
opt.targetCoordinateType = "WGS84"; opt.targetCoordinateType = "WGS84";
opt.center = cityPosition; opt.center = cityPosition;
opt.zoom === undefined? opt.zoom = 9 : opt.zoom = opt.zoom - 2 opt.zoom === undefined ? opt.zoom = 9 : opt.zoom = opt.zoom - 2
let mapLayer = function () { let mapLayer = function () {
if (opt.viewMode && opt.viewMode == "3D") { if (opt.viewMode && opt.viewMode == "3D") {
let data = { let data = {
@ -44,9 +43,9 @@ export class KeDaMap extends KedaBasic implements IMap {
containerToLngLat(e: IPixel): ILngLat { containerToLngLat(e: IPixel): ILngLat {
let d = null; let d = null;
this.self.getGeoPointByPixel({ this.self.getGeoPointByPixel({
ePoint:e.self, ePoint: e.self,
callback:(e)=>{ callback: (e) => {
d = new KeDaLngLat(e.data.lng,e.data.lat); d = new KeDaLngLat(e.data.lng, e.data.lat);
} }
}) })
return d; return d;
@ -63,7 +62,7 @@ export class KeDaMap extends KedaBasic implements IMap {
startPoint: a, startPoint: a,
endPoint: b, endPoint: b,
units: "meters", units: "meters",
callback: (res)=>{ num = res.data } callback: (res) => { num = res.data }
}) })
return num return num
} }
@ -76,7 +75,7 @@ export class KeDaMap extends KedaBasic implements IMap {
getBounds() { getBounds() {
let bounds let bounds
this.self.getBounds({ this.self.getBounds({
callback: (res)=>{ callback: (res) => {
bounds = res.data bounds = res.data
console.log(res.data) console.log(res.data)
} }
@ -84,7 +83,7 @@ export class KeDaMap extends KedaBasic implements IMap {
return bounds return bounds
} }
add(obj: any) { add(obj: any) {
if(obj && obj.typeName === "KeDaMarker"){ if (obj && obj.typeName === "KeDaMarker") {
let _marker = (obj as KeDaMarker); let _marker = (obj as KeDaMarker);
_marker.map = this; _marker.map = this;
this.self.addMarkers(_marker.self) this.self.addMarkers(_marker.self)
@ -95,7 +94,7 @@ export class KeDaMap extends KedaBasic implements IMap {
} }
} }
remove(obj: any) { remove(obj: any) {
if(obj && obj.typeName === "KeDaMarker"){ if (obj && obj.typeName === "KeDaMarker") {
this.self.removeMarkersByType({ markerType: obj.id }) this.self.removeMarkersByType({ markerType: obj.id })
} else if (obj && obj.typeName === "KeDaInfoWindow") { } else if (obj && obj.typeName === "KeDaInfoWindow") {
this.self.removeAllPopups() this.self.removeAllPopups()
@ -173,15 +172,15 @@ export class KeDaPixel extends KedaBasic implements IPixel {
this.self = [x, y]; this.self = [x, y];
} }
getArray(): number[] { getArray(): number[] {
return this. self; return this.self;
} }
x: number; x: number;
y: number; y: number;
} }
export class KeDaMarker extends KedaBasic implements IMarker { export class KeDaMarker extends KedaBasic implements IMarker {
public map:KeDaMap; public map: KeDaMap;
public typeName:string = "KeDaMarker"; public typeName: string = "KeDaMarker";
constructor(options: IMarkOptions) { constructor(options: IMarkOptions) {
super(); super();
let pos = [] let pos = []
@ -197,9 +196,9 @@ export class KeDaMarker extends KedaBasic implements IMarker {
let marker = { let marker = {
data: points, data: points,
url: '/assets/images/dingwei.png', url: '/assets/images/dingwei.png',
offset: options.offset? options.offset.self : null, offset: options.offset ? options.offset.self : null,
markerType: "KedaMarker", markerType: "KedaMarker",
ended: (res) => {this.id = res.data;} ended: (res) => { this.id = res.data; }
}; };
this.self = marker; this.self = marker;
this._position = pos this._position = pos
@ -213,8 +212,8 @@ export class KeDaMarker extends KedaBasic implements IMarker {
this.map.self.setMarkerProperty({ this.map.self.setMarkerProperty({
type: "markerType", type: "markerType",
markerType: "KedaMarker", markerType: "KedaMarker",
points:[ points: [
{htmlText:html} { htmlText: html }
] ]
}) })
} }
@ -222,7 +221,7 @@ export class KeDaMarker extends KedaBasic implements IMarker {
this.map.self.setMarkerProperty({ this.map.self.setMarkerProperty({
type: "markerType", type: "markerType",
markerType: "KedaMarker", markerType: "KedaMarker",
points:[position] points: [position]
}) })
} }
setMap() { setMap() {
@ -234,17 +233,17 @@ export class KeDaMarker extends KedaBasic implements IMarker {
set id(str: string) { set id(str: string) {
this.self.id = str this.self.id = str
} }
public bindObj=[]; // event public bindObj = []; // event
on(eventName: string, callback: Function): void { on(eventName: string, callback: Function): void {
this.bindObj.push({ this.bindObj.push({
eventName:eventName, eventName: eventName,
callback:callback, callback: callback,
}); });
this.startBindEvent(); this.startBindEvent();
} }
startBindEvent(){ startBindEvent() {
if(this.map!==undefined){ if (this.map !== undefined) {
this.bindObj.forEach((item,index)=>{ this.bindObj.forEach((item, index) => {
this.map.self.addEventOnMarkers({ this.map.self.addEventOnMarkers({
selector: `.${this.id}`, selector: `.${this.id}`,
event: item.eventName, event: item.eventName,
@ -263,44 +262,44 @@ export class KeDaLngLat extends KedaBasic implements ILngLat {
this.lat = lat this.lat = lat
this.self = this; this.self = this;
} }
offset(x: number, y: number): ILngLat{ offset(x: number, y: number): ILngLat {
return x = 2 * Math.asin(Math.sin(Math.round(x)/12756274) / Math.cos(this.kT* Math.PI / 180)), return x = 2 * Math.asin(Math.sin(Math.round(x) / 12756274) / Math.cos(this.kT * Math.PI / 180)),
x = this.KL + 180 *x / Math.PI, x = this.KL + 180 * x / Math.PI,
y = 2*Math.asin(Math.round(y)/12756274), y = 2 * Math.asin(Math.round(y) / 12756274),
new KeDaLngLat(x,y); new KeDaLngLat(x, y);
} }
typeName="LngLat"; typeName = "LngLat";
lng: number; lng: number;
lat: number; lat: number;
get KL():number{ get KL(): number {
return this.lng; return this.lng;
} }
get kT():number{ get kT(): number {
return this.lat; return this.lat;
} }
getArray(): number[] { getArray(): number[] {
return [this.lng,this.lat]; return [this.lng, this.lat];
} }
} }
export class KedaDriving extends KedaBasic implements IDriving { //路线导航 export class KedaDriving extends KedaBasic implements IDriving { //路线导航
public map:KeDaMap; public map: KeDaMap;
public policy:number; // 0:快捷模式, 4:躲避拥堵 public policy: number; // 0:快捷模式, 4:躲避拥堵
public id:string; public id: string;
constructor(options: any) { constructor(options: any) {
super(); super();
this.map = options.map as KeDaMap this.map = options.map as KeDaMap
options.policy === undefined? this.policy = 0 : this.policy = options.policy options.policy === undefined ? this.policy = 0 : this.policy = options.policy
} }
clear() { clear() {
this.map.self.removeRoutePlanning({ id:this.id }) this.map.self.removeRoutePlanning({ id: this.id })
} }
search(posStart?: ILngLat, posEnd?: ILngLat, callback?: Function) { search(posStart?: ILngLat, posEnd?: ILngLat, callback?: Function) {
let params = { let params = {
startPoint: posStart.getArray(), startPoint: posStart.getArray(),
endPoint: posEnd.getArray(), endPoint: posEnd.getArray(),
error: ()=>{ alert('路线规划失败！') }, error: () => { alert('路线规划失败！') },
ended: (res)=>{ this.id = res.data } ended: (res) => { this.id = res.data }
} }
if (this.policy === 0) { //快捷模式 if (this.policy === 0) { //快捷模式
this.map.self.createMinDistanceRoutePlanning(params) this.map.self.createMinDistanceRoutePlanning(params)
@ -312,11 +311,11 @@ export class KedaDriving extends KedaBasic implements IDriving { //路线导航
export class KedaAutocomplete extends KedaBasic implements IAutocomplete { //Autocomplete 关键字搜索 export class KedaAutocomplete extends KedaBasic implements IAutocomplete { //Autocomplete 关键字搜索
private component: any private component: any
constructor(options: any,component: any) { constructor(options: any, component: any) {
super(); super();
this.component = component this.component = component
if (options && options.input != undefined) { //绑定input框搜索事件 if (options && options.input != undefined) { //绑定input框搜索事件
KedaSearchComponent.instance.addDOMEvent(options.input) //KedaSearchComponent.instance.addDOMEvent(options.input)
} }
} }
on(eventName: string, callback: AutocompleteSelectCallback) { on(eventName: string, callback: AutocompleteSelectCallback) {
@ -327,7 +326,7 @@ export class KedaAutocomplete extends KedaBasic implements IAutocomplete { //Aut
code: cityCode, code: cityCode,
keyword: address, keyword: address,
searchType: [], searchType: [],
callback: (res)=>{ callback: (res) => {
console.log(res) console.log(res)
} }
}) })
@ -346,8 +345,8 @@ export class KedaPlaceSearch extends KedaBasic implements IPlaceSearch { //Place
} }
export class KedaCircle extends KedaBasic implements ICircle { //圆形 图层 export class KedaCircle extends KedaBasic implements ICircle { //圆形 图层
public typeName:string = "KeDaCircle"; public typeName: string = "KeDaCircle";
public id:string; public id: string;
constructor(options: any) { constructor(options: any) {
super(); super();
let circle = { let circle = {
@ -372,8 +371,8 @@ export class KedaCircle extends KedaBasic implements ICircle { //圆形 图层
}, },
radius: 0, radius: 0,
draggable: false, draggable: false,
updateHandler: (res)=>{ console.log(res) }, updateHandler: (res) => { console.log(res) },
end: (res)=>{ this.id = res } end: (res) => { this.id = res }
} }
this.self = circle this.self = circle
} }
@ -414,7 +413,7 @@ export class KedaRenderClusterMarkerr extends KedaBasic implements IRenderCluste
} }
export class KedaInfoWindow extends KedaBasic implements IInfoWindow { //信息窗体 export class KedaInfoWindow extends KedaBasic implements IInfoWindow { //信息窗体
public typeName:string = "KeDaInfoWindow"; public typeName: string = "KeDaInfoWindow";
constructor(options) { constructor(options) {
super(); super();
let opt = { let opt = {
@ -429,7 +428,7 @@ export class KedaInfoWindow extends KedaBasic implements IInfoWindow { //信息
map.self.addPopup(this.self); map.self.addPopup(this.self);
} }
listen(html: any, event: string, callback: Function) { listen(html: any, event: string, callback: Function) {
html.addEventListener(event,callback) html.addEventListener(event, callback)
} }
} }

Write Preview
Loading…
Cancel
Save