javascript - 在网页上使用 openstreetmap

Question

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

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

欣赏这并不是一个真正的“发展”问题，但我很肯定这里的某个地方有人做过类似的事情。

score 1 · Accepted Answer

它假设使用 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" />

要按以下步骤完成此任务：

提供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
    });

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

var highlightStyleCache = {};
文本，填充：新 ol.style.Fill({ color: '#000' })，笔触：新 ol.style.Stroke({ color: '#f00', width: 3 }) }) })]; } 返回 highlightStyleCache[文本]; } }); 3 }) }) })]; } 返回 highlightStyleCache[文本]; } }); 3 }) }) })]; } 返回 highlightStyleCache[文本]; } });
1. 从加载的国家数据中解析国家名称并用它填充选择器选项：

放大并突出显示所选国家：

var selectFeatureInfo = function (featureId) { var features = countrySource.getFeatures(); 变种特征；for (var f = 0; f < features.length; f++) { feature = features[f]; if (feature.aa == featureId) { var polygon = (feature.getGeometry()); var 大小 = (map.getSize()); view.fitGeometry(polygon, size, { padding: [170, 50, 30, 150] }); 休息; } } if (feature !== highlight) { if (highlight) { featureOverlay.removeFeature(highlight); } if (feature) { featureOverlay.addFeature(feature); } 高亮 = 功能；} };

JSFiddle 示例在这里

javascript - 在网页上使用 openstreetmap

1 回答 1

Related

Reference