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
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 183
      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. 103
      src/modules/map/declare/keda-map.ts

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

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

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
}
}

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

Write Preview
Loading…
Cancel
Save