update map controller
This commit is contained in:
jack
parent
c85ebf4b9e
commit
040f64ea5e
|
|
@ -0,0 +1,33 @@
|
||||||
|
<?php
|
||||||
|
use Helpers\View as view;
|
||||||
|
|
||||||
|
class MapController extends Zend_Controller_Action
|
||||||
|
{
|
||||||
|
private $limit=10;
|
||||||
|
|
||||||
|
function __construct(Zend_Controller_Request_Abstract $request, Zend_Controller_Response_Abstract $response, array $invokeArgs = array())
|
||||||
|
{
|
||||||
|
parent::__construct($request, $response, $invokeArgs);
|
||||||
|
$this->_helper->layout->setLayout('layout-sanji');
|
||||||
|
}
|
||||||
|
|
||||||
|
function preDispatch()
|
||||||
|
{
|
||||||
|
$this->db=Zend_Registry::get('db');
|
||||||
|
$this->view->config = Zend_Registry::get('config');
|
||||||
|
$this->messenger=$this->_helper->getHelper('FlashMessenger');
|
||||||
|
$this->view->messages = $this->messenger->getMessages();
|
||||||
|
$this->view->theme = new Theme();
|
||||||
|
$this->view->main_nav_pageID = "data";
|
||||||
|
|
||||||
|
$this->view->nav = array(
|
||||||
|
array('link'=>'/','title'=>'首页'),
|
||||||
|
array('link'=>'/data','title'=>$this->view->config->title->data),
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
function indexAction()
|
||||||
|
{
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
@ -59,53 +59,6 @@ $this->headLink()->appendStylesheet('/static-sanjy-np/css/index.css');
|
||||||
<div class="container-fluid" id="mapContainer">
|
<div class="container-fluid" id="mapContainer">
|
||||||
<h6 class="title title1">三江源地图</h6>
|
<h6 class="title title1">三江源地图</h6>
|
||||||
<div id="map" class="map" style="height: 550px;"></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>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -245,7 +198,7 @@ $this->headLink()->appendStylesheet('/static-sanjy-np/css/index.css');
|
||||||
|
|
||||||
<script src="/static-sanjy-np/js/echarts.min.js"></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/mychart.js"></script>
|
||||||
<script src="/static-sanjy-np/js/map.js"></script>
|
<script src="/static-sanjy-np/js/map-index.js"></script>
|
||||||
<script type="text/javascript">
|
<script type="text/javascript">
|
||||||
/*新闻轮播图时间控制*/
|
/*新闻轮播图时间控制*/
|
||||||
$('.carousel2').carousel({
|
$('.carousel2').carousel({
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,79 @@
|
||||||
|
<?php
|
||||||
|
$this->headTitle($this->config->title->site);
|
||||||
|
$this->headTitle('地图');
|
||||||
|
$this->headTitle()->setSeparator(' - ');
|
||||||
|
$auth = Zend_Auth::getInstance();
|
||||||
|
$this->headLink()->appendStylesheet('/static-sanjy-np/css/index.css');
|
||||||
|
$this->headLink()->appendStylesheet('/static-sanjy-np/css/map.css');
|
||||||
|
//$this->headLink()->appendStylesheet('/static-sanji-v2/css/number.css');
|
||||||
|
?>
|
||||||
|
<!--三江源地图-->
|
||||||
|
<div class="myMap">
|
||||||
|
<div class="row" id="mapContainer">
|
||||||
|
<div id="map" class="map"></div>
|
||||||
|
<!--左侧按钮区域-->
|
||||||
|
<div class="leftButton">
|
||||||
|
<div class="big" id="zoom-in"></div>
|
||||||
|
<div class="small" id="zoom-out"></div>
|
||||||
|
<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 class="rightButton">
|
||||||
|
<a href="#" class="a_demo_two" id="btn-back-to-sjy">回到三江源</a>
|
||||||
|
<a href="#" class="a_demo_two">关闭所有图层</a>
|
||||||
|
</div>
|
||||||
|
</div><!-- mapContainer -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<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({
|
||||||
|
interval: 1500
|
||||||
|
})
|
||||||
|
</script>
|
||||||
|
|
@ -766,7 +766,7 @@ li {
|
||||||
.big{
|
.big{
|
||||||
width:50px;
|
width:50px;
|
||||||
height:50px;
|
height:50px;
|
||||||
background:rgba(0,0,0,0.7) url(../img/big.png) no-repeat center;
|
background:rgba(0,0,0,0.7) url(../img/zoom-in.png) no-repeat center;
|
||||||
background-size:60%;
|
background-size:60%;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
|
|
@ -776,7 +776,7 @@ li {
|
||||||
.small{
|
.small{
|
||||||
width:50px;
|
width:50px;
|
||||||
height:50px;
|
height:50px;
|
||||||
background:rgba(0,0,0,0.7) url(../img/small.png) no-repeat center;
|
background:rgba(0,0,0,0.7) url(../img/zoom-out.png) no-repeat center;
|
||||||
background-size:60%;
|
background-size:60%;
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
margin-left: 5px;
|
margin-left: 5px;
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,162 @@
|
||||||
|
/* 地图部分 */
|
||||||
|
#mapContainer{
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
#map{
|
||||||
|
min-height: 550px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leftButton{
|
||||||
|
position: absolute;
|
||||||
|
left: 20px;
|
||||||
|
top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.big{
|
||||||
|
width:50px;
|
||||||
|
height:50px;
|
||||||
|
background:rgba(0,0,0,0.7) url(../img/zoom-in.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/zoom-out.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*按钮*/
|
||||||
|
.rightButton{
|
||||||
|
position: absolute;
|
||||||
|
right: 70px;
|
||||||
|
top:30px;
|
||||||
|
}
|
||||||
|
.rightButton a:hover,.rightButton a:active{
|
||||||
|
color: #FFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.a_demo_two {
|
||||||
|
float: right;
|
||||||
|
margin-left: 10px;
|
||||||
|
background-color:#333;
|
||||||
|
padding:8px 10px;
|
||||||
|
position:relative;
|
||||||
|
font-family: 'Open Sans', sans-serif;
|
||||||
|
font-size:12px;
|
||||||
|
text-decoration:none;
|
||||||
|
color:#fff;
|
||||||
|
background-image: linear-gradient(bottom, rgb(110,107,107) 0%, rgb(146,144,144) 100%);
|
||||||
|
background-image: -o-linear-gradient(bottom, rgb(110,107,107) 0%, rgb(146,144,144) 100%);
|
||||||
|
background-image: -moz-linear-gradient(bottom, rgb(110,107,107) 0%, rgb(146,144,144) 100%);
|
||||||
|
background-image: -webkit-linear-gradient(bottom, rgb(110,107,107) 0%, rgb(146,144,144) 100%);
|
||||||
|
background-image: -ms-linear-gradient(bottom, rgb(110,107,107) 0%, rgb(146,144,144) 100%);
|
||||||
|
background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, rgb(146,144,144)),color-stop(1, rgb(110,107,107)));
|
||||||
|
-webkit-box-shadow: inset 0px 1px 0px #7d7c7c, 0px 6px 0px #504e4e;
|
||||||
|
-moz-box-shadow: inset 0px 1px 0px #7d7c7c, 0px 6px 0px #504e4e;
|
||||||
|
-o-box-shadow: inset 0px 1px 0px #7d7c7c, 0px 6px 0px #504e4e;
|
||||||
|
box-shadow: inset 0px 1px 0px #7d7c7c, 0px 6px 0px #504e4e;
|
||||||
|
-webkit-border-radius: 5px;
|
||||||
|
-moz-border-radius: 5px;
|
||||||
|
-o-border-radius: 5px;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.a_demo_two::before {
|
||||||
|
background-color:#504e4e;
|
||||||
|
content:"";
|
||||||
|
display:block;
|
||||||
|
position:absolute;
|
||||||
|
width:100%;
|
||||||
|
height:100%;
|
||||||
|
padding-left:2px;
|
||||||
|
padding-right:2px;
|
||||||
|
padding-bottom:4px;
|
||||||
|
left:-2px;
|
||||||
|
top:5px;
|
||||||
|
z-index:-1;
|
||||||
|
-webkit-border-radius: 6px;
|
||||||
|
-moz-border-radius: 6px;
|
||||||
|
-o-border-radius: 6px;
|
||||||
|
border-radius: 6px;
|
||||||
|
-webkit-box-shadow: 0px 1px 0px #fff;
|
||||||
|
-moz-box-shadow: 0px 1px 0px #fff;
|
||||||
|
-o-box-shadow: 0px 1px 0px #fff;
|
||||||
|
box-shadow: 0px 1px 0px #fff;
|
||||||
|
}
|
||||||
|
|
||||||
|
.a_demo_two:active {
|
||||||
|
color:#FFFFFF;
|
||||||
|
text-shadow: 0px 1px 1px rgba(255,255,255,0.3);
|
||||||
|
background:rgb(101,98,98);
|
||||||
|
-webkit-box-shadow: inset 0px 1px 0px #7d7c7c, 0px 6px 0px #504e4e;
|
||||||
|
-moz-box-shadow: inset 0px 1px 0px #7d7c7c, 0px 6px 0px #504e4e;
|
||||||
|
-o-box-shadow: inset 0px 1px 0px #7d7c7c, 0px 6px 0px #504e4e;
|
||||||
|
box-shadow: inset 0px 1px 0px #7d7c7c, 0px 6px 0px #504e4e;
|
||||||
|
top:7px;
|
||||||
|
}
|
||||||
|
.a_demo_two:hover{
|
||||||
|
color:#FFFFFF;
|
||||||
|
}
|
||||||
|
.a_demo_two:active:hover{
|
||||||
|
color:#FFFFFF;
|
||||||
|
}
|
||||||
|
.a_demo_two:active::before {
|
||||||
|
top:-2px;
|
||||||
|
color:#FFFFFF;
|
||||||
|
}
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1,134 @@
|
||||||
|
var center = [10638261.95370317, 4067978.645337081];
|
||||||
|
var WESTDC_TILE_SERVER = 'http://210.77.68.221:27011';
|
||||||
|
var WESTDC_MAP_SERVER = "http://210.77.79.190:20015";
|
||||||
|
|
||||||
|
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.TileWMS({
|
||||||
|
url: WESTDC_MAP_SERVER + '/geoserver/sj/wms',
|
||||||
|
params: {'FORMAT': 'image/png',
|
||||||
|
'VERSION': '1.1.1',
|
||||||
|
tiled: true,
|
||||||
|
STYLES: '',
|
||||||
|
LAYERS: 'sj:there_area_yellow_river',
|
||||||
|
tilesOrigin: 9951420.669071037 + "," + 3974091.390929395
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
opacity: 0.7,
|
||||||
|
visible: true
|
||||||
|
}),
|
||||||
|
center: [10921790.778184231, 4116205.632870759],
|
||||||
|
zoom: 8
|
||||||
|
},
|
||||||
|
"boundLanCangJiang": {
|
||||||
|
title: "澜沧江园区",
|
||||||
|
layer: new ol.layer.Tile({
|
||||||
|
source: new ol.source.TileWMS({
|
||||||
|
url: WESTDC_MAP_SERVER + '/geoserver/sj/wms',
|
||||||
|
params: {'FORMAT': 'image/png',
|
||||||
|
'VERSION': '1.1.1',
|
||||||
|
tiled: true,
|
||||||
|
STYLES: '',
|
||||||
|
LAYERS: 'sj:area_lancangjiang',
|
||||||
|
tilesOrigin: 9951420.669071037 + "," + 3974091.390929395
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
opacity: 0.7,
|
||||||
|
visible: true
|
||||||
|
}),
|
||||||
|
center: [10531515.707271997, 3922706.842925957],
|
||||||
|
zoom: 8
|
||||||
|
},
|
||||||
|
"boundChangjiang": {
|
||||||
|
title: "长江园区",
|
||||||
|
layer: new ol.layer.Tile({
|
||||||
|
source: new ol.source.TileWMS({
|
||||||
|
url: WESTDC_MAP_SERVER + '/geoserver/sj/wms',
|
||||||
|
params: {'FORMAT': 'image/png',
|
||||||
|
'VERSION': '1.1.1',
|
||||||
|
tiled: true,
|
||||||
|
STYLES: '',
|
||||||
|
LAYERS: 'sj:area_changjiang',
|
||||||
|
tilesOrigin: 9951420.669071037 + "," + 3974091.390929395
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
opacity: 0.7,
|
||||||
|
visible: true
|
||||||
|
}),
|
||||||
|
center: [10278745.168478113, 4187177.413633545],
|
||||||
|
zoom: 7
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
function pointTextStyle(text, size, color) {
|
||||||
|
return new ol.style.Style({
|
||||||
|
text: new ol.style.Text({
|
||||||
|
font: 'bold '+size+'px "Open Sans", "Arial Unicode MS", "sans-serif"',
|
||||||
|
overflow: false,
|
||||||
|
fill: new ol.style.Fill({
|
||||||
|
color: color
|
||||||
|
}),
|
||||||
|
text: text
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function addTextMarker(text, location){
|
||||||
|
return new ol.layer.Vector({
|
||||||
|
source: new ol.source.Vector({
|
||||||
|
features: [new ol.Feature({
|
||||||
|
geometry: new ol.geom.Point(location)
|
||||||
|
})]
|
||||||
|
}),
|
||||||
|
style: pointTextStyle(text, 18, "#246166")
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
for(var i in layers){
|
||||||
|
map.addLayer(layers[i].layer);
|
||||||
|
map.addLayer(addTextMarker(layers[i].title, layers[i].center))
|
||||||
|
}
|
||||||
|
|
@ -1,7 +1,11 @@
|
||||||
var center = [10744901.632441472, 4296908.3669983465];
|
var center = [10599381.969998538, 4091531.57875448];
|
||||||
var WESTDC_TILE_SERVER = 'http://210.77.68.221:27011';
|
var WESTDC_TILE_SERVER = 'http://210.77.68.221:27011';
|
||||||
var WESTDC_MAP_SERVER = "http://210.77.79.190:20015";
|
var WESTDC_MAP_SERVER = "http://210.77.79.190:20015";
|
||||||
|
|
||||||
|
// $(document).ready(function(){
|
||||||
|
// $('#map').height($(window).height() - $('.pageTitle').height() - $('.header').height());
|
||||||
|
// });
|
||||||
|
|
||||||
var view = new ol.View({
|
var view = new ol.View({
|
||||||
projection: 'EPSG:3857',
|
projection: 'EPSG:3857',
|
||||||
center: center,
|
center: center,
|
||||||
|
|
@ -48,46 +52,66 @@ var layers = {
|
||||||
"boundYellowRiver": {
|
"boundYellowRiver": {
|
||||||
title: "黄河园区",
|
title: "黄河园区",
|
||||||
layer: new ol.layer.Tile({
|
layer: new ol.layer.Tile({
|
||||||
source: new ol.source.XYZ({
|
source: new ol.source.TileWMS({
|
||||||
url: WESTDC_TILE_SERVER + '/sjypark_huangheyuan/{z}/{x}/{y}'
|
url: WESTDC_MAP_SERVER + '/geoserver/sj/wms',
|
||||||
|
params: {'FORMAT': 'image/png',
|
||||||
|
'VERSION': '1.1.1',
|
||||||
|
tiled: true,
|
||||||
|
STYLES: '',
|
||||||
|
LAYERS: 'sj:there_area_yellow_river',
|
||||||
|
tilesOrigin: 9951420.669071037 + "," + 3974091.390929395
|
||||||
|
}
|
||||||
}),
|
}),
|
||||||
|
opacity: 0.7,
|
||||||
visible: true
|
visible: true
|
||||||
}),
|
}),
|
||||||
center: [10921790.778184231, 4116205.632870759]
|
center: [10879848.96087429, 4117877.9384883614],
|
||||||
|
zoom: 8
|
||||||
},
|
},
|
||||||
"boundLanCangJiang": {
|
"boundLanCangJiang": {
|
||||||
title: "澜沧江园区",
|
title: "澜沧江园区",
|
||||||
layer: new ol.layer.Tile({
|
layer: new ol.layer.Tile({
|
||||||
source: new ol.source.XYZ({
|
source: new ol.source.TileWMS({
|
||||||
url: WESTDC_TILE_SERVER + '/sjypark_lancangjiang/{z}/{x}/{y}'
|
url: WESTDC_MAP_SERVER + '/geoserver/sj/wms',
|
||||||
|
params: {'FORMAT': 'image/png',
|
||||||
|
'VERSION': '1.1.1',
|
||||||
|
tiled: true,
|
||||||
|
STYLES: '',
|
||||||
|
LAYERS: 'sj:area_lancangjiang',
|
||||||
|
tilesOrigin: 9951420.669071037 + "," + 3974091.390929395
|
||||||
|
}
|
||||||
}),
|
}),
|
||||||
|
opacity: 0.7,
|
||||||
visible: true
|
visible: true
|
||||||
}),
|
}),
|
||||||
center: [10531515.707271997, 3922706.842925957]
|
center: [10557705.50270024, 3935037.30807186],
|
||||||
|
zoom: 8
|
||||||
},
|
},
|
||||||
"boundChangjiang": {
|
"boundChangjiang": {
|
||||||
title: "长江园区",
|
title: "长江园区",
|
||||||
layer: new ol.layer.Tile({
|
layer: new ol.layer.Tile({
|
||||||
source: new ol.source.TileWMS({
|
source: new ol.source.TileWMS({
|
||||||
url: WESTDC_MAP_SERVER + '/geoserver/Antarctic/wms',
|
url: WESTDC_MAP_SERVER + '/geoserver/sj/wms',
|
||||||
params: {'FORMAT': 'image/png',
|
params: {'FORMAT': 'image/png',
|
||||||
'VERSION': '1.1.1',
|
'VERSION': '1.1.1',
|
||||||
tiled: true,
|
tiled: true,
|
||||||
STYLES: '',
|
STYLES: '',
|
||||||
LAYERS: 'Antarctic:Seamask_medium_res_polygon',
|
LAYERS: 'sj:area_changjiang',
|
||||||
tilesOrigin: -4524537.706531357 + "," + -4524537.706531357
|
tilesOrigin: 9951420.669071037 + "," + 3974091.390929395
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
|
opacity: 0.7,
|
||||||
visible: true
|
visible: true
|
||||||
}),
|
}),
|
||||||
center: [10278745.168478113, 4187177.413633545]
|
center: [10451297.903618347, 4131586.2994088964],
|
||||||
|
zoom: 7
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
//飞行动画
|
function flyTo(location, zoom, duration, done) {
|
||||||
function flyTo(location, done) {
|
if(!duration) duration = 2000;
|
||||||
var duration = 2000;
|
if(!zoom) zoom = 8;
|
||||||
var zoom = 8;
|
|
||||||
var parts = 2;
|
var parts = 2;
|
||||||
var called = false;
|
var called = false;
|
||||||
function callback(complete) {
|
function callback(complete) {
|
||||||
|
|
@ -113,6 +137,32 @@ function flyTo(location, done) {
|
||||||
}, callback);
|
}, callback);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function pointTextStyle(text, size, color) {
|
||||||
|
return new ol.style.Style({
|
||||||
|
text: new ol.style.Text({
|
||||||
|
font: 'bold '+size+'px "Open Sans", "Arial Unicode MS", "sans-serif"',
|
||||||
|
overflow: false,
|
||||||
|
fill: new ol.style.Fill({
|
||||||
|
color: color
|
||||||
|
}),
|
||||||
|
text: text
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function addTextMarker(text, location){
|
||||||
|
return new ol.layer.Vector({
|
||||||
|
source: new ol.source.Vector({
|
||||||
|
features: [new ol.Feature({
|
||||||
|
geometry: new ol.geom.Point(location)
|
||||||
|
})]
|
||||||
|
}),
|
||||||
|
style: pointTextStyle(text, 18, "#246166")
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
var textLayers = {};
|
||||||
|
|
||||||
$('#map-layers').click(function(){
|
$('#map-layers').click(function(){
|
||||||
$('#layers-selector').toggle();
|
$('#layers-selector').toggle();
|
||||||
});
|
});
|
||||||
|
|
@ -120,13 +170,36 @@ $('#map-layers').click(function(){
|
||||||
$('.layer-toggle-btn').click(function(){
|
$('.layer-toggle-btn').click(function(){
|
||||||
$('#layers-selector').toggle();
|
$('#layers-selector').toggle();
|
||||||
var layerId = $(this).data('layer');
|
var layerId = $(this).data('layer');
|
||||||
|
var currentLayer = layers[layerId];
|
||||||
if (this.checked === false) {
|
if (this.checked === false) {
|
||||||
map.removeLayer(layers[layerId].layer);
|
map.removeLayer(currentLayer.layer);
|
||||||
|
map.removeLayer(textLayers[currentLayer.title]);
|
||||||
} else {
|
} else {
|
||||||
map.addLayer(layers[layerId].layer);
|
map.addLayer(currentLayer.layer);
|
||||||
// view.setCenter(layers[layerId].center);
|
// view.setCenter(layers[layerId].center);
|
||||||
flyTo(layers[layerId].center,function(){
|
flyTo(currentLayer.center, currentLayer.zoom, 2000, function(){
|
||||||
|
textLayers[currentLayer.title] = addTextMarker(currentLayer.title, currentLayer.center);
|
||||||
|
map.addLayer(textLayers[currentLayer.title]);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
$('#zoom-in').click(function(){
|
||||||
|
if(view.getZoom() >=20)
|
||||||
|
view.setZoom(20);
|
||||||
|
else
|
||||||
|
view.setZoom(view.getZoom() + 1);
|
||||||
|
});
|
||||||
|
|
||||||
|
$('#zoom-out').click(function(){
|
||||||
|
if(view.getZoom() <=6)
|
||||||
|
view.setZoom(6);
|
||||||
|
else
|
||||||
|
view.setZoom(view.getZoom() - 1);
|
||||||
|
});
|
||||||
|
|
||||||
|
$('#btn-back-to-sjy').click(function(){
|
||||||
|
flyTo(center, 7, 2000, function(){
|
||||||
|
|
||||||
|
});
|
||||||
});
|
});
|
||||||
Loading…
Reference in New Issue