传单中的等值线

时间:2013-05-04 20:07:06

标签: javascript map leaflet geojson

我对Leaflet(和stackoverflow)相当新,我一直试图在我的地图上显示一个等值线。我有一个当前显示的基本传单地图,但是当我尝试显示我的geoJson时,我会抛出错误。

var map;
window.onload = initialize();

function initialize(){
    setMap();
};

function setMap() {
    map = L.map('map').setView([45, -90], 7);

    var layer = L.tileLayer('http://{s}.acetate.geoiq.com/tiles/acetate/{z}/{x}/{y}.png',{
    attribution: 'Acetate tileset from GeoIQ',
}).addTo(map);

var myLayer = L.geoJson().addTo(map);
myLayer.addData(counties);
};

“counties”是指我创建的geoJson文件的名称。无论如何我是否需要设计它才能显示出来?

任何帮助都会非常感激。

谢谢!

1 个答案:

答案 0 :(得分:3)

让它正确显示是的。从:

开始
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'; //You pick your own colors using say CSS Color Wheel etc
}

其次是:

function style(feature) {
    return {
        fillColor: getColor(feature.properties.density), //Based on the value in your data
        weight: 2,
        opacity: 1,
        color: 'white',
        dashArray: '3',
        fillOpacity: 0.7
    };
}

L.geoJson(statesData, {style: style}).addTo(map);

如果您想知道此地图上的其他信息。试试这个: http://leafletjs.com/examples/choropleth.html