- var __map = null;
- var __markerLayer = null;
- var __lineLayer = null;
-
- var prefcode = "0";
- var citycode = "00000";
- var dir = "./";
- var name = "";
- var lonlat = [139.7637,35.6808];
-
- var queryString = window.location.search;
- if(queryString){
- queryString = queryString.substring(1);
- var parameters = queryString.split('&');
- for (var i = 0; i < parameters.length; i++) {
- var element = parameters[i].split('=');
- var paramName = decodeURIComponent(element[0]);
- var paramValue = decodeURIComponent(element[1]);
- if (paramName == "prefcode") {
- prefcode = paramValue;
- }
- if (paramName == "citycode") {
- citycode = paramValue;
- }
- }
- }
-
- // マーカーの見た目の作成
- var style = new ol.style.Style({
- image: new ol.style.Icon({
- src: 'lib/img/osm_200x200.png',
- anchor: [0.5, 0.5],
- scale: 0.2
- }),
- stroke: new ol.style.Stroke({color: '#ff33ff', width: 10})
- });
-
- function loadMap() {
-
- $.when(
- $.getJSON("mesh/meshcode_"+ prefcode +"_"+ citycode +".geojson")
- ).done(function(data1) {
- site = data1.site;
- style = new ol.style.Style({
- image: new ol.style.Icon({
- src: 'lib/img/mapmarker_64x64.png',
- anchor: [0.5, 0.5],
- scale: 0.2
- }),
- stroke: new ol.style.Stroke({color: '#ff33ff', width: 10})
- });
-
- $(data1.features).each(function() {
- if (this.geometry.type == "Point") {
- lonlat = this.geometry.coordinates;
- }
- });
-
- __map = new ol.Map({
- target: 'map',
- layers: [
- new ol.layer.Tile({
- source: new ol.source.OSM()
- })
- ],
- view: new ol.View({
- center: ol.proj.fromLonLat(lonlat),
- zoom: 12
- })
- });
-
- var title = document.getElementById("title");
- title.innerHTML = "自治体コード : " + citycode;
-
- // 表示するためのレイヤーを作成する
- __markerLayer = new ol.layer.Vector({
- source: new ol.source.Vector()
- });
- __map.addLayer(__markerLayer);
-
- // ポップアップを表示するためのオーバーレイを作成する
- __overlay = new ol.Overlay({
- element: document.getElementById('popup'),
- positioning: 'bottom-center'
- });
-
- $.when(
- $.getJSON("mesh/meshcode_"+ prefcode +"_"+ citycode +".geojson")
- ).done(function(data2) {
- features = data2.features;
- $(features).each(function() {
- if (this.geometry != null) {
- if (this.geometry.type == "Point") {
- var feature = new ol.Feature({
- geometry: new ol.geom.Point(ol.proj.fromLonLat(this.geometry.coordinates))
- });
- feature.information = this;
- feature.setStyle(style);
- __markerLayer.getSource().addFeature(feature);
- }
- if (this.geometry.type == "LineString") {
- drawPolygon([this.geometry.coordinates]);
- }
- }
- });
-
- // 地図のクリックイベントを設定
- __map.on('click', function (evt) {
- var feature = __map.forEachFeatureAtPixel(
- evt.pixel,
- function (feature) {
- return feature;
- }
- );
- if (feature) {
- var coordinates = feature.getGeometry().getCoordinates();
- var info = feature.information;
- var element = __overlay.getElement();
- var descriptionHTML =
- "<div>都道府県: " + info.properties.prefcode + " "+ info.properties.prefname +"</div>" +
- "<div>自治体コード: " + info.properties.citycode + " "+ info.properties.cityname + "</div>" +
- "<div>地域メッシュコード: " + info.properties.meshcode + "</div>";
- element.innerHTML = descriptionHTML;
- __overlay.setPosition(coordinates);
- __map.addOverlay(__overlay);
- } else {
- __map.removeOverlay(__overlay);
- }
- });
- });
- });
- }
-
- /**
- * ポリゴンを描画する
- */
- function drawPolygon(coordinates) {
- // ジオメトリの作成
- var polygon = new ol.geom.Polygon([]);
- polygon.setCoordinates(coordinates);
-
- // 地物オブジェクトの作成 〜 レイヤーの作成
- var feature = new ol.Feature(
- polygon.transform('EPSG:4326', 'EPSG:3857')
- );
- feature.setId('tokyotower');
-
- var vector = new ol.source.Vector({
- features: [feature]
- });
- var routeLayer = new ol.layer.Vector({
- source: vector,
- style: new ol.style.Style({
- stroke: new ol.style.Stroke({ color: '#000000', width: 2 })
- //fill: new ol.style.Fill({ color: [0, 0, 0, 0.2] })
- })
- });
-
- // 作成したポリゴンをレイヤーにのせる
- __map.addLayer(routeLayer);
- }