在网页上使用openstreetmap

Question

有人知道OpenStreetMap是否有一些设施，我可以提供一个国家列表，而'插件'只是突出显示地图上的国家？

相信我，我在最后一两天搜索了高低，寻找示例，但只能看到提供特定Lat / Lon亮点的示例。

欣赏这不是一个真正的'发展'问题，但我很肯定有人在这里做了一些事情。

Answer 1

它假设使用OpenLayers框架来加载OpenSreetMap图块。 这个答案基于openlayers的例子。 国家轮廓信息可以从这里加载： //openlayers.org/en/v3.2.1/examples/data/geojson/countries.geojson

var styleCache = {};
var countrySource = new ol.source.GeoJSON({
  projection: 'EPSG:3857',
  url: "http://openlayers.org/en/v3.2.1/examples/data/geojson/countries.geojson"
})
var vectorLayer = new ol.layer.Vector({
  source: countrySource,
  style: function(feature, resolution) {
    var text = resolution < 5000 ? feature.get('name') : '';
    if (!styleCache[text]) {
      styleCache[text] = [new ol.style.Style({
        fill: new ol.style.Fill({
          color: 'rgba(255, 255, 255, 0.6)'
        }),
        stroke: new ol.style.Stroke({
          color: '#319FD3',
          width: 1
        }),
        text: new ol.style.Text({
          font: '12px Calibri,sans-serif',
          text: text,
          fill: new ol.style.Fill({
            color: '#000'
          }),
          stroke: new ol.style.Stroke({
            color: '#fff',
            width: 3
          })
        })
      })];
    }
    return styleCache[text];
  }
});

var view = new ol.View({
  center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
  zoom: 5
});

var map = new ol.Map({
  layers: [
    new ol.layer.Tile({
      source: new ol.source.MapQuest({
        layer: 'osm'
      })
    }),
    vectorLayer
  ],
  target: 'map',
  view: view
});

var highlightStyleCache = {};

var featureOverlay = new ol.FeatureOverlay({
  map: map,
  style: function(feature, resolution) {
    var text = resolution < 5000 ? feature.get('name') : '';
    if (!highlightStyleCache[text]) {
      highlightStyleCache[text] = [new ol.style.Style({
        stroke: new ol.style.Stroke({
          color: '#f00',
          width: 1
        }),
        fill: new ol.style.Fill({
          color: 'rgba(255,0,0,0.1)'
        }),
        text: new ol.style.Text({
          font: '12px Calibri,sans-serif',
          text: text,
          fill: new ol.style.Fill({
            color: '#000'
          }),
          stroke: new ol.style.Stroke({
            color: '#f00',
            width: 3
          })
        })
      })];
    }
    return highlightStyleCache[text];
  }
});

var highlight;
var displayFeatureInfo = function(pixel) {

  var feature = map.forEachFeatureAtPixel(pixel, function(feature, layer) {
    return feature;
  });
  if (feature !== highlight) {
    if (highlight) {
      featureOverlay.removeFeature(highlight);
    }
    if (feature) {
      featureOverlay.addFeature(feature);
    }
    highlight = feature;
  }
};

var selectFeatureInfo = function(featureId) {
  var features = countrySource.getFeatures();
  var feature;
  for (var f = 0; f < features.length; f++) {
    feature = features[f];
    if (feature.aa == featureId) {
      var polygon = (feature.getGeometry());
      var size = (map.getSize());
      view.fitGeometry(
        polygon,
        size, {
          padding: [170, 50, 30, 150]
        });
      break;
    }
  }
  if (feature !== highlight) {
    if (highlight) {
      featureOverlay.removeFeature(highlight);
    }
    if (feature) {
      featureOverlay.addFeature(feature);
    }
    highlight = feature;
  }
};


$(map.getViewport()).on('mousemove', function(evt) {
  var pixel = map.getEventPixel(evt.originalEvent);
  displayFeatureInfo(pixel);
});

map.on('click', function(evt) {
  displayFeatureInfo(evt.pixel);
});

///
$(document).ready(function() {

  loadCountryJson();
  var countrySelector = document.getElementById('osm-country-selector');
  $(countrySelector).on('change', function() {
    selectFeatureInfo(this.value);
  });
});

function loadCountryJson() {

  $.getJSON("http://openlayers.org/en/v3.2.1/examples/data/geojson/countries.geojson", function(data) {

    var countryList = getCountries(data);
    var tools = document.getElementById('tools');
    $(tools).append('<select id="osm-country-selector"/>');
    var countrySelect = document.getElementById('osm-country-selector');
    $(countrySelect).attr("name", "countries");

    countryList.forEach(function(d) {
      $('#osm-country-selector').append($('<option>', {
        value: d.id,
        text: d.properties.name
      }));
    });
    $(countrySelect).on('change', function() {
      console.log('countrySelect');
      selectFeatureInfo(this.value);
    });

  });
}

function getCountries(data) {
  var i;
  var features = data.features;
  var items = [];
  for (i = 0; i < features.length; i++) {
    var country = features[i];
    var prop = country.properties;
    items.push({
      "id": country.id,
      "name": prop.name
    });
  }
  return features;
}

.map {
  height: 500px;
  width: 500px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ol3/3.4.0/ol.js"></script>

<div id="map" class="map"></div>
<br/>
<div id="tools" />

要通过以下步骤执行此任务：

1. 提供html标签：

<div id="map" class="map"></div>
<br/>
<div id="tools" />


 2.初始化地图：

var styleCache = {};
var countrySource = new ol.source.GeoJSON({
        projection: 'EPSG:3857',
        url: "http://openlayers.org/en/v3.2.1/examples/data/geojson/countries.geojson"
    })
    var vectorLayer = new ol.layer.Vector({
        source: countrySource,
        style: function (feature, resolution) {
            var text = resolution < 5000 ? feature.get('name') : '';
            if (!styleCache[text]) {
                styleCache[text] = [new ol.style.Style({
                    fill: new ol.style.Fill({
                        color: 'rgba(255, 255, 255, 0.6)'
                    }),
                    stroke: new ol.style.Stroke({
                        color: '#319FD3',
                        width: 1
                    }),
                    text: new ol.style.Text({
                        font: '12px Calibri,sans-serif',
                        text: text,
                        fill: new ol.style.Fill({
                            color: '#000'
                        }),
                        stroke: new ol.style.Stroke({
                            color: '#fff',
                            width: 3
                        })
                    })
                })];
            }
            return styleCache[text];
        }
    });

    var view = new ol.View({
        center: ol.proj.transform([37.41, 8.82], 'EPSG:4326', 'EPSG:3857'),
        zoom: 5
    });

    var map = new ol.Map({
        layers: [
        new ol.layer.Tile({
            source: new ol.source.MapQuest({
                layer: 'osm'
            })
        }),
        vectorLayer],
        target: 'map',
        view: view
    });

1. 为国家/地区实施突出显示样式：

   var highlightStyleCache = {};
       var featureOverlay = new ol.FeatureOverlay（{                 地图：地图，                 风格：功能（特征，分辨率）{                     var text = resolution＆lt; 5000？ feature.get（'name'）：'';                     if（！highlightStyleCache [text]）{                         highlightStyleCache [text] = [new ol.style.Style（{                             stroke：new ol.style.Stroke（{                                 颜色：'＃f00'，                                 宽度：1                             }），                             fill：new ol.style.Fill（{                                 颜色：'rgba（255,0,0,0.1）'                             }），                             text：new ol.style.Text（{                                 字体：'12px Calibri，sans-serif'，                                 文字：文字，                                 fill：new ol.style.Fill（{                                     颜色：'＃000'                                 }），                                 stroke：new ol.style.Stroke（{                                     颜色：'＃f00'，                                     宽度：3                                 }）                             }）                         }）];                     }                     return highlightStyleCache [text];                 }             }）;

   1. 从加载的国家/地区数据中解析国家/地区名称，并使用它填充选择器选项：

var highlightStyleCache = {}; var featureOverlay = new ol.FeatureOverlay（{     地图：地图，     风格：功能（特征，分辨率）{         var text = resolution＆lt; 5000？ feature.get（'name'）：'';         if（！highlightStyleCache [text]）{             highlightStyleCache [text] = [new ol.style.Style（{                 stroke：new ol.style.Stroke（{                     颜色：'＃f00'，                     宽度：1                 }），                 fill：new ol.style.Fill（{                     颜色：'rgba（255,0,0,0.1）'                 }），                 text：new ol.style.Text（{                     字体：'12px Calibri，sans-serif'，                     文字：文字，                     fill：new ol.style.Fill（{                         颜色：'＃000'                     }），                     stroke：new ol.style.Stroke（{                         颜色：'＃f00'，                         宽度：3                     }）                 }）             }）];         }         return highlightStyleCache [text];     } }）;

1. 缩放并高亮显示所选国家/地区：

   var selectFeatureInfo = function（featureId）{     var features = countrySource.getFeatures（）;                  var特征;                 for（var f = 0; f＆lt; features.length; f ++）{                      feature = features [f];                     if（feature.aa == featureId）{                         var polygon =（feature.getGeometry（））;                         var size =（map.getSize（））;                         view.fitGeometry（                         多边形，                         大小，{                             填充：[170,50,30,150]                         }）;                         打破;                     }                 }                 if（feature！== highlight）{                     if（highlight）{                         featureOverlay.removeFeature（高亮）;                     }                     if（feature）{                         featureOverlay.addFeature（特征）;                     }                     highlight = feature;                 }             };

JSFiddle示例here