angular4总结项目中的知识点-leaflet相关调用,组件传值看下一章

1. ng-template 是angular4中的用于获取#id的值,例子如下:

 

<ng-template let-col let-monitor=“rowData” pTemplate=“body”>

<input #chk type=“checkbox” (change)=“regularChecked(monitor,chk)” />

</ng-template>

2.如果用到父子组件传值,父组件中用到子组件nc-overlay-panel等

   

<nc-overlay-panel class=“monitor-panel” [panelTitle]=“chartPanelTitle” [show]=“true” >

</nc-overlay-panel>

子组件nc-overlay-panel中要写入类似router-outlet类似的占位符

 

<div class=“overlay-panel” *ngIf=“show”>

<!– content –>

<div class=“overlay-panel-content”>

<ng-content></ng-content>

</div>

</div>

 

3. arcgis发布的服务图片切片,已经包含经纬度,无须重新定位图片到地图上

4. 添加地图右上角条件,切片条件的tianjia,和内容,效果图如图所示:

 

    

    在leafletservice中定义_layersControl

if (leafletOptions.layersControl) {

this._layerControl = this._L.control

.layers(layers.baseLayers, layers.overlays, { collapsed: true })

.addTo(this._map);

}

  

addOverlay(layer: any, layerName: string) {

this._layerControl.addOverlay(layer, layerName);

}

 

 

const layer1 = L.esri.tiledMapLayer({

url:””,

maxZoom: 19

});

 

 

setTimeout(() => { //必须要使用上setTimeout(),

 

this.leafletService.addOverlay(layer1, “2018年2月”);

 

}, 500);

 

5. 往地图定位图标中加入id属性

    

const marker = L.marker(

[Number(item[“10.2”]), Number(item[“20.1”])],

{ icon: “url” }

);

 

//==往marker中加入id和type属性==

Object.defineProperties(marker, {

id: {

value: 1

},

type: {

value: “小武”

}

});

6. 地图上调到指定位置,可以定位很多定位集中的地方

   

//把所有的marker全部添加到layer集合中

this.heatMarkerLayer.addLayer(marker);

 

//把layer集合添加到地图上

this.leafletService.map.addLayer(this.heatMarkerLayer);

//地图定位到指定地点

this.leafletService.zoomToExtent(

this.leafletService.getLayerBounds(this.heatMarkerLayer)

);

 

zoomToExtent(extent: any) {

this._map.flyToBounds(extent);

}

 

7. 从后台请求的值分别赋值

 

   

//==分别对应element中的Time,DispName等属性==

const { Time, DispName, HumanHotspotId } = element;

8 触发定位图标的点击事件

   

//==fire() :触发指定类型的事件。你可以提供一个数据对象——监听器对象的第一个参数应该包含它的属性。==

layer.fire(“click”);

9. 禁止leaflet地图的拖拽事件

    

//==拖拽地图事件给禁止==

this.map.dragging.disable();

 

10. 地图移除放大缩小的+、-号

       zoomControl: false

       

转载自:https://blog.csdn.net/qq_34790644/article/details/80179457

You may also like...