add map layers

application/default/views/scripts/index/index.phtml

@@ -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({

htdocs/static-sanjy-np/css/index.css

@@ -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;
+}

htdocs/static-sanjy-np/js/map.js

@@ -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(){
+
+        });
+    }
+});