leaflet开发时的常用代码

leaflet开发时的常用代码

创建新地图

_map = new L.Map('map', {  zoom: 10 ,
        closePopupOnClick:false,
        crs:L.CRS.EPSG4326, //这里的坐标系可以用来加载天地图的4490坐标系
        zoomAnimation:true,
        minZoom: 9,
        maxZoom: 18,
        zoomControl:false});

1. 加载天地图

new L.tileLayer('http://t{s}.tianditu.gov.cn/DataServer?T=img_c&X={x}&Y={y}&L={z}&tk=这里放天地图的key', { subdomains: [0, 1, 2, 3, 4, 5, 6, 7], maxZoom: 18,zIndex: 1})；

其中img_c代表不同的天地图类型

2. 加载arcgis server发布的切片服务

new L.tileLayer('这里放发布的rest服务地址/tile/{z}/{y}/{x}', { subdomains: [0, 1, 2, 3, 4, 5, 6, 7], maxZoom: 18, maxNativeZoom: 18,zIndex: 3})
//例如http://localhost:8008/arcgis/rest/services/
new L.tileLayer('112.112.112.112:8008/arcgis/rest/services/example/MapServer/tile/{z}/{y}/{x}', { subdomains: [0, 1, 2, 3, 4, 5, 6, 7], maxZoom: 18, maxNativeZoom: 18});
   

zIndex控制不同图层间的叠加顺序

3. esri-leaflet插件中查询服务动态渲染地理要素
   在页面中加载完插件后
   例如：动态加载面，面要求点击弹出气泡弹窗

	const tzRiver = L.esri.dynamicMapLayer({
	        url: serviceLink+'taizhouRiver/MapServer',
	        opacity: 0
	    });
	    
    tzRiverLayer = new L.featureGroup([]);
    _map.addLayer(tzRiverLayer);
    
    tzRiver.query()
        .layer(0)
        .run(function(error, featureCollection, response){
			if(featureCollection.features.length>0){
                for(var i=0;i<featureCollection.features.length;i++){
                	let row = featureCollection.features[i];
                	if(row.geometry.coordinates.length>0){
                        for(var x=0;x<row.geometry.coordinates.length;x++){
                            if(row.geometry.type == "Polygon"){
                                var xj_sons={ "type": "FeatureCollection",
                                    "features": [
                                        { "type": "Feature",
                                            "(属性名)": row.properties.(具体属性),
                                            "geometry": {"type": "Polygon", "coordinates": row.geometry.coordinates}
                                        }
                                    ]
                                };
                                var feature = L.geoJson(xj_sons,{
                                    style: function (feature){
                                        return {
                                            fillOpacity: 1, //填充层透明度
                                            fill: true,
                                            fillColor: "#00d2ff",//填充层色值
                                            color: "#00d2ff",//边界色值
                                            opacity: '1', //整体透明度
                                            weight: '1' //边界宽度
                                        };
                                    }
                                }).on('click',function (result) {
                                	//每个要素的点击事件
                                });
                                feature.bindPopup(function (layer) {
                                	//要素点击后弹出的气泡弹窗内容
                                    var pop = "<div class='watershedPop'><p>名称:"+ layer.feature.(属性名) +"</p>";
                                    return pop;
                                });
                                feature.addTo(tzRiverLayer)
                            } else if (row.geometry.type == "MultiPolygon") {
                                if(row.geometry.coordinates[x].length>0) {
                                    var xj_sons={ "type": "FeatureCollection",
                                        "features": [
                                        { "type": "Feature",
                                            "(属性名)": row.properties.(字段名),
                                            "geometry": {"type": "Polygon", "coordinates": row.geometry.coordinates}
                                        }
                                    ]
                                    };
                                    // console.log(fillOpacity,fillColor,color)
                                    var feature = L.geoJson(xj_sons,{//加载流域边界数据
                                        style: function (feature){
                                            return {
                                                fillOpacity: fillOpacity,
                                                fill: true,
                                                fillColor: fillColor,
                                                color: color,
                                                opacity: '1',
                                                weight: '1'
                                            };
                                        }
                                    }).on('click',function (result) {
                                    	//每个要素的点击事件
                                    });
                                    feature.bindPopup(function (layer) {
                                        var riverPop = "<div class='watershedPop'><p>名称:"+ layer.feature.(属性名);
                                        return riverPop;
                                    });
                                    feature.addTo(tzRiverLayer)
                                }
                            }
                        }
                    }
                }
    		}
		}

这个插件中的查询要素方法还有：

    let query = L.esri.query({
        url: serviceLink+'taizhouRiver/MapServer/0'
    });
	//这里用的是where的精确查询方法，要求完全匹配，用来查id之类的东西比较好
    query.where("OBJECTID = "+ id).run(function (error, featureCollection, response) {
    	//此处返回的内容和上面的方法一样
    	if(featureCollection.features.length>0) {
	        for (var i = 0; i < featureCollection.features.length; i++) {
	        	//具体执行内容
	        	var row = featureCollection.features[i];
        	}
    	}
   	});
    
    let find = L.esri.find({
        url: serviceLink+'tzDangerArea/MapServer'
    });
	//这里用的是find的模糊查询方法，不要求完全匹配
    find.layers(0).text('这里是要查询的内容').fields('这里是要查询的字段名').run(function (error, featureCollection, response) {
		//此处返回的内容和上面的方法一样
    	if(featureCollection.features.length>0) {
	        for (var i = 0; i < featureCollection.features.length; i++) {
	        	//具体执行内容
	        	var row = featureCollection.features[i];
        	}
    	}
   	});
                    

4. 用MarkerCluster插件加载海量数据点(点云插件)
   插件链接： https://pan.baidu.com/s/1CxLCvlD2ZH4hsNov1NUKHA
   提取码：ob27

	pointLayer = new L.markerClusterGroup({
                            disableClusteringAtZoom : 18, //点在18级散开
                            removeOutsideVisibleBounds: true});
    _map.addLayer(pointLayer);
    var viewIcon = L.icon({
        iconUrl: "/styles/plugin/map/images/xxx.png",
        iconSize: [32, 32],
        iconAnchor: [16, 16],
        popupAnchor: [0, -16]
    });
    for(var i=0;i<data.length;i++){
        var pointFeature = new L.marker([data[i].latitude,data[i].longitude],{ icon: viewIcon})
            .bindTooltip(data[i].name, { permanent: false, offset : [15,0], direction : "right", className: '提示框的类名'});
        var popText="<div class='popup-content' style='width: 650px;'>" +
            "<div class='popup-header'><strong>"+isEmpty(data[i].name)+"</strong></div>" +
            "<iframe id='plotMappop' name='"+data[i].name+"'" +
            " frameborder='0' src='"+_ctx+"/xxx/xxx?xxx="+data[i].id+"' style='width:650px;height:430px;overflow-x:hidden;overflow-y:auto'></iframe>"+
            "</div>";
        var popup = L.popup({ maxWidth: 700, maxHeight: 600 })
            .setLatLng([data[i].latitude,data[i].longitude])
            .setContent(popText);
        pointFeature.bindPopup(popup);

        pointFeature.options.sm_sid = 'plot';//这里是不同点云聚合图标的标识
        pointFeature.addTo(_plotLayer);
    }

之后在MarkerCluster.Default.css文件中加入’plot’点云聚合图标的样式

.sclass-plot{
    background: url(images/xxx.png) no-repeat center;
}