2

OpenStreetMapに国のリストを提供できる機能があり、「プラグイン」が単に地図上の国を強調表示できるかどうかを誰かが知っていますか？

私を信じてください、私は例を探して、過去1日か2日にわたって高低を検索しましたが、特定の緯度/経度のハイライトを提供する例しか見ることができません。

これは実際には「開発」の質問ではないことを理解してください。しかし、ここのどこかで誰かがこのようなことをしたことは確かです。

4

1 に答える 1

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 = {};
    text, fill: new ol.style.Fill({ color: '#000' }), stroke: new ol.style.Stroke({ color: '#f00', width: 3 }) }) })]; } return highlightStyleCache[テキスト]; } }); 3 }) }) })]; } return highlightStyleCache[テキスト]; } }); 3 }) }) })]; } return highlightStyleCache[テキスト]; } });

    1. 読み込まれた国データから国名を解析し、それをセレクター オプションに入力します。

var highlightStyleCache = {}; var featureOverlay = new ol.FeatureOverlay({ map: map, style: function (feature, resolution) { var text = resolution < 5000 ? feature.get('name') : ''; if (!highlightStyleCache[text]) { highlightStyleCache[テキスト] = [新しい ol.style.Style({ ストローク: 新しい ol.style.ストローク({ 色: '#f00', 幅: 1 }), 塗りつぶし: 新しい ol.style.Fill({ 色: ' 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' })、ストローク: new ol.style.Stroke({ color: '#f00', width: 3 }) }) })]; } return highlightStyleCache[テキスト]; } });

  1. 選択した国にズームしてハイライトします:

    var selectFeatureInfo = function (featureId) { var features = countrySource.getFeatures(); var 機能; for (var f = 0; f < features.length; f++) { 機能 = 機能[f]; if (feature.aa == featureId) { var polygon = (feature.getGeometry()); var サイズ = (map.getSize()); view.fitGeometry( ポリゴン、サイズ、{ パディング: [170、50、30、150] }); 壊す; } } if (機能 !== ハイライト) { if (ハイライト) { featureOverlay.removeFeature(ハイライト); } if (機能) { featureOverlay.addFeature(機能); ハイライト = 機能; } };

JSFiddle の例はこちら

于 2015-05-06T15:23:47.413 に答える