leaflet 相关问题

我使用下面的代码创建 DOM 内部 HTML： var popupVhc1 = L.DomUtil.create('div', 'popup-vhcmap'); tablepopupVhc1 = L.DomUtil.create('table','table table-infopopup',popupVhc1); trpopupVhc1 = L.

javascript html leaflet

回答 1 投票 0

有关缩放事件的传单过滤器数据

我在传单地图上有很多数据，我想在缩放事件上过滤我的图层数据。但我无法按如下方式访问我的图层： this.map = L.map(this.target , {maxZoom:18 , minZoom:5 , ZoomCon...

javascript leaflet

回答 2 投票 0

如何在 React Leaflet 地图上添加按钮来创建标记？

我有一个表单，用户必须在其中指定他家在地图上的位置。在这种形式中，我使用了 React Leaflet 地图。的默认位置是您的当前位置...

javascript reactjs leaflet react-leaflet

回答 2 投票 0

如何在Leaflet中使用自定义控件更改底图/地图类型？

我创建了自定义栏，如下图所示：这是我的 HTML 代码：我创建了自定义栏，如下图所示：这是我的 HTML 代码： <div class="collapse map-custombar-collapse-left" id="listMapBaseControl"> <ul class="ul-map-custombar-collapse-left"> <li class="li-map-custombar-collapse-left"> <div class="form-check"> <input class="form-check-input" type="radio" name="radiomaptype" id="mapTypeToOSM" value="osm" checked> <label class="form-check-label" for="mapTypeToOSM">OSM Map</label> </div> </li> <li class="li-map-custombar-collapse-left"> <div class="form-check"> <input class="form-check-input" type="radio" name="radiomaptype" id="mapTypeToStreet" value="streetmap"> <label class="form-check-label" for="mapTypeToStreet">Google Street</label> </div> </li> <li class="li-map-custombar-collapse-left"> <div class="form-check"> <input class="form-check-input" type="radio" name="radiomaptype" id="mapTypeToTraffic" value="trafficmap"> <label class="form-check-label" for="mapTypeToTraffic">Google Traffic</label> </div> </li> <li class="li-map-custombar-collapse-left"> <div class="form-check"> <input class="form-check-input" type="radio" name="radiomaptype" id="mapTypeToSatellite" value="satellitemap"> <label class="form-check-label" for="mapTypeToSatellite">Satellite Map</label> </div> </li> <li class="li-map-custombar-collapse-left"> <div class="form-check"> <input class="form-check-input" type="radio" name="radiomaptype" id="mapTypeToHybrid" value="hybridmap"> <label class="form-check-label" for="mapTypeToHybrid">Hybrid Map</label> </div> </li> </ul> </div> <div id="map" style="height:100%;"></div> 这是我的 JS 代码： var googleStreets = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',{ maxZoom: 20, subdomains:['mt0','mt1','mt2','mt3'] }); var googleHybrid = L.tileLayer('http://{s}.google.com/vt/lyrs=s,h&x={x}&y={y}&z={z}',{ maxZoom: 20, subdomains:['mt0','mt1','mt2','mt3'] }); var googleSat = L.tileLayer('http://{s}.google.com/vt/lyrs=s&x={x}&y={y}&z={z}',{ maxZoom: 20, subdomains:['mt0','mt1','mt2','mt3'] }); var googleTraffic = L.tileLayer('https://{s}.google.com/vt/lyrs=m@221097413,traffic&x={x}&y={y}&z={z}', { maxZoom: 20, minZoom: 2, subdomains: ['mt0', 'mt1', 'mt2', 'mt3'], }); var osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 20, attribution: '© OpenStreetMap' }); var map = L.map('map', { center: [-5.368029,112.005921], zoom: 5, layers: [osm] }); var baseMaps = { "OSM": osm, "Street": googleStreets, "Traffic": googleTraffic, "Satellite": googleSat, "Hybrid": googleHybrid }; var overlays = {//add any overlays here }; //var layerControl = L.control.layers(baseMaps,overlays,{position:'bottomleft'}).addTo(map); Hidden default control $('input[type=radio][name=radiomaptype]').on('change', function() { switch ($(this).val()) { case 'osm': baseMaps["OSM"].addTo(map); break; case 'streetmap': baseMaps["Street"].addTo(map); break; case 'trafficmap': baseMaps["Traffic"].addTo(map); break; case 'satellitemap': baseMaps["Satellite"].addTo(map); break; case 'hybridmap': baseMaps["Hybrid"].addTo(map); break; default: baseMaps["OSM"].addTo(map); break; } }); 我有两个问题：例如，在收音机“卫星地图”上最后选择的位置，当我重新加载页面时，地图类型更改为默认类型“OSM”，但在收音机上仍然选择/选中的是“卫星地图”，尽管我设置了默认值检查上面 HTML 代码中的“OSM”。页面首次加载时，第一次尝试更改地图类型成功，但第二次尝试时，更改地图类型不起作用。示例：页面打开选择“Google Sat”广播。地图将更改为“Google Sat” - 成功选择“Google Hybrid 收音机，地图将更改为“Google Hybrid” - 成功再次选择“Google Sat”广播，地图无法更改。我仍在学习Leaflet并需要帮助 PS：如果使用Leaflet中的默认图层控制，我没有遇到这些问题。首先，您必须清除地图并添加新的 TileLayer。该传单与您的申请有不同的状态。您可以使用此代码清除它们： map.eachLayer(function (layer) { if (layer instanceof L.TileLayer) { map.removeLayer(layer); } }); 此后，您可以像以前一样添加您喜欢的图层。对于RadioButton被选中或取消选中的问题，您可以将当前状态存储到查询参数或本地存储中

javascript jquery leaflet

回答 1 投票 0

Leaflet JS 自定义标记图标未显示

我正在使用 LeafletJS 和 Vue3 开发一个个人项目。我想更改默认标记图标，因此我将 png 文件直接复制到与我的脚本相同的文件中，并创建了一个新图标，如图所示

javascript leaflet

回答 1 投票 0

更改地图图层时，使用 Folium 在 Shiny for Python 中保留缩放和地图中心

我正在开发一个项目，使用 Python 和 Folium 的 Shiny 来可视化天气预报。目标是允许用户与滑块交互以选择预测时间，并显示

javascript python leaflet folium py-shiny

回答 1 投票 0

React + Leaflet.js 中<GeoJSON>对象的条件背景图案

我有一个 React 应用程序，正在绘制一张上面有多个对象的地图。到目前为止，我已经使用“style={}”属性为每个 GeoJSON 对象着色，但是我想要一个带有一些

javascript reactjs leaflet

回答 1 投票 0

如何在JS中更简单的显示多个变量？

我需要有关以下问题的建议和了解：我有 2 个 HTML 代码如下：马克...

javascript jquery leaflet

回答 1 投票 0

如何在JS中更简单的显示多个变量？

我是 JS 新手。我需要有关以下问题的建议和了解：我有 2 个“a”，html 代码如下：我是 JS 新手。我需要有关以下问题的建议和了解：我有 2 个“a”，html 代码如下： <a href="#" class="btn-outline-light btnOpenMarker" data-role="marker1">MARKER 1</a> <a href="#" class="btn-outline-light btnOpenMarker" data-role="marker2">MARKER 2</a> 然后，我的JS声明和函数如下： var osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 20, attribution: '© OpenStreetMap' }); var map = L.map('map', { center: [-6.1500736, 106.8860524], zoom: 15, layers: [osm] }); var latlong1 = [-6.1500155,106.8856884]; var latlong2 = [-6.1500736,106.8860524]; var marker1 = L.marker(latlong4).addTo(map); var marker2 = L.marker(latlong5).addTo(map); marker1.bindPopup("B 8461 UKF"); marker2.bindPopup("B 8436 UQK"); const clsOpenMarker = document.querySelectorAll(".btnOpenMarker"); // Fungsi Open Marker for(let btom = 0;btom < clsOpenMarker.length; btom++) { let om = clsOpenMarker[btom] om.onclick = function() { alert ("YOU PRESS BUTTON " +$(om).attr("data-role")); map.setView(latlong1,17); marker1.openPopup(); } }; 仅在这段代码中注意： map.setView(latlong1,17); marker1.openPopup(); 我想在这个循环中推广 var“latlong1”、“latlong2”以及“marker1”、“marker2”。它可以是“标记数组”和“经纬度数组”。但我不知道如何申报。我应该在我的“a”上创建新属性吗？喜欢创建标记数据数组： const markers = [ {name: "B 8461 UKF", latLon: [-6.1500155, 106.8856884]}, {name: "B 8436 UQK", latLon: [-6.1500736, 106.8860524]}, // Add more markers data here ]; const osm = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', { maxZoom: 20, attribution: '© OpenStreetMap' }); const map = L.map('map', { center: markers[0], // << Notice this zoom: 15, layers: [osm] }); markers.forEach((marker) => { marker.bindPopup(marker.name); L.marker(marker.latLon).addTo(map); }); const clsOpenMarker = document.querySelectorAll(".btnOpenMarker"); clsOpenMarker.forEach((elBtn, btnIndex) => { elBtn.addEventListener("click", (evt) => { evt.preventDefault(); // If needed? const marker = markers[btnIndex]; map.setView(marker.latLon, 17); marker.openPopup(); console.log(marker); // Inspect the clicked marker reference }); });

javascript jquery leaflet

回答 1 投票 0

TypeError 开始传单

我正在开发一个角度应用程序，我有一张使用传单的地图。在本地它可以工作，但是当我将其上传到 render.com 时，它显示以下错误： main-2KC2FGCV.js:119 错误 ao carregar o Leaf...

angular leaflet

回答 1 投票 0

geojson-vt 与反应传单

有人有使用 geojson-vt 的 React-leaflet 项目的准系统仓库示例吗？我有一个 React-leaflet 项目，它有一个 13 MB 的 geoJSON 文件。我不知道如何让它呈现 fa...

reactjs leaflet geojson react-leaflet

回答 1 投票 0

传单标记渲染但显示“损坏的图像”占位符

它的样子是这样的：我的代码：地图.js //接下来的3行没有改变任何内容，我在网上发现了这个作为潜在的解决方案 //并且不想得到这个建议从“叶子”导入 L...

reactjs leaflet react-leaflet

回答 3 投票 0

在现有 Django 项目中使用 React

我有一个现有的 Django 项目。它是一个显示带有传单的地图的网站。标记和所有内容都是从 django 动态加载的。现在我想用 React 来增强这一点。从某种意义上说，我们...

javascript reactjs django leaflet

回答 1 投票 0

leaflet 相关问题

最新问题