如何在1页的多个选项卡中打开多个Openlayers地图

时间：2018-10-31 08:09:33

标签： javascript openlayers 

var style = new ol.style.Style({
    fill: new ol.style.Fill({
      	color: 'white'
    }),
    stroke: new ol.style.Stroke({
      	color: '#319FD3',
      	width: 1
    }),
    text: new ol.style.Text({
		font: '12px Calibri,sans-serif',
		fill: new ol.style.Fill({
			color: '#000'
		}),
		stroke: new ol.style.Stroke({
			color: '#fff',
			width: 3
		})
    })
});


// State
var state = 'state-map';
// style for Ols
var vectorLayerstate = new ol.layer.Vector({
	source: new ol.source.Vector({
		url: 'https://raw.githubusercontent.com/openlayers/openlayers/master/examples/data/geojson/countries.geojson',
		format: new ol.format.GeoJSON()
	}),
	style: function(feature) {
		style.getText().setText(feature.get('DIST_NAME'));
		return style;
	}
});
var statemap = new ol.Map({
	layers: [
	  new ol.layer.Tile({
	    source: new ol.source.OSM()
	  }),
	  vectorLayerstate
	],
	target: state,
	view: new ol.View({
	  center: ol.proj.transform([85.0985, 20.9517], 'EPSG:4326', 'EPSG:3857'),
	  zoom: 6
	})
});
var highlightStyle = new ol.style.Style({
	stroke: new ol.style.Stroke({
	 	color: 'green',
		width: 1
	}),
	fill: new ol.style.Fill({
		color: 'rgba(255,0,0,0.1)'
	}),
	text: new ol.style.Text({
		font: '12px Calibri,sans-serif',
		fill: new ol.style.Fill({
	    	color: 'green'
	  	}),
	  	stroke: new ol.style.Stroke({
	   		color: 'green',
	    	width: 3
	  	})
	})
});
var featureOverlay = new ol.layer.Vector({
    source: new ol.source.Vector(),
    map: statemap,
    style: function(feature) {
    	highlightStyle.getText().setText(feature.get('DIST_NAME'));
    	return highlightStyle;
    }
 });
var highlight;
  var displayFeatureInfo = function(pixel) {

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

  };
statemap.on('pointermove', function(evt) {
	if (evt.dragging) {
		return;
	}
	var pixel = statemap.getEventPixel(evt.originalEvent);
	displayFeatureInfo(pixel);
});
statemap.on('click', function(evt) {
	displayFeatureInfo(evt.pixel);
});
// update map size
statemap.updateSize();







// District
var district = 'district-map';
// style for Ols
var vectorLayerdistrict = new ol.layer.Vector({
	source: new ol.source.Vector({
		url: 'https://raw.githubusercontent.com/openlayers/openlayers/master/examples/data/geojson/countries.geojson',
		format: new ol.format.GeoJSON()
	}),
	style: function(feature) {
		style.getText().setText(feature.get('name'));
		return style;
	}
});
var districtmap = new ol.Map({
	layers: [
	  new ol.layer.Tile({
	    source: new ol.source.OSM()
	  }),
	  vectorLayerdistrict
	],
	target: district,
	view: new ol.View({
	  center: ol.proj.transform([85.0985, 20.9517], 'EPSG:4326', 'EPSG:3857'),
	  zoom: 6
	})
});

// Block
var block = 'block-map';
// style for Ols
var vectorLayerblock = new ol.layer.Vector({
	source: new ol.source.Vector({
		url: 'https://raw.githubusercontent.com/openlayers/openlayers/master/examples/data/geojson/countries.geojson',
		format: new ol.format.GeoJSON()
	}),
	style: function(feature) {
		style.getText().setText(feature.get('name'));
		return style;
	}
});
var blockmap = new ol.Map({
	layers: [
	  new ol.layer.Tile({
	    source: new ol.source.OSM()
	  }),
	  vectorLayerblock
	],
	target: block,
	view: new ol.View({
	  center: ol.proj.transform([85.0985, 20.9517], 'EPSG:4326', 'EPSG:3857'),
	  zoom: 6
	})
});
<link href="https://openlayers.org/en/v4.4.0/css/ol.css" rel="stylesheet"/>
<script src="https://openlayers.org/en/v4.4.0/build/ol.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><section class="content">
        <!-- Page come here -->
        <!-- Main content -->
        <div class="row">
            <div class="col-xs-12">
                <div class="nav-tabs-custom">
                    <ul class="nav nav-tabs">
                        <li class="active"><a href="#state" data-toggle="tab" class="tabs">State Level</a></li>
                        <li><a href="#district" data-toggle="tab" class="tabs">District Level</a></li>
                        <li><a href="#block" data-toggle="tab" class="tabs">Block Level</a></li>
                    </ul>
                    <div class="tab-content">

                        <!-- State Level -->
                        <div class="tab-pane active" id="state">
                            <section id="new">
                                <h4 class="page-header">State</h4>
                                <div id="state-map" class="map"></div>
                            </section>
                        </div>
                        <!-- /#State -->

                        <!-- District Level-->
                        <div class="tab-pane" id="district">
                            <section id="new">
                                <h4 class="page-header">District</h4>
                                <div id="district-map" class="map"></div>
                            </section>
                        </div>
                        <!-- /District -->

                        <!-- Block Level-->
                        <div class="tab-pane" id="block">
                            <section id="new">
                                <h4 class="page-header">Block</h4>
                                <div id="block-map" class="map"></div>
                            </section>
                        </div>
                        <!-- /Block -->
                    </div>
                </div>
            </div>
        </div>
    </section>

我有1个页面，其中有3个标签，分别称为州，地区和街区。每个标签都有1张地图。最初，“状态”选项卡处于活动状态，该地图可见，并且效果与我应用于地图的方式相同。

这是我的“多个HTML”标签。

<div class="nav-tabs-custom">
     <ul class="nav nav-tabs">
                        <li class="active"><a href="#state" data-toggle="tab" class="tabs">State Level</a></li>
                        <li><a href="#district" data-toggle="tab" class="tabs">District Level</a></li>
                        <li><a href="#block" data-toggle="tab" class="tabs">Block Level</a></li>
                    </ul>
                    <div class="tab-content">

                        <!-- State Level -->
                        <div class="tab-pane active" id="state">
                            <section id="new">
                                <h4 class="page-header">State</h4>
                                <div id="state-map" class="map"></div>
                            </section>
                        </div>
                        <!-- /#State -->

                        <!-- District Level-->
                        <div class="tab-pane" id="district">
                            <section id="new">
                                <h4 class="page-header">District</h4>
                                <div id="district-map" class="map"></div>
                            </section>
                        </div>
                        <!-- /District -->

                        <!-- Block Level-->
                        <div class="tab-pane" id="block">
                            <section id="new">
                                <h4 class="page-header">Block</h4>
                                <div id="block-map" class="map"></div>
                            </section>
                        </div>
                        <!-- /Block -->
                    </div>
                </div>

JS文件

<link rel="stylesheet" href="<?php echo base_url(); ?>assets/openlayers/ol.css" type="text/css">
<script src="<?php echo base_url(); ?>assets/openlayers/ol.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $(".tabs").on("click",function(){
        var cur_tab = $(this).attr('href');
        var cur_tab_id = cur_tab.slice(1);
        $("#"+cur_tab_id+"-map").find(".ol-unselectable").css("display:block");
    });
});
var style = new ol.style.Style({
    fill: new ol.style.Fill({
        color: 'white'
    }),
    stroke: new ol.style.Stroke({
        color: '#319FD3',
        width: 1
    }),
    text: new ol.style.Text({
        font: '12px Calibri,sans-serif',
        fill: new ol.style.Fill({
            color: '#000'
        }),
        stroke: new ol.style.Stroke({
            color: '#fff',
            width: 3
        })
    })
});


// State
var state = 'state-map';
// style for Ols
var vectorLayerstate = new ol.layer.Vector({
    source: new ol.source.Vector({
        url: '../DATA/State.geojson',
        format: new ol.format.GeoJSON()
    }),
    style: function(feature) {
        style.getText().setText(feature.get('DIST_NAME'));
        return style;
    }
});
var statemap = new ol.Map({
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      }),
      vectorLayerstate
    ],
    target: state,
    view: new ol.View({
      center: ol.proj.transform([85.0985, 20.9517], 'EPSG:4326', 'EPSG:3857'),
      zoom: 6
    })
});
var highlightStyle = new ol.style.Style({
    stroke: new ol.style.Stroke({
        color: 'green',
        width: 1
    }),
    fill: new ol.style.Fill({
        color: 'rgba(255,0,0,0.1)'
    }),
    text: new ol.style.Text({
        font: '12px Calibri,sans-serif',
        fill: new ol.style.Fill({
            color: 'green'
        }),
        stroke: new ol.style.Stroke({
            color: 'green',
            width: 3
        })
    })
});
var featureOverlay = new ol.layer.Vector({
    source: new ol.source.Vector(),
    map: statemap,
    style: function(feature) {
        highlightStyle.getText().setText(feature.get('DIST_NAME'));
        return highlightStyle;
    }
 });
var highlight;
  var displayFeatureInfo = function(pixel) {

    var feature = statemap.forEachFeatureAtPixel(pixel, function(feature) {
      return feature;
    });

    if (feature !== highlight) {
      if (highlight) {
        featureOverlay.getSource().removeFeature(highlight);
      }
      if (feature) {
        featureOverlay.getSource().addFeature(feature);
      }
      highlight = feature;
    }

  };
statemap.on('pointermove', function(evt) {
    if (evt.dragging) {
        return;
    }
    var pixel = statemap.getEventPixel(evt.originalEvent);
    displayFeatureInfo(pixel);
});
statemap.on('click', function(evt) {
    displayFeatureInfo(evt.pixel);
});
// update map size
statemap.updateSize();







// District
var district = 'district-map';
// style for Ols
var vectorLayerdistrict = new ol.layer.Vector({
    source: new ol.source.Vector({
        url: '../DATA/Odisha_Dist.geojson',
        format: new ol.format.GeoJSON()
    }),
    style: function(feature) {
        style.getText().setText(feature.get('name'));
        return style;
    }
});
var districtmap = new ol.Map({
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      }),
      vectorLayerdistrict
    ],
    target: district,
    view: new ol.View({
      center: ol.proj.transform([85.0985, 20.9517], 'EPSG:4326', 'EPSG:3857'),
      zoom: 6
    })
});
districtmap.updateSize();

// Block
var block = 'block-map';
// style for Ols
var vectorLayerblock = new ol.layer.Vector({
    source: new ol.source.Vector({
        url: '../DATA/Odisha_Block.json',
        format: new ol.format.GeoJSON()
    }),
    style: function(feature) {
        style.getText().setText(feature.get('name'));
        return style;
    }
});
var blockmap = new ol.Map({
    layers: [
      new ol.layer.Tile({
        source: new ol.source.OSM()
      }),
      vectorLayerblock
    ],
    target: block,
    view: new ol.View({
      center: ol.proj.transform([85.0985, 20.9517], 'EPSG:4326', 'EPSG:3857'),
      zoom: 6
    })
});
blockmap.updateSize();
$(".tabs").on("click",function(){
    var cur_tab = $(this).attr("href").slice(1);
    //console.log("#"+cur_tab+"-map");
    $("#"+cur_tab+"-map").find(".ol-unselectable").css({"display":"block"});
    $("#"+cur_tab+"-map").find(".ol-unselectable").attr({"width":"1475","height":"750"});
});
</script>

当我切换到“区”或“块选项卡”时，它将为相应的地图ID创建另一个对象。但是它没有显示地图。如果我调试该页面并关闭该页面，则再次显示“区域阻止”页面地图；如果我切换到“阻止”选项卡，则该页面显示空白页面。再一次，如果我打开萤火虫并关闭它，则显示。不知道该怎么办。这是浏览器问题还是什么？

1 个答案:

答案 0 :(得分：1)

我遇到了类似的问题——当我点击回到以前工作的带有 OL 地图的选项卡时...没有显示任何内容。因为里面什么都没有——它是一个空的 <div>。

<div _ngcontent-nqw-c11="" class="map" id="map"></div>

但我最终找到了一个解决方案，我认为这是因为我在我的地图 div 中使用了文字 id="map"，并且在 OL 中有一些全局作用域导致了冲突。

>

修复的是为我的地图组件创建动态 ID。

  1. 添加公共属性：
    public mapDivId: string;

  2. 在构造函数中设置：
    this.mapDivId = `map-comp-${this.valueHelper.generateUUID()}`;

  3. 在模板中，将属性绑定到地图的id <div>:
    <div id="map" [attr.id]="mapDivId"> </div>

这是在 Angular 8 应用中，使用 OL 6.4.3。

相关问题
最新问题