OpenLayers简单使用

鼠标移动变色和显示标注查看官方样式
#样式

var style = new ol.style.Style({// 起始样式
			fill : new ol.style.Fill({// 填充要素样式
				color : '#B4FCD1'
			}),
			stroke : new ol.style.Stroke({// 边界样色
				color : '#F5F5F5',
				width : 2
			}),
			text : new ol.style.Text({// 字体样色
				font : '14px Calibri, 黑体',
				fill : new ol.style.Fill({
					color : 'black'
				})
			})
		});
		
		var vectorLayer = new ol.layer.Vector({//地图-填充颜色字体等样式
			source : new ol.source.Vector({
				features : (new ol.format.GeoJSON()).readFeatures(res, {// 用readFeatures方法可以自定义坐标系
					dataProjection : 'EPSG:4326', // 设定JSON数据使用的坐标系
					featureProjection : 'EPSG:3857' // 设定当前地图使用的feature的坐标系
				})
			}),
			// 样式设置
			style : function(feature) {
				style.getText().setText(feature.get('cn'));// 显示名称
				style.getFill().setColor(colour);// 显示颜色
			} 
			return style;
			}
		});

#图标

//图标设置
		var iconArr = [];
		    for(var i = 0; i < map.features.length; i++){
		    	var arr = map.features[i].properties.wafotown;
		    	if (arr != null && arr.length > 0) {
		    		var lon = parseFloat(map.features[i].properties.center_x);//经度
			    	var lat = parseFloat(map.features[i].properties.center_y);//纬度
			        var rome = new ol.Feature({
			        	name:cn,
			            geometry:new ol.geom.Point(new ol.proj.fromLonLat([lon,lat],'EPSG:3857'))
			        });
			        //标注样式设置
			   		rome.setStyle(new ol.style.Style({
			   			text: new ol.style.Text({
		                    textAlign: 'center',            //位置-对齐方式
		                    textBaseline: 'middle',         //基准线
		                    font: '16px Calibri, 黑体',    	//文字样式
		                    text: cn,      					//文本内容
		                    fill: new ol.style.Fill({       //文本填充样式（即文字颜色)
		                        color: 'black'
		                    }),
		                    stroke: new ol.style.Stroke({
		                        color: 'white', 
		                        width: 1.5
		                    })
		                }),
			            image: new ol.style.Icon({
			            	anchor: [0.5, -10],             //锚点-控制标注图片和文字之间的距离([0]:x轴0.5中心;[1]y轴:0顶部)
				            anchorOrigin:'top-right',       //锚点源-标注样式的起点位置
				            anchorXUnits: 'fraction',       //锚点X值单位(单位:分数)
				            anchorYUnits: 'pixels',         //锚点Y值单位(单位:像素)
				            offsetOrigin: 'top-right',      //偏移原点-偏移起点位置的方向
				            //opacity: 0.1,					//图标透明度
				            crossOrigin: 'anonymous',
				            scale: 0.3, 					//标注图标大小         
				            src: "image/warn/"+code+".png"
			            })
			        }));
			   		iconArr.push(rome);   
				}
		    }
		}
	    var IconLayer = new ol.layer.Vector({
	        source: new ol.source.Vector({
	        	features: iconArr
	        }),
	    });

#地图加载

var map = new ol.Map({
			layers : [ vectorLayer, IconLayer ],
			target : 'wafotown_map',
			view : new ol.View({
				center : center, 	// 中心坐标x轴y轴
				extent : extent, 	// 地图范围left, bottom, right, top
				maxZoom : zoom[0], 	// 最大缩放级别
				minZoom : zoom[1], 	// 最小缩放级别
				zoom : zoom[2]		// 当前缩放级别
			})
		});

#禁止移动地图

// 禁止鼠标拖动  
		let pan = getPan();
		pan.setActive(false);//false：当前地图不可拖动。true：可拖动
		function getPan() {
			let pan;
			map.getInteractions().forEach(function(element, index, array) {
				if(element instanceof ol.interaction.DragPan) {
					pan = element;
				}
			})
			return pan;
		}