OpenLayers从入门到放弃(1)

OpenLayers 是一个专为Web GIS 客户端开发提供的JavaScript 类库包，用于实现标准格式发布的地图数据访问。博主因为公司业务主打IoT，经常需要在产品中加入一些地图以及对地图的操作。便一不留神上了OpenLayers的这条贼船。接下来就尝试的来做一些小的记录，用来巩固自身的知识。

先来看看我们要实现的效果

再来一大段代码

HTML部分

	
	
	
	
	

	


	
Shanghai Map
	

		

			
			

		
	

js部分

var map = new ol.Map({

			//是否在右下地图右下角显示地图提供商的信息  默认是true
			controls : ol.control.defaults({
				attribution:false,

			}),
			//地图显示的目标HTML容器 用ID标识
			target : "map",

			//Layer图层是资源数据的可视化显示
			layers :[ new ol.layer.Tile({
				source : new ol.source.OSM()
			}) ],

			//ol.View负责地图的中心点，放大，投影之类的设置
			view : new ol.View({
	
				//121.49491, 31.24169 上海东方明珠
				//定位中心点位置 需要将经纬度转化为墨卡托坐标 
				center : ol.proj.transform([121.49491, 31.24169], 'EPSG:4326', 'EPSG:3857'),
				
				//当前范围等级 等级越高内容越仔细
				zoom:15,
				//范围的最小值
				minZoom:2,
				//范围的最大值
				maxZoom:15 

			})

		});

		//设置Icon样式
		var iconStyle = new ol.style.Style({

			image: new ol.style.Icon({
				//锚点 文字与图片的距离
				anchor:[0.5,40], 
				//x方向单位
				anchorXUnits:'fraction',
				//y方向单位
				anchorYUnits:'pixel',
				//图片的透明度
				opacity:0.75,
				//图片的url
				src:'carImg/car_red0.png'
			}),

			text:new ol.style.Text({
				//文字对齐方式
				textAlign:'center',
				//文字的基准线
				textBaseline:'middle',
				//字体样式
				font:'normal 12px 微软雅黑',
				//文本内容
				text:"Kingsley's car",
				//填充
				fill: new ol.style.Fill({color:'#aa3300'}),
				//笔触
				stroke: new ol.style.Stroke({color:"#ffcc33",width:2})
			})

		});

		//设置特征
		var iconFeature = new ol.Feature({
			name:"Kingsley's car",
			geometry:  new ol.geom.Point(ol.proj.transform([121.49491, 31.24169], 'EPSG:4326', 'EPSG:3857')),//位置点
			
		});

		//将图标放置在点上
		iconFeature.setStyle(iconStyle);

		//设置图片大小
		iconStyle.getImage().setScale(0.8);


		//创建图层
		var iconLayer = new ol.layer.Vector({
			source: new ol.source.Vector({
				features:[iconFeature]
			})
		});

		//将图层添加到地图上
		map.addLayer(iconLayer);

		var element = document.getElementById('popup');
		var content = document.getElementById('popup-content');
		var closer  = document.getElementById('popup-closer');

		//创建popup图层
		var popup = new ol.Overlay({
			//元素
			element:element,
			//popup图层与位置点的关系
			positioning:"bottom-left",
			//事件传播到地图视点是否停止
			stopEvent:false,
			autoPan:true,
			autoPanAnimation:{
				duration:250 //当Popup超出地图边界时，为了Popup全部可见，地图移动的速度.
			}

		});

		//添加小车点击事件
		map.on('click',function(evt){
			//evt 保存了点击的点坐标
			var pixel = map.getEventPixel(evt.originalEvent);
			//这个函数会检测与pixel像素相交的要素feature，并对该feature调用callback函数。
			//在视口中遍历所有具有像素颜色的图层，如果图层存在，则返回
			var feature = map.forEachFeatureAtPixel(pixel,
				function(feature,layer){
					return feature;
				});

				if(feature){
				var geometry = feature.getGeometry();
				var coord = geometry.getCoordinates();

				content.innerHTML = "
Welcome to
 Shanghai
"
				//设置弹框的位置
				if(popup.getPosition() == undefined){
					popup.setPosition(coord);
				}
				//弹框添加到图层上
				map.addOverlay(popup);

				}
		});

		//popup的关闭事件
		closer.addEventListener('click',function(){
			//移除弹框
			popup.setPosition(undefined);
			closer.blur();
			return false;

		});

		//添加小车手型
		map.on('pointermove', function(e) {
  			
  			var pixel = map.getEventPixel(e.originalEvent);
 		    var hit = map.hasFeatureAtPixel(pixel);

 			map.getTargetElement().style.cursor = hit ? 'pointer' : '';

		});

popup.css部分

.ol-popup {  
        position: absolute;  
        background-color: white;  
        -webkit-filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));  
        filter: drop-shadow(0 1px 4px rgba(0,0,0,0.2));  
        padding: 10px;  
        border-radius: 10px;  
        border: 1px solid #cccccc;  
        bottom: 50px;  
        left: -50px;  
        text-align: center;
      }  
.ol-popup:after, .ol-popup:before {  
        top: 100%;  
        border: solid transparent;  
        content: " ";  
        height: 0;  
        width: 0;  
        position: absolute;  
        pointer-events: none;  
      }  
.ol-popup:after {  
        border-top-color: white;  
        border-width: 10px;  
        left: 48px;  
        margin-left: -10px;  
      }  
      
.ol-popup:before {  
        border-top-color: #cccccc;  
        border-width: 11px;  
        left: 48px;  
        margin-left: -11px;  
      }  

      /*关闭按钮样式*/
.ol-popup-closer {  
        text-decoration: none;  
        position: absolute;  
        top: 2px;  
        right: 8px;  
      }  
      
.ol-popup-closer:after {  
        content: "✖";  
      } 

嗯。好像看完代码，也没什么好啰嗦的了。能用代码解决的绝不多说。