我的要素图层的数据源为超图的数据服务。
现在我的需求是在大比例尺下才显示点图层,并且点要素的图标根据该要素的某属性不同而变化。那代码应该如何实现呢
直接上JS代码
(function () {
//baseUrl 3857底图 url: 专题图层数据服务
var baseUrl = "http://10.154.37.40:8090/iserver/services/map-china400/rest/maps/China",
url = "http://10.154.37.40:8090/iserver/services/data-arcgis-site/rest/data"
var map, featureService, resultLayer;
map = L.map('map', {
preferCanvas: true,
crs: L.CRS.EPSG3857,
center: { lng: 120.202, lat: 29.261 },
maxZoom: 18,
zoom: 7,
zoomControl: false,
attributionControl: false
});
//缩放监听 当zoom>=10的时候再显示本图层。
map.on('zoomend', function(e) {
if(e.target.getZoom() >= 10) {
map.addLayer(resultLayer);
} else{
map.removeLayer(resultLayer);
}
});
// 添加底图、要素
L.supermap.tiledMapLayer(baseUrl).addTo(map);
featureGroup = L.featureGroup().addTo(map);
featureService = L.supermap.featureService(url);
initFeature();
function initFeature() {
var polygon = L.polygon([[10, 60], [60, 60], [60, 160], [10, 160], [10, 60]]);
var getFeatureParams = new SuperMap.GetFeaturesByGeometryParameters({
fromIndex: -1,
toIndex: 30,
datasetNames: ["ArcGISFeatureServer:zjpdm_sde_site"],
geometry: polygon
});
featureService.getFeaturesByGeometry(getFeatureParams, function (serviceResult) {
//根据传入的属性不同返回不同的图标
function myIcon(params) {
if (params == 0) {
return L.icon({
iconUrl: "0.png",
iconSize: [22, 22],
});
} else if (params == 1) {
return L.icon({
iconUrl: "1.png",
iconSize: [22, 22],
});
} else if (params == 2) {
return L.icon({
iconUrl: "2.png",
iconSize: [22, 22],
});
} else if (params == 3) {
return L.icon({
iconUrl: "3.png",
iconSize: [22, 22],
});
} else if (params == 4) {
return L.icon({
iconUrl: "4.png",
iconSize: [22, 22],
});
} else {
};
};
resultLayer = L.geoJSON(serviceResult.result.features, {
pointToLayer: function (geoJsonPoint, latlng) {
return L.marker(latlng, { icon: myIcon(geoJsonPoint.properties.sitetype) });
}
});
//设置气泡的显示内容
resultLayer.on("mousemove", function (e) {
e.layer.bindPopup("名称" + ":" + e.layer.feature.properties.sitename +
"</br>线:" + e.layer.feature.properties.linename +
"</br>类别:" + e.layer.feature.properties.sitetype).openPopup();
});
resultLayer.on("mouseout", function (e) {
e.layer.closePopup();
});
});
};
})();
运行结果:
小比例尺下(只有底图):
大比例尺下(专题图层显示出来)