Javascript 如何在传单中添加多个层并动态更新它们
我正在使用宣传册绘制一个图层，并在地图中显示线串数据。但由于我有很多线串（40000）数据，在一个图层中渲染需要很多时间。因此我决定将数据拆分为单独的图层，然后逐个更新图层，以便每个图层的渲染数据量更少Javascript 如何在传单中添加多个层并动态更新它们,javascript,leaflet,geocoding,mapbox,Javascript,Leaflet,Geocoding,Mapbox,我正在使用宣传册绘制一个图层，并在地图中显示线串数据。但由于我有很多线串（40000）数据，在一个图层中渲染需要很多时间。因此我决定将数据拆分为单独的图层，然后逐个更新图层，以便每个图层的渲染数据量更少 var map = L.map('map').setView([36.447488,102.463303], 12); L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?acc
var map = L.map('map').setView([36.447488,102.463303], 12);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=token', {
maxZoom: 18,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(map);
var options = {
position: 'topleft',
title: 'Search',
placeholder: 'enter id ',
maxResultLength: 15,
threshold: 0.5,
showInvisibleFeatures: true,
showResultFct: function(feature,container) {
props = feature.properties;
var name = L.DomUtil.create('b', null, container);
name.innerHTML = props.id;
container.appendChild(L.DomUtil.create('br', null, container));
var cat = props.id
info = '' + cat + ', ' + 'th id';
container.appendChild(document.createTextNode(info));
}
};
var searchCtrl = L.control.fuseSearch(options);
searchCtrl.addTo(map);
var geojson;
function getColor(d) {
if(d==10 || d==9 || d==8){
return '#ff0000';
}
else {
return '#00ff65';
}
}
function style(feature) {
return {
weight: 2,
opacity: 1,
color: getColor(feature.properties.points),
fillOpacity: 0.7,
};
}
function highlightFeature(e) {
var layer = e.target;
layer.setStyle({
weight: 2,
color:'#007d80',
dashArray: '',
fillOpacity: 0.7
});
if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
layer.bringToFront();
}
info.update(layer.feature.properties);
}
function resetHighlight(e) {
geojson.resetStyle(e.target);
info.update();
}
function zoomToFeature(e) {
map.fitBounds(e.target.getBounds());
map.doubleClickZoom.disable();
}
var info = L.control();
info.update = function (props) {
this._div.innerHTML = '<h4><b>Link: <b></h4>' + (props ?
'<b>LineString ' + props.id + '</b><br />'
: 'Hover over a LineSting');
};
function onEachFeature(feature, layer) {
feature.layer = layer;
layer.on({
mouseover: highlightFeature,
mouseout: resetHighlight,
});
var popupContent =
'<b>Link ' + feature.properties.id + '</b>';
layer.bindPopup(popupContent);
feature.layer = layer;
}
function mapupdatecolor(){
$.ajax({
type: "GET",
async : false,
url: 'http:dataurl',
success: function(data) {
console.log("sucess");
for (i = 0; i<40000; i++) {
links['features'][i]['properties']['points']=data[i].points;
}
if (geojson) {
geojson.remove();
console.log("removed");
}
function picnicFilter(feature) {
if (feature.properties.points >= 9) return true
}
geojson = L.geoJson(lines, {
filter: picnicFilter,
style: style,
onEachFeature: onEachFeature
}).addTo(map);
console.log("update done");
},
error: function (xhr, ajaxOptions, thrownError) {
alert(thrownError);
},
complete: function() {
setTimeout(mapupdatecolor, 5000);
}
});
// schedule the first invocation:
}
geojson = L.geoJson(lines, {
style: style,
onEachFeature: onEachFeature
}).addTo(map);
info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
this.update();
return this._div;
};
searchCtrl.indexFeatures(links.features, ['id']);
info.addTo(map);
setTimeout( mapupdatecolor, 5000);
So the above code is to render all the LineString initially and then after the update of the points just display the LineStrings which have points >=9.But now I would like to draw multiple layers(say 10) and then draw the whole LineStrings(40000) in those 10 layers.(400 LineStrings per layer). Will increase the speed of rendering the map?
var-map=L.map（'map'）.setView（[36.447488102.463303]，12）；
L.tileLayer（'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png？access_token=token',{
maxZoom:18，
属性：“映射数据©；贡献者”+
', ' +
“图像”，
id:“地图盒。街道”
}).addTo（地图）；
变量选项={
位置：'左上'，
标题：“搜索”，
占位符：“输入id”，
最大结果长度：15，
阈值：0.5，
showInvisibleFeatures：正确，
ShowResultCt:函数（功能、容器）{
props=feature.properties；
var name=L.DomUtil.create（'b'，null，container）；
name.innerHTML=props.id；
appendChild（L.DomUtil.create（'br'，null，container））；
var cat=props.id
信息=''+cat+'，'+'th id'；
container.appendChild（document.createTextNode（info））；
}
};
var searchCtrl=L.control.fuseSearch（选项）；
searchCtrl.addTo（map）；
var-geojson；
函数getColor（d）{
如果（d==10 | | d==9 | | d==8）{
返回“#ff0000”；
}
否则{
返回“#00ff65”；
}
}
功能样式（特征）{
返回{
体重：2，
不透明度：1，
颜色：getColor（feature.properties.points），
不透明度：0.7，
};
}
功能高亮功能（e）{
var层=e.目标；
layer.setStyle({
体重：2，
颜色：“#007d80”，
dashArray:“”，
填充不透明度：0.7
});
如果（！L.Browser.ie&&！L.Browser.opera&&！L.Browser.edge）{
层。布氏体（）；
}
信息更新（图层、特征、属性）；
}
功能重置突出显示（e）{
geojson.resetStyle（e.target）；
info.update（）；
}
函数ZoomTof性质（e）{
fitBounds（e.target.getBounds（））；
map.doubleClickZoom.disable（）；
}
var info=L.control（）；
info.update=功能（道具）{
这个._div.innerHTML='链接：'+（道具？
“LineString”+props.id+“
”
：“悬停在线条上”）；
};
功能onEachFeature（功能，图层）{
feature.layer=图层；
分层({
鼠标悬停：Highlight功能，
mouseout:resetHighlight，
});
var popupContent=
“Link”+feature.properties.id+”；
layer.bindPopup（弹出内容）；
feature.layer=图层；
}
函数mapupdatecolor（）{
$.ajax({
键入：“获取”，
async:false，
url:'http:dataurl'，
成功：功能（数据）{
控制台日志（“成功”）；
对于（i=0；i=9），返回true
}
geojson=L.geojson（行{
过滤器：过滤器，
风格：风格，
onEachFeature:onEachFeature
}).addTo（地图）；
控制台日志（“更新完成”）；
},
错误：函数（xhr、ajaxOptions、thrownError）{
警报（thrownError）；
},
完成：函数（）{
setTimeout（mapupdatecolor，5000）；
}
});
//安排第一次调用：
}
geojson=L.geojson（行{
风格：风格，
onEachFeature:onEachFeature
}).addTo（地图）；
info.onAdd=函数（映射）{
this._div=L.DomUtil.create（'div'，'info'）；//使用类“info”创建一个div
这个.update（）；
把这个还给我；
};
searchCtrl.indexFeatures（links.features，['id']）；
信息地址（地图）；
setTimeout（mapupdatecolor，5000）；
因此，上面的代码是最初渲染所有的线串，然后在点更新后只显示点>=9的线串。但是现在我想绘制多个层（比如10），然后在这10层中绘制整个线串（40000）（每层400线串）。是否将提高渲染贴图的速度？
var map = L.map('map');
var canvasRenderer = L.canvas();
var cartodbAttribution = '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, © <a href="http://cartodb.com/attributions">CartoDB</a>';
var positron =L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=token', {
maxZoom: 18,
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' +
'<a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="http://mapbox.com">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(map);
function getColor(d) {
if(d==10 || d==9 || d==8){
return '#ff0000';
}
else {
return '#00ff65';
}
}
var highlight;
var clearHighlight = function() {
if (highlight) {
vectorGrid.resetFeatureStyle(highlight);
}
highlight = null;
};
var vectorGrid = L.vectorGrid.slicer(lines, {
rendererFactory: L.svg.tile,
vectorTileLayerStyles: {
sliced: function(properties, zoom) {
return {
weight: 2,
opacity: 1,
color: getColor(properties.points),
fillOpacity: 0.7
}
}
},
interactive: true,
getFeatureId: function(f) {
return f.properties.id;
}
})
.on('mouseover', function(e) {
var properties = e.layer.properties;
L.popup()
.setContent(properties.id)
.setLatLng(e.latlng)
.openOn(map);
clearHighlight();
highlight = properties.id;
var p = properties.points;
var style = {
fillColor: p === 0 ? '#800026' :
p === 1 ? '#E31A1C' :
p === 2 ? '#FEB24C' :
p === 3 ? '#B2FE4C' : '#FFEDA0',
fillOpacity: 0.5,
fillOpacity: 1,
stroke: true,
fill: true,
color: 'red',
opacity: 1,
weight: 2,
};
vectorGrid.setFeatureStyle(properties.points, style);
})
.addTo(map);
map.on('click', clearHighlight);
map.setView({ lat: 36.447488, lng: 102.463303}, 12);
var-map=L.map（'map'）；
var canvasRenderer=L.canvas（）；
var cartodbattribute='&复制；贡献者，©；'；
var正电子=L.tileLayer（'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png？access_token=token',{
maxZoom:18，
属性：“映射数据©；贡献者”+
', ' +
“图像”，
id:“地图盒。街道”
}).addTo（地图）；
函数getColor（d）{
如果（d==10 | | d==9 | | d==8）{
返回“#ff0000”；
}
否则{
返回“#00ff65”；
}
}
var高亮显示；
var clearHighlight=function（）{
如果（突出显示）{
vectorGrid.resetFeatureStyle（高亮显示）；
}
highlight=null；
};
var vectorGrid=L.vectorGrid.slicer（行{