Javascript 带单张的交互式Choropleth地图
编辑**此处是指向的链接。到目前为止,传单测试一页是有效的,而传单测试第二页是我尝试添加交互功能时使用的 我很难让我的互动地图真正做到互动。我正在绘制一张PA县油井数量的地图。我一直在按照指示办事 我已经找到/创建了一个GeoJSON文件,其中包含了我需要的所有信息,我可以用属性数据对应的颜色来显示它,但是当我试图使它具有交互性(悬停在上方时突出显示县边界)时,它就不起作用了Javascript 带单张的交互式Choropleth地图,javascript,html,leaflet,gis,geojson,Javascript,Html,Leaflet,Gis,Geojson,编辑**此处是指向的链接。到目前为止,传单测试一页是有效的,而传单测试第二页是我尝试添加交互功能时使用的 我很难让我的互动地图真正做到互动。我正在绘制一张PA县油井数量的地图。我一直在按照指示办事 我已经找到/创建了一个GeoJSON文件,其中包含了我需要的所有信息,我可以用属性数据对应的颜色来显示它,但是当我试图使它具有交互性(悬停在上方时突出显示县边界)时,它就不起作用了 var map = L.map('map').setView([40.6473, -99.84375], 5)
var map = L.map('map').setView([40.6473, -99.84375], 5);
L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
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: 'examples.map-i875mjb7'
}).addTo(map);
// start GeoJson
function base (feature,layer){
layer.bindPopup("<h1 class='info'> Hi, I'm a box</h1><p class='info2'>" + feature.properties.count_ + "</p> <p class='info2'>" + feature.properties.name + "</p>");
};
function getColor(d) {
return d > 1000 ? '#800026' :
d > 500 ? '#BD0026' :
d > 200 ? '#E31A1C' :
d > 100 ? '#FC4E2A' :
d > 50 ? '#FD8D3C' :
d > 20 ? '#FEB24C' :
d > 10 ? '#FED976' :
'#FFEDA0';
}
function style(feature) {
return {
fillColor: getColor(feature.properties.count_),
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.7
};
}
L.geoJson(wcc, {style: style}).addTo(map);
//good up to here
我对这一切都不熟悉,所以希望这是一件简单的事情。我真的不明白
e.target
在做什么。我已经在这上面呆了一段时间了。任何想法都很感激 我想出来了..有一条语句我忘了包含geojson变量
我有
var geojson;
// ... our listeners
geojson = L.geoJson(...);
我需要包括我的geojson变量名
var geojson;
// ... our listeners
geojson = L.geoJson(wcc);
(我可以发誓我早就试过了,但现在已经成功了!)如果地图根本没有加载,我想知道javascript代码中是否有语法错误。您是否在开发者控制台中看到任何错误?如果您向我们提供指向您的页面的链接或创建一个链接,我们可以查看到底是什么造成了问题我已向我的网站添加了一个链接。谢谢
var geojson;
// ... our listeners
geojson = L.geoJson(wcc);