add map layers
This commit is contained in:
jack
parent
3f6037ca31
commit
69fab9300a
|
|
@ -56,9 +56,56 @@ $this->headLink()->appendStylesheet('/static-sanjy-np/css/index.css');
|
|||
|
||||
<!--三江源地图-->
|
||||
<div class="myMap">
|
||||
<div class="container">
|
||||
<div class="container-fluid" id="mapContainer">
|
||||
<h6 class="title title1">三江源地图</h6>
|
||||
<div id="map" class="map" style="height: 450px;"></div>
|
||||
<div id="map" class="map" style="height: 550px;"></div>
|
||||
<!--左侧按钮区域-->
|
||||
<div class="leftButton">
|
||||
<div class="change" id="map-layers"></div>
|
||||
</div>
|
||||
<!-- 图层 -->
|
||||
<div id="layers-selector">
|
||||
<div>
|
||||
<h4>县界</h4>
|
||||
<ul>
|
||||
<li><input class="layer-toggle-btn" type="checkbox" data-layer="boundZhiduo"><span>治多县</span></li>
|
||||
<li><input class="layer-toggle-btn" type="checkbox" data-layer=""><span>玛多县</span></li>
|
||||
<li><input class="layer-toggle-btn" type="checkbox" data-layer=""><span>杂多县</span></li>
|
||||
<li><input class="layer-toggle-btn" type="checkbox" data-layer=""><span>曲麻莱县</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4>三区边界</h4>
|
||||
<ul>
|
||||
<li><input class="layer-toggle-btn" type="checkbox" data-layer="boundChangjiang"><span>长江源园区</span></li>
|
||||
<li><input class="layer-toggle-btn" type="checkbox" data-layer="boundYellowRiver"><span>黄河源园区</span></li>
|
||||
<li><input class="layer-toggle-btn" type="checkbox" data-layer="boundLanCangJiang"><span>澜沧江园区</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4>保护区功能区划</h4>
|
||||
<ul>
|
||||
<li><input class="layer-toggle-btn" type="checkbox" data-layer=""><span>三江源国家级自然保护区</span></li>
|
||||
<li><input class="layer-toggle-btn" type="checkbox" data-layer=""><span>可可西里国家级自然保护区</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4>功能区划</h4>
|
||||
<ul>
|
||||
<li><input class="layer-toggle-btn" type="checkbox" data-layer=""><span>三江源国家级自然保护区</span></li>
|
||||
<li><input class="layer-toggle-btn" type="checkbox" data-layer=""><span>可可西里国家级自然保护区</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
<div>
|
||||
<h4>土地利用</h4>
|
||||
<ul>
|
||||
<li><input class="layer-toggle-btn" type="checkbox" data-layer=""><span>治多县</span></li>
|
||||
<li><input class="layer-toggle-btn" type="checkbox" data-layer=""><span>玛多县</span></li>
|
||||
<li><input class="layer-toggle-btn" type="checkbox" data-layer=""><span>杂多县</span></li>
|
||||
<li><input class="layer-toggle-btn" type="checkbox" data-layer=""><span>曲麻莱县</span></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
@ -196,70 +243,9 @@ $this->headLink()->appendStylesheet('/static-sanjy-np/css/index.css');
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<script type="text/javascript">
|
||||
var heiheCenter = [11056462.689530393, 4949375.549783349];
|
||||
var token = "pk.eyJ1IjoibGl1amluODM0IiwiYSI6ImEwMzZlMDUzZjZjYjc3MzI1ZDRmYWQyNDc3MzhlOTE0In0.MiWcDy0qLJHkBA_sCw9dHw";
|
||||
var mapboxSource = new ol.source.XYZ({
|
||||
url: 'https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v10/tiles/256/{z}/{x}/{y}?access_token=' + token
|
||||
});
|
||||
var mapboxLayer = new ol.layer.Tile({
|
||||
title: "卫星图",
|
||||
source: mapboxSource,
|
||||
visible: true
|
||||
});
|
||||
var map = new ol.Map({
|
||||
target: 'map',
|
||||
layers: [
|
||||
mapboxLayer
|
||||
],
|
||||
controls: [],
|
||||
view: new ol.View({
|
||||
projection: 'EPSG:3857',
|
||||
center: heiheCenter,
|
||||
loadTilesWhileAnimating: true,
|
||||
zoom: 7
|
||||
})
|
||||
});
|
||||
var map = new ol.Map({
|
||||
target: 'map1',
|
||||
layers: [
|
||||
mapboxLayer
|
||||
],
|
||||
controls: [],
|
||||
view: new ol.View({
|
||||
projection: 'EPSG:3857',
|
||||
center: heiheCenter,
|
||||
loadTilesWhileAnimating: true,
|
||||
zoom: 7
|
||||
})
|
||||
});
|
||||
|
||||
function lineStyle(color, width) {
|
||||
return new ol.style.Style({
|
||||
stroke: new ol.style.Stroke({
|
||||
color: color,
|
||||
width: width
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
let heiheBoundLayer = new ol.layer.Vector({
|
||||
source: new ol.source.Vector({
|
||||
url: 'http://210.77.68.221:10011/geojson/heihe.geojson',
|
||||
format: new ol.format.GeoJSON()
|
||||
}),
|
||||
style: lineStyle('rgba(53, 100, 175, 1)', 5)
|
||||
});
|
||||
map.addLayer(heiheBoundLayer);
|
||||
|
||||
/*新闻轮播图时间控制*/
|
||||
$('.carousel2').carousel({
|
||||
interval: 1500
|
||||
})
|
||||
</script>
|
||||
|
||||
<script src="/static-sanjy-np/js/echarts.min.js"></script>
|
||||
<script src="/static-sanjy-np/js/mychart.js"></script>
|
||||
<script src="/static-sanjy-np/js/map.js"></script>
|
||||
<script type="text/javascript">
|
||||
/*新闻轮播图时间控制*/
|
||||
$('.carousel2').carousel({
|
||||
|
|
|
|||
|
|
@ -746,3 +746,86 @@ li {
|
|||
font-weight: bold;
|
||||
font-family: "宋体";
|
||||
}
|
||||
|
||||
|
||||
/* 地图部分 */
|
||||
#mapContainer{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#map{
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.leftButton{
|
||||
position: absolute;
|
||||
left: 20px;
|
||||
top: 105px;
|
||||
}
|
||||
|
||||
.big{
|
||||
width:50px;
|
||||
height:50px;
|
||||
background:rgba(0,0,0,0.7) url(../img/big.png) no-repeat center;
|
||||
background-size:60%;
|
||||
border-radius: 50%;
|
||||
margin-left: 5px;
|
||||
margin-bottom: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.small{
|
||||
width:50px;
|
||||
height:50px;
|
||||
background:rgba(0,0,0,0.7) url(../img/small.png) no-repeat center;
|
||||
background-size:60%;
|
||||
border-radius: 50%;
|
||||
margin-left: 5px;
|
||||
margin-bottom: 10px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.change{
|
||||
width:50px;
|
||||
height:50px;
|
||||
background:rgba(0,0,0,0.7) url(../img/change.png) no-repeat center;
|
||||
background-size:50%;
|
||||
border-radius: 50%;
|
||||
margin-left: 5px;
|
||||
margin-top: 10px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
#layers-selector {
|
||||
width: 500px;
|
||||
background-color: rgba(0,0,0,0.5);
|
||||
color: #fff;
|
||||
font-weight: 600;
|
||||
padding-left: 20px;
|
||||
border: 2px solid #FFFFFF;
|
||||
position: absolute;
|
||||
left: 80px;
|
||||
top: 115px;
|
||||
display: none;
|
||||
}
|
||||
#layers-selector ul{
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#layers-selector li{
|
||||
float: left;
|
||||
margin-right: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
#layers-selector li input{
|
||||
margin-right: 5px;
|
||||
cursor: pointer;
|
||||
vertical-align: top;
|
||||
}
|
||||
#layers-selector div{
|
||||
clear: both;
|
||||
}
|
||||
#layers-selector h4{
|
||||
font-size: 16px;
|
||||
color: #fab808;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
|
@ -0,0 +1,124 @@
|
|||
var center = [10744901.632441472, 4296908.3669983465];
|
||||
var WESTDC_TILE_SERVER = 'http://210.77.68.221:27011';
|
||||
|
||||
var view = new ol.View({
|
||||
projection: 'EPSG:3857',
|
||||
center: center,
|
||||
loadTilesWhileAnimating: true,
|
||||
zoom: 7
|
||||
});
|
||||
|
||||
var map = new ol.Map({
|
||||
target: 'map',
|
||||
layers: [
|
||||
// new ol.layer.Tile({
|
||||
// title: "天地图卫星影像",
|
||||
// source: new ol.source.XYZ({
|
||||
// url: 'http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}'
|
||||
// }),
|
||||
// visible: true
|
||||
// }),
|
||||
new ol.layer.Tile({
|
||||
title: "天地图底图",
|
||||
source: new ol.source.XYZ({
|
||||
url: 'http://t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}'
|
||||
}),
|
||||
visible: true
|
||||
}),
|
||||
new ol.layer.Tile({
|
||||
title: "天地图标注",
|
||||
source: new ol.source.XYZ({
|
||||
url: 'http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}'
|
||||
}),
|
||||
visible: true
|
||||
})
|
||||
],
|
||||
controls: [],
|
||||
view: view
|
||||
});
|
||||
|
||||
//http://t3.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}
|
||||
|
||||
map.on('click', function(event) {
|
||||
console.log(event.coordinate)
|
||||
});
|
||||
|
||||
var layers = {
|
||||
"boundYellowRiver": {
|
||||
title: "黄河园区",
|
||||
layer: new ol.layer.Tile({
|
||||
source: new ol.source.XYZ({
|
||||
url: WESTDC_TILE_SERVER + '/sjypark_huangheyuan/{z}/{x}/{y}'
|
||||
}),
|
||||
visible: true
|
||||
}),
|
||||
center: [10921790.778184231, 4116205.632870759]
|
||||
},
|
||||
"boundLanCangJiang": {
|
||||
title: "澜沧江园区",
|
||||
layer: new ol.layer.Tile({
|
||||
source: new ol.source.XYZ({
|
||||
url: WESTDC_TILE_SERVER + '/sjypark_lancangjiang/{z}/{x}/{y}'
|
||||
}),
|
||||
visible: true
|
||||
}),
|
||||
center: [10531515.707271997, 3922706.842925957]
|
||||
},
|
||||
"boundChangjiang": {
|
||||
title: "长江园区",
|
||||
layer: new ol.layer.Tile({
|
||||
source: new ol.source.XYZ({
|
||||
url: WESTDC_TILE_SERVER + '/sjypark_changjiang/{z}/{x}/{y}'
|
||||
}),
|
||||
visible: true
|
||||
}),
|
||||
center: [10278745.168478113, 4187177.413633545]
|
||||
},
|
||||
};
|
||||
|
||||
//飞行动画
|
||||
function flyTo(location, done) {
|
||||
var duration = 2000;
|
||||
var zoom = 8;
|
||||
var parts = 2;
|
||||
var called = false;
|
||||
function callback(complete) {
|
||||
--parts;
|
||||
if (called) {
|
||||
return;
|
||||
}
|
||||
if (parts === 0 || !complete) {
|
||||
called = true;
|
||||
done(complete);
|
||||
}
|
||||
}
|
||||
view.animate({
|
||||
center: location,
|
||||
duration: duration
|
||||
}, callback);
|
||||
view.animate({
|
||||
zoom: 7,
|
||||
duration: duration / 2
|
||||
}, {
|
||||
zoom: zoom,
|
||||
duration: duration / 2
|
||||
}, callback);
|
||||
}
|
||||
|
||||
$('#map-layers').click(function(){
|
||||
$('#layers-selector').toggle();
|
||||
});
|
||||
|
||||
$('.layer-toggle-btn').click(function(){
|
||||
$('#layers-selector').toggle();
|
||||
var layerId = $(this).data('layer');
|
||||
if (this.checked === false) {
|
||||
map.removeLayer(layers[layerId].layer);
|
||||
} else {
|
||||
map.addLayer(layers[layerId].layer);
|
||||
// view.setCenter(layers[layerId].center);
|
||||
flyTo(layers[layerId].center,function(){
|
||||
|
||||
});
|
||||
}
|
||||
});
|
||||
Loading…
Reference in New Issue