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

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,
    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: [10879848.96087429, 4117877.9384883614],
        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: [10557705.50270024, 3935037.30807186],
        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: [10451297.903618347, 4131586.2994088964],
        zoom: 7
    },
};

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

    });
});