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();

猜你喜欢

转载自blog.csdn.net/qq_34790644/article/details/80179457
今日推荐