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

var center = [10599381.969998538, 4091531.57875448];
var WESTDC_MAP_SERVER = "http://210.77.79.190:8888/geoserver";

// $(document).ready(function(){
//     $('#map').height($(window).height() - $('.pageTitle').height() - $('.header').height());
// });

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)
});

function WMSLayer(layer){
    return new ol.layer.Tile({
        source: new ol.source.TileWMS({
            url: WESTDC_MAP_SERVER + '/sjynp/wms',
            params: {'FORMAT': 'image/png',
                'VERSION': '1.1.1',
                tiled: true,
                STYLES: '',
                LAYERS: 'sjynp:' + layer,
                tilesOrigin: 9951420.669071037 + "," + 3974091.390929395
            }
        }),
        opacity: 0.7,
        visible: true
    })
}

var layers = {
    "boundYellowRiver": {
        title: "黄河园区",
        showTitle: false,
        layer:  WMSLayer('yellow_river_park'),
        center: [10879848.96087429, 4117877.9384883614],
        zoom: 8
    },
    "boundLanCangJiang": {
        title: "澜沧江园区",
        showTitle: false,
        layer: WMSLayer('lancang_river_park'),
        center: [10557705.50270024, 3935037.30807186],
        zoom: 8
    },
    "boundChangjiang": {
        title: "长江园区",
        showTitle: false,
        layer:  WMSLayer('yangtze_river_park'),
        center: [10451297.903618347, 4131586.2994088964],
        zoom: 7
    },

    "boundArea": {
        title: "县区边界",
        layer: WMSLayer('county_bound_sanjiangyuan'),
        center: [10669314.496444024, 4028957.542397498],
        zoom: 6
    },
    "boundZhiduo": {
        title: "治多县",
        layer: WMSLayer('county_bound_zhiduo'),
        center: [10755941.536062466, 3865974.688836431],
        zoom: 6
    },
    "boundMaduo": {
        title: "玛多县",
        layer: WMSLayer('county_bound_maduo'),
        center: [10669314.496444024, 4028957.542397498],
        zoom: 6
    },
    "boundZaduo": {
        title: "杂多县",
        layer: WMSLayer('county_bound_zaduo'),
        center: [10669314.496444024, 4028957.542397498],
        zoom: 6
    },
    "boundQumalai": {
        title: "曲麻莱县",
        layer: WMSLayer('county_bound_qumalai'),
        center: [10669314.496444024, 4028957.542397498],
        zoom: 6
    },

    "sanjiangyuanFunctionArea": {
        title: "三江源功能分区",
        layer: WMSLayer('sanjiangyuan_national_nature_reserve'),
        center: [10669314.496444024, 4028957.542397498],
        zoom: 7
    },
    "hohxiFunctionArea": {
        title: "可可西里功能分区",
        layer: WMSLayer('hohxi_national_nature_reserve'),
        center: [10194893.748449273, 4212372.969082045],
        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) {
        --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);
}

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

$('.layer-toggle-btn').click(function(){
    $('#layers-selector').toggle();
    var layerId = $(this).data('layer');
    var currentLayer = layers[layerId];
    if (this.checked === false) {
        map.removeLayer(currentLayer.layer);
        map.removeLayer(textLayers[currentLayer.title]);
    } else {
        map.addLayer(currentLayer.layer);
        // view.setCenter(layers[layerId].center);
        flyTo(currentLayer.center, currentLayer.zoom, 2000, function(){
            if(currentLayer.showTitle)
            {
                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(){

    });
});

$('#btn-close-layers').click(function(){
    for(var i in layers){
        map.removeLayer(layers[i].layer);
        if(textLayers[layers[i].title])
            map.removeLayer(textLayers[layers[i].title]);
    }
    $('.layer-toggle-btn').attr('checked', false);
    flyTo(center, 7, 2000, function(){});
});

$('#layers-selector').show();