|
|
|
import { HtmlRender, ICircle, IIcon, IIconOptions, ILayer, ILngLat, IMap, IMapOptions, IMarker, IMarkerCluster, IMarkOptions, IMouseTool, IInfoWindow, IPixel, IRenderClusterMarker, ISelf, ISize, PixelRender, ITileLayer, IDriving, IDrivingOptions, IAutocomplete, IPlaceSearch } from './map'
|
|
|
|
import MapTools from './map-tools';
|
|
|
|
declare var AMap: any;
|
|
|
|
declare var AMapUI: any;
|
|
|
|
|
|
|
|
class GaodeBasic implements ISelf {
|
|
|
|
self: any;
|
|
|
|
discriminator: string = "ISelf";
|
|
|
|
}
|
|
|
|
|
|
|
|
export class GaoDeMap extends GaodeBasic implements IMap {
|
|
|
|
/// plugins:同步加载插件
|
|
|
|
constructor(container: string, options: IMapOptions,plugins?:string[]) {
|
|
|
|
super();
|
|
|
|
this.self = new AMap.Map(container, options);
|
|
|
|
if(!!plugins && plugins.length){
|
|
|
|
for(var i in plugins){
|
|
|
|
let name = plugins[i];
|
|
|
|
if(name.indexOf('AMap.')==-1)continue;
|
|
|
|
let pObj = eval(`new ${plugins[i]}()`);
|
|
|
|
this.self.plugin(pObj);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
containerToLngLat(e: any) {
|
|
|
|
return this.self.containerToLngLat(e)
|
|
|
|
}
|
|
|
|
clearMap() {
|
|
|
|
return this.self.clearMap();
|
|
|
|
}
|
|
|
|
distance(a: number[], b: number[]) {
|
|
|
|
return AMap.GeometryUtil.distance(a, b);
|
|
|
|
}
|
|
|
|
getCity(callback: Function) {
|
|
|
|
return this.self.getCity(callback)
|
|
|
|
}
|
|
|
|
setZoomAndCenter(zoom: number, pos: number[]) {
|
|
|
|
return this.self.setZoomAndCenter(zoom, pos)
|
|
|
|
}
|
|
|
|
plugin(pluginNames: string[], callback: Function) {
|
|
|
|
let names = pluginNames.filter(s=>s.indexOf("AMap.")==0);
|
|
|
|
return this.self.plugin(names, callback)
|
|
|
|
}
|
|
|
|
getBounds() {
|
|
|
|
return this.self.getBounds()
|
|
|
|
}
|
|
|
|
add(obj: IMarker | any) {
|
|
|
|
return this.self.add(obj.self)
|
|
|
|
}
|
|
|
|
remove(obj: any) {
|
|
|
|
return this.self.remove(obj.self)
|
|
|
|
}
|
|
|
|
setCity(city: string) {
|
|
|
|
return this.self.setCity(city)
|
|
|
|
}
|
|
|
|
setZoom(zoom) {
|
|
|
|
return this.self.setZoom(zoom)
|
|
|
|
}
|
|
|
|
setCenter(pos: any) {
|
|
|
|
return this.self.setCenter(pos)
|
|
|
|
}
|
|
|
|
getCenter():ILngLat {
|
|
|
|
let d = this.self.getCenter();
|
|
|
|
return new GaoDeLngLat(0,0,d);
|
|
|
|
}
|
|
|
|
getZoom() {
|
|
|
|
return this.self.getZoom();
|
|
|
|
}
|
|
|
|
on(eventName: string, callback: Function): void {
|
|
|
|
return this.self.on(eventName, callback);
|
|
|
|
}
|
|
|
|
setAdministrativeAreaStyle(component: any, getData?: Function, setData?: Function) {//自定义 行政区划 样式
|
|
|
|
let that = this
|
|
|
|
let level = sessionStorage.getItem("level")
|
|
|
|
AMapUI.loadUI(['geo/DistrictExplorer'], (DistrictExplorer) => {
|
|
|
|
|
|
|
|
let colors = [
|
|
|
|
"#3366cc", "#dc3912", "#ff9900", "#109618", "#990099", "#0099c6", "#dd4477", "#66aa00",
|
|
|
|
"#b82e2e", "#316395", "#994499", "#22aa99", "#aaaa11", "#6633cc", "#e67300", "#8b0707",
|
|
|
|
"#651067", "#329262", "#5574a6", "#3b3eac"
|
|
|
|
];
|
|
|
|
|
|
|
|
//创建一个实例
|
|
|
|
let districtExplorer = new DistrictExplorer({
|
|
|
|
map: that.self,
|
|
|
|
eventSupport: true, //打开事件支持
|
|
|
|
});
|
|
|
|
|
|
|
|
let adcode = 310000 //上海行政编码
|
|
|
|
districtExplorer.loadAreaNode(adcode, (error, areaNode) => {
|
|
|
|
|
|
|
|
//更新地图视野
|
|
|
|
that.self.setBounds(areaNode.getBounds(), null, null, true);
|
|
|
|
|
|
|
|
//设置定位节点,支持鼠标位置识别
|
|
|
|
//注意节点的顺序,前面的高优先级
|
|
|
|
districtExplorer.setAreaNodesForLocating(areaNode);
|
|
|
|
|
|
|
|
//清除已有的绘制内容
|
|
|
|
districtExplorer.clearFeaturePolygons();
|
|
|
|
|
|
|
|
//绘制子区域
|
|
|
|
districtExplorer.renderSubFeatures(areaNode, (feature, i) => {
|
|
|
|
let fillColor = colors[i % colors.length];
|
|
|
|
let strokeColor = colors[colors.length - 1 - i % colors.length];
|
|
|
|
return {
|
|
|
|
cursor: 'default',
|
|
|
|
bubble: true,
|
|
|
|
strokeColor: strokeColor, //线颜色
|
|
|
|
strokeOpacity: 1, //线透明度
|
|
|
|
strokeWeight: 1, //线宽
|
|
|
|
fillColor: fillColor, //填充色
|
|
|
|
fillOpacity: 0.5, //填充透明度
|
|
|
|
};
|
|
|
|
});
|
|
|
|
|
|
|
|
//绘制父区域
|
|
|
|
districtExplorer.renderParentFeature(areaNode, {
|
|
|
|
cursor: 'default',
|
|
|
|
bubble: true,
|
|
|
|
strokeColor: 'black', //线颜色
|
|
|
|
strokeOpacity: 1, //线透明度
|
|
|
|
strokeWeight: 1, //线宽
|
|
|
|
fillColor: null, //填充色
|
|
|
|
fillOpacity: 0.5, //填充透明度
|
|
|
|
});
|
|
|
|
|
|
|
|
// 更新地图视野以适合区划面
|
|
|
|
that.self.setFitView(districtExplorer.getAllFeaturePolygons());
|
|
|
|
});
|
|
|
|
|
|
|
|
if (level == "0" || level == "1" || level == "2") {
|
|
|
|
//区域内点击
|
|
|
|
districtExplorer.on('featureClick', (e, feature) => {
|
|
|
|
getData && getData.call(component, feature);
|
|
|
|
|
|
|
|
let props = feature.properties;
|
|
|
|
adcode = props.adcode
|
|
|
|
let fillColor2
|
|
|
|
if (props.level == 'city') {
|
|
|
|
fillColor2 = null
|
|
|
|
} else {
|
|
|
|
fillColor2 = '#d0daee'
|
|
|
|
}
|
|
|
|
districtExplorer.loadAreaNode(adcode, (error, areaNode) => {
|
|
|
|
|
|
|
|
//设置定位节点,支持鼠标位置识别
|
|
|
|
//注意节点的顺序,前面的高优先级
|
|
|
|
districtExplorer.setAreaNodesForLocating(areaNode);
|
|
|
|
|
|
|
|
//清除已有的绘制内容
|
|
|
|
districtExplorer.clearFeaturePolygons();
|
|
|
|
|
|
|
|
//绘制子区域
|
|
|
|
districtExplorer.renderSubFeatures(areaNode, (feature, i) => {
|
|
|
|
let fillColor = colors[i % colors.length];
|
|
|
|
let strokeColor = colors[colors.length - 1 - i % colors.length];
|
|
|
|
return {
|
|
|
|
cursor: 'default',
|
|
|
|
bubble: true,
|
|
|
|
strokeColor: strokeColor, //线颜色
|
|
|
|
strokeOpacity: 1, //线透明度
|
|
|
|
strokeWeight: 1, //线宽
|
|
|
|
fillColor: fillColor, //填充色
|
|
|
|
fillOpacity: 0.5, //填充透明度
|
|
|
|
};
|
|
|
|
});
|
|
|
|
|
|
|
|
//绘制父区域
|
|
|
|
districtExplorer.renderParentFeature(areaNode, {
|
|
|
|
cursor: 'default',
|
|
|
|
bubble: true,
|
|
|
|
strokeColor: 'black', //线颜色
|
|
|
|
strokeOpacity: 1, //线透明度
|
|
|
|
strokeWeight: 1, //线宽
|
|
|
|
fillColor: fillColor2, //填充色
|
|
|
|
fillOpacity: 0.5, //填充透明度
|
|
|
|
});
|
|
|
|
|
|
|
|
// 更新地图视野以适合区划面
|
|
|
|
that.self.setFitView(districtExplorer.getAllFeaturePolygons());
|
|
|
|
});
|
|
|
|
});
|
|
|
|
|
|
|
|
districtExplorer.on('outsideClick', (e) => {
|
|
|
|
setData && setData.call(component);
|
|
|
|
let adcode = 310000
|
|
|
|
districtExplorer.loadAreaNode(adcode, (error, areaNode) => {
|
|
|
|
|
|
|
|
//设置定位节点,支持鼠标位置识别
|
|
|
|
//注意节点的顺序,前面的高优先级
|
|
|
|
districtExplorer.setAreaNodesForLocating(areaNode);
|
|
|
|
|
|
|
|
//清除已有的绘制内容
|
|
|
|
districtExplorer.clearFeaturePolygons();
|
|
|
|
|
|
|
|
//绘制子区域
|
|
|
|
districtExplorer.renderSubFeatures(areaNode, (feature, i) => {
|
|
|
|
let fillColor = colors[i % colors.length];
|
|
|
|
let strokeColor = colors[colors.length - 1 - i % colors.length];
|
|
|
|
return {
|
|
|
|
cursor: 'default',
|
|
|
|
bubble: true,
|
|
|
|
strokeColor: strokeColor, //线颜色
|
|
|
|
strokeOpacity: 1, //线透明度
|
|
|
|
strokeWeight: 1, //线宽
|
|
|
|
fillColor: fillColor, //填充色
|
|
|
|
fillOpacity: 0.5, //填充透明度
|
|
|
|
};
|
|
|
|
});
|
|
|
|
|
|
|
|
//绘制父区域
|
|
|
|
districtExplorer.renderParentFeature(areaNode, {
|
|
|
|
cursor: 'default',
|
|
|
|
bubble: true,
|
|
|
|
strokeColor: 'black', //线颜色
|
|
|
|
strokeOpacity: 1, //线透明度
|
|
|
|
strokeWeight: 1, //线宽
|
|
|
|
fillColor: null, //填充色
|
|
|
|
fillOpacity: 0.5, //填充透明度
|
|
|
|
});
|
|
|
|
|
|
|
|
// 更新地图视野以适合区划面
|
|
|
|
that.self.setFitView(districtExplorer.getAllFeaturePolygons());
|
|
|
|
});
|
|
|
|
})
|
|
|
|
}
|
|
|
|
|
|
|
|
}); //end
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export class GaoDePixel extends GaodeBasic implements IPixel {
|
|
|
|
constructor(x: number, y: number) {
|
|
|
|
super();
|
|
|
|
this.x = x;
|
|
|
|
this.y = y;
|
|
|
|
this.self = new AMap.Pixel(x, y);
|
|
|
|
}
|
|
|
|
getArray(): number[] {
|
|
|
|
return [this.x,this.y];
|
|
|
|
}
|
|
|
|
|
|
|
|
x: number;
|
|
|
|
y: number;
|
|
|
|
}
|
|
|
|
|
|
|
|
export class GaoDeMarker extends GaodeBasic implements IMarker {
|
|
|
|
constructor(options: IMarkOptions) {
|
|
|
|
super();
|
|
|
|
let conf = MapTools.ExplicitConvert(options);
|
|
|
|
this.self = new AMap.Marker(conf);
|
|
|
|
this._position = this.self._position;
|
|
|
|
}
|
|
|
|
setContent(html: string) {
|
|
|
|
return this.self.setContent(html)
|
|
|
|
}
|
|
|
|
setPosition(x: ILngLat|number[]) {
|
|
|
|
x = (x as ILngLat).getArray == undefined ? x:(x as ILngLat).getArray();
|
|
|
|
return this.self.setPosition(x)
|
|
|
|
}
|
|
|
|
_position: number[]
|
|
|
|
setMap() {
|
|
|
|
return this.self.setMap(null)
|
|
|
|
}
|
|
|
|
get id(): string {
|
|
|
|
return this.self.id;
|
|
|
|
}
|
|
|
|
set id(str: string) {
|
|
|
|
this.self.id = str;
|
|
|
|
}
|
|
|
|
on(eventName: string, callback: Function): void {
|
|
|
|
return this.self.on(eventName, callback);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export class GaoDeMarkerCluster extends GaodeBasic implements IMarkerCluster {
|
|
|
|
constructor(map: IMap, list: Object[], options: any) {
|
|
|
|
super();
|
|
|
|
let conf = MapTools.ExplicitConvert(options);
|
|
|
|
|
|
|
|
AMap.plugin('AMap.MarkerClusterer',()=>{
|
|
|
|
this.self = new AMap.MarkerCluster(map.self, list, conf)
|
|
|
|
});
|
|
|
|
}
|
|
|
|
on(eventName: string, callback: Function): void {
|
|
|
|
return this.self.on(eventName, callback);
|
|
|
|
}
|
|
|
|
setData(list: any[]) {
|
|
|
|
return this.self.setData(list)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export class GaoDeLngLat extends GaodeBasic implements ILngLat {
|
|
|
|
constructor(x: number, y: number,me?:any) {
|
|
|
|
super();
|
|
|
|
if(me==undefined)
|
|
|
|
this.self = new AMap.LngLat(x, y);
|
|
|
|
else
|
|
|
|
this.self = me;
|
|
|
|
}
|
|
|
|
|
|
|
|
typeName="LngLat";
|
|
|
|
get KL():number{
|
|
|
|
return this.lng;
|
|
|
|
}
|
|
|
|
get kT():number{
|
|
|
|
return this.lat;
|
|
|
|
}
|
|
|
|
getArray(): number[] {
|
|
|
|
return [this.lng,this.lat];
|
|
|
|
}
|
|
|
|
get lng(): number {
|
|
|
|
return this.self.lng;
|
|
|
|
}
|
|
|
|
get lat(): number {
|
|
|
|
return this.self.lat;
|
|
|
|
}
|
|
|
|
offset(x: number, y: number):ILngLat {
|
|
|
|
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 GaodeIcon extends GaodeBasic implements IIcon {
|
|
|
|
constructor(options: IIconOptions) {
|
|
|
|
super();
|
|
|
|
options.size = options.size.self
|
|
|
|
options.imageSize = options.imageSize.self
|
|
|
|
this.self = new AMap.Icon(options);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export class GaodeSize extends GaodeBasic implements ISize {
|
|
|
|
constructor(x: number, y: number) {
|
|
|
|
super();
|
|
|
|
this.self = new AMap.Size(x, y);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export class GaodeTileLayer extends GaodeBasic implements ITileLayer {
|
|
|
|
constructor() {
|
|
|
|
super();
|
|
|
|
}
|
|
|
|
Satellite() {
|
|
|
|
this.self = new AMap.TileLayer.Satellite()
|
|
|
|
return this
|
|
|
|
}
|
|
|
|
RoadNet() {
|
|
|
|
this.self = new AMap.TileLayer.RoadNet()
|
|
|
|
return this
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export class GaodeDriving extends GaodeBasic implements IDriving {
|
|
|
|
constructor(options: IDrivingOptions) {
|
|
|
|
super();
|
|
|
|
options.map = options.map.self
|
|
|
|
AMap.plugin('AMap.Driving',()=>{
|
|
|
|
this.self = new AMap.Driving(options)
|
|
|
|
})
|
|
|
|
}
|
|
|
|
search(posStart?: ILngLat, posEnd?: ILngLat, callback?: Function) {
|
|
|
|
return this.self.search(posStart.getArray(),posEnd.getArray(),callback)
|
|
|
|
}
|
|
|
|
clear() {
|
|
|
|
return this.self.clear()
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export class GaodeAutocomplete extends GaodeBasic implements IAutocomplete {
|
|
|
|
constructor(city: Object) {
|
|
|
|
super();
|
|
|
|
AMap.plugin('AMap.AutoComplete',()=>{
|
|
|
|
this.self = new AMap.Autocomplete(city)
|
|
|
|
})
|
|
|
|
}
|
|
|
|
on(eventName: string, callback: Function) {
|
|
|
|
return this.self.on(eventName, callback)
|
|
|
|
}
|
|
|
|
search(address: string, callback: Function) {
|
|
|
|
return this.self.search(address, callback)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export class GaodePlaceSearch extends GaodeBasic implements IPlaceSearch {
|
|
|
|
constructor() {
|
|
|
|
super();
|
|
|
|
AMap.plugin('AMap.PlaceSearch',()=>{
|
|
|
|
this.self = new AMap.PlaceSearch()
|
|
|
|
})
|
|
|
|
}
|
|
|
|
search(text: string, callback: Function) {
|
|
|
|
return this.self.search(text, callback)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export class GaodeMouseTool extends GaodeBasic implements IMouseTool {
|
|
|
|
constructor(map: IMap) {
|
|
|
|
super();
|
|
|
|
AMap.plugin(["AMap.RangingTool", "AMap.MouseTool"],()=>{
|
|
|
|
this.self = new AMap.MouseTool(map.self);
|
|
|
|
})
|
|
|
|
}
|
|
|
|
rule(options: any) {
|
|
|
|
let conf = MapTools.ExplicitConvert(options);
|
|
|
|
return this.self.rule(conf)
|
|
|
|
}
|
|
|
|
measureArea(options: any) {
|
|
|
|
return this.self.measureArea(options)
|
|
|
|
}
|
|
|
|
close(isTrue: boolean) {
|
|
|
|
return this.self.close(isTrue)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export class GaodeInfoWindow extends GaodeBasic implements IInfoWindow {
|
|
|
|
constructor(options: any) {
|
|
|
|
super();
|
|
|
|
options.offset = options.offset.self
|
|
|
|
this.self = new AMap.InfoWindow(options);
|
|
|
|
}
|
|
|
|
open(map: IMap) {
|
|
|
|
return this.self.open(map.self)
|
|
|
|
}
|
|
|
|
listen(html: any, event: string, callback: Function) {
|
|
|
|
return this.self.listen(html, event, callback)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export class GaodeCircle extends GaodeBasic implements ICircle {
|
|
|
|
constructor(options: Object) {
|
|
|
|
super();
|
|
|
|
this.self = new AMap.Circle(options);
|
|
|
|
}
|
|
|
|
setMap(map: IMap) {
|
|
|
|
return this.self.setMap(map.self)
|
|
|
|
}
|
|
|
|
setCenter(pos: number[]) {
|
|
|
|
return this.self.setCenter(pos)
|
|
|
|
}
|
|
|
|
setRadius(num: number) {
|
|
|
|
return this.self.setRadius(num)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
export class GaoDeRenderClusterMarker implements IRenderClusterMarker, ISelf {
|
|
|
|
discriminator: string = "ISelfCombine";
|
|
|
|
getFirstImages(context: any): string {
|
|
|
|
return context.data[0].image;
|
|
|
|
}
|
|
|
|
contentRender: HtmlRender;
|
|
|
|
contentNonRender: HtmlRender;
|
|
|
|
pixelRender: PixelRender;
|
|
|
|
pixelNonRender: PixelRender;
|
|
|
|
get self(): any {
|
|
|
|
return {
|
|
|
|
renderClusterMarker: (context) => {
|
|
|
|
context.marker.setContent(this.contentRender(context.count));
|
|
|
|
context.marker.setOffset(this.pixelRender(context.count).self);
|
|
|
|
},
|
|
|
|
renderMarker: (context) => {
|
|
|
|
context.marker.setContent(this.contentNonRender(this.getFirstImages(context)));
|
|
|
|
context.marker.setOffset(this.pixelNonRender(context.count).self);
|
|
|
|
}
|
|
|
|
};
|
|
|
|
}
|
|
|
|
}
|