OpenLayers地图使用

var tjSource;    //图层数据
var tjLayer;     //图层
var infoWindow;    //点击点位出现的弹窗
ol.source.AMap = function (options) {
     var options = options ? options : {};
     var attributions;
     if (options.attributions !== undefined) {
       attributions = option.attributions;
     } else {
       attributions = [ol.source.AMap.ATTRIBUTION];
     }

     var url;
     if (options.mapType == "1") {
       url ='http://15.75.0.255:25003/v3/tile?x={x}&y={y}&z={z}';
     } else if(options.mapType == "2") {
       url = 'http://15.75.0.255:25777/v3/tile?x={x}&y={y}&z={z}';
     }else{
       url = 'http://15.75.0.255:25033/v3/tile?x={x}&y={y}&z={z}';

     }

     ol.source.XYZ.call(this, {
       crossOrigin: null,   //跨域
       cacheSize: options.cacheSize,
       projection: ol.proj.get('EPSG:3857'),
       url: url,
       minZoom:options.mapType == "2"?10:1,
       wrapX: options.wrapX !== undefined ? options.wrapX : true
     });
   }
   ol.inherits(ol.source.AMap, ol.source.XYZ);
   //-------------------重点分割线-------------
   var layers = [
      new ol.layer.Tile({
        title: "",
        source: new ol.source.AMap({mapType: "1"})
      }),
      new ol.layer.Tile({
        opacity:0.3,
        title: "",
        source: new ol.source.AMap({mapType: "2"})
      }),
      new ol.layer.Tile({
        opacity:0.6,
        title: "",
        source: new ol.source.AMap({mapType: "3"})
      }),
    ];
   //设置地图
   var map = new ol.Map({
	      layers: layers,      
	      target: 'map-container',     //地图容器id
	      //overlays: [infoWindow],      //地图点位上的弹窗
          view: new ol.View({
	        projection: 'EPSG:3857',
	        center: ol.proj.fromLonLat([121.568465, 31.635918]),  //默认中心位置
	        zoom: 11,      //地图初始缩放级别
	        minZoom:9,
	        maxZoom:20,
        }),
	    //隐藏左上角地图层级缩放按钮
	    controls:ol.control.defaults({
	      attribution:false,
	      zoom:false
	    });
    });
    //addLayer ---添加图层
    tjSource = new ol.source.Vector({
      features:[]
    });
    tjLayer = new ol.layer.Vector({
      source:tjSource,
      zIndex: 1005,
      style: new ol .style.Style({
        image:new ol.style.Circle({
          radius:80,
      	})
      })
    });
    map.addLayer(tjLayer);
    //初始化地图点位弹窗
    var infoWindowContainer = document.getElementById("infoWindow");  //包弹窗的html节点id
    infoWindow = new ol.Overlay({
      element: infoWindowContainer,
      autoPan: true,
      positioning:'bottom-center',
      position:null,
      autoPanAnimation: {
        duration: 250
      }
    });
  	map.addOverlay(infoWindow);     //将弹窗添加到地图的addOverlay属性
    //点击复位按钮回到地图中心位置（自定义的复位按钮点击事件）
    $('#btn').on('click',function(){
      map.getView().setCenter(ol.proj.fromLonLat([121.568465, 31.635918]));
    });
	
	//在地图上撒点
	//点位数组（需要撒点的经纬度数组,每一条包含该点位的信息等）
	var pointerArr = [
		{
			coor:[122.568465, 32.635918],
			name:'',
			type:'',
		}
	];  
	for(var i=0;i<pointerArr.length;i++){
		//openlayer地图的经纬度都是要转化的
		var coor = ol.proj.fromLonLat(pointerArr[i].coor[0] ,pointerArr[i].coor[1]);	  
    	var feature = new ol.Feature({
      		geometry:new ol.geom.Point(coor),    //设置为圆点模式 
    	});
    	//自定义的点位信息，如果地图上的点位有点击事件需要展示信息啥的，按需要写
        feature.attr = {coor:coor,type:pointerArr[i].type,name:pointerArr[i].name};
        feature.coor = coor;
        //点位的样纸
        feature.setStyle(new ol.style.Style({
          zIndex: 9990,
          image: new ol.style.Icon({
            size: [56, 75],
            scale: 0.5,
            src: icon,   //点位图标的路径
          })
        }));
        //弹窗的布局样式，填入需要的点位详细信息
        feature.content = '<div>'+name+'</div>';
        tjSource.addFeature(feature);  //将点位添加到图层数据中
	}
	//鼠标移到地图上的点位变手型
    map.on("pointermove",function(evt){
    	if(evt.dragging) return;
       		var feature = map.forEachFeatureAtPixel(evt.pixel,function(f,l){
         return f;
       })
       try{
         if(feature != undefined && feature.values_.type != "route"){
           map.getTargetElement().style.cursor = "pointer";
         }else{
           map.getTargetElement().style.cursor = "";
         }
       }catch(e){
         map.getTargetElement().style.cursor = "";
       }
   });
   // 地图上点位的点击事件，点击出现弹窗
    map.on('singleclick',function(evt){
    	var feature = map.forEachFeatureAtPixel(evt.pixel,function(f,l){
          return f;
        },{hitTolerance:5});
        try{ 
          //在地图上撒点时，设置的attr属性,按需要取做判断，这里是为了区分撒点和别的点
          if(feature.attr.type == 'pointer'){
          	//出现弹窗
             $('#infoWindow .detail-content').html(feature.content);
             infoWindow.setPosition(feature.coor);
             map.getTargetElement().style.cursor = "pointer";
          }
        }catch(e){
             map.getTargetElement().style.cursor = "";
             infoWindow.setPosition(undefined);
        }
    });
	//弹窗的关闭事件
    $('.close-btn').on('click',function(){
      infoWindow.setPosition(undefined);
    });

	//如果有需要隐藏某个图层或展示某图层
	tjLayer.setVisible(false);     //隐藏
	tjLayer.setVisible(true);      //展示