update map controller

2018-06-23 23:23:07 +08:00 · 2018-06-23 23:23:07 +08:00 · 040f64ea5e
parent c85ebf4b9e
commit 040f64ea5e
9 changed files with 503 additions and 69 deletions
--- a/application/default/controllers/MapController.php
+++ b/application/default/controllers/MapController.php
@ -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()
+    {
+
+    }
+}
--- a/application/default/views/scripts/index/index.phtml
+++ b/application/default/views/scripts/index/index.phtml
@ -59,53 +59,6 @@ $this->headLink()->appendStylesheet('/static-sanjy-np/css/index.css');
    <div class="container-fluid" id="mapContainer">
        <h6 class="title title1">三江源地图</h6>
        <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>

@ -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/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">
    /*新闻轮播图时间控制*/
    $('.carousel2').carousel({
--- a/application/default/views/scripts/map/index.phtml
+++ b/application/default/views/scripts/map/index.phtml
@ -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>
--- a/htdocs/static-sanjy-np/css/index.css
+++ b/htdocs/static-sanjy-np/css/index.css
@ -766,7 +766,7 @@ li {
 .big{
 	width: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%;
 	border-radius: 50%;
 	margin-left: 5px;
@ -776,7 +776,7 @@ li {
 .small{
 	width: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%;
 	border-radius: 50%;
 	margin-left: 5px;
--- a/htdocs/static-sanjy-np/css/map.css
+++ b/htdocs/static-sanjy-np/css/map.css
@ -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;
+}
--- a/htdocs/static-sanjy-np/img/zoom-in.png
+++ b/htdocs/static-sanjy-np/img/zoom-in.png
--- a/htdocs/static-sanjy-np/img/zoom-out.png
+++ b/htdocs/static-sanjy-np/img/zoom-out.png
--- a/htdocs/static-sanjy-np/js/map-index.js
+++ b/htdocs/static-sanjy-np/js/map-index.js
@ -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))
+}
--- a/htdocs/static-sanjy-np/js/map.js
+++ b/htdocs/static-sanjy-np/js/map.js
@ -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_MAP_SERVER = "http://210.77.79.190:20015";

+// $(document).ready(function(){
+//     $('#map').height($(window).height() - $('.pageTitle').height() - $('.header').height());
+// });
+
 var view = new ol.View({
    projection: 'EPSG:3857',
    center: center,
@ -48,46 +52,66 @@ var layers = {
    "boundYellowRiver": {
        title: "黄河园区",
        layer: new ol.layer.Tile({
-            source: new ol.source.XYZ({
-                url: WESTDC_TILE_SERVER + '/sjypark_huangheyuan/{z}/{x}/{y}'
+            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]
+        center: [10879848.96087429, 4117877.9384883614],
+        zoom: 8
    },
    "boundLanCangJiang": {
        title: "澜沧江园区",
        layer: new ol.layer.Tile({
-            source: new ol.source.XYZ({
-                url: WESTDC_TILE_SERVER + '/sjypark_lancangjiang/{z}/{x}/{y}'
+            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]
+        center: [10557705.50270024, 3935037.30807186],
+        zoom: 8
    },
    "boundChangjiang": {
        title: "长江园区",
        layer: new ol.layer.Tile({
            source: new ol.source.TileWMS({
-                url: WESTDC_MAP_SERVER + '/geoserver/Antarctic/wms',
+                url: WESTDC_MAP_SERVER + '/geoserver/sj/wms',
                params: {'FORMAT': 'image/png',
                    'VERSION': '1.1.1',
                    tiled: true,
                    STYLES: '',
-                    LAYERS: 'Antarctic:Seamask_medium_res_polygon',
-                    tilesOrigin: -4524537.706531357 + "," + -4524537.706531357
+                    LAYERS: 'sj:area_changjiang',
+                    tilesOrigin: 9951420.669071037 + "," + 3974091.390929395
                }
            }),
+            opacity: 0.7,
            visible: true
        }),
-        center: [10278745.168478113, 4187177.413633545]
+        center: [10451297.903618347, 4131586.2994088964],
+        zoom: 7
    },
 };

-//飞行动画
-function flyTo(location, done) {
-    var duration = 2000;
-    var zoom = 8;
+function flyTo(location, zoom, duration, done) {
+    if(!duration) duration = 2000;
+    if(!zoom) zoom = 8;
+
    var parts = 2;
    var called = false;
    function callback(complete) {
@ -113,6 +137,32 @@ function flyTo(location, done) {
    }, 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(){
    $('#layers-selector').toggle();
 });
@ -120,13 +170,36 @@ $('#map-layers').click(function(){
 $('.layer-toggle-btn').click(function(){
    $('#layers-selector').toggle();
    var layerId = $(this).data('layer');
+    var currentLayer = layers[layerId];
    if (this.checked === false) {
-        map.removeLayer(layers[layerId].layer);
+        map.removeLayer(currentLayer.layer);
+        map.removeLayer(textLayers[currentLayer.title]);
    } else {
-        map.addLayer(layers[layerId].layer);
+        map.addLayer(currentLayer.layer);
        // 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(){
+
+    });
 });