openlayers5部分使用细节

近期使用openlayers5开发wmts自切地图的加载和切换，自定义样式，要素信息读取

1. 加载wmts自定义地图

//加载地图(wmts服务)
function initMap() {
	//1.设置空间参考坐标系  使用哪个坐标系取决于加载的地图服务  坐标系与地图服务不同，
	//会导致无法加载地图的情况
	var projection = ol.proj.get('EPSG:4326'); //经纬度空间参考坐标系
	//	var projection = ol.proj.get('EPSG:3857');//墨卡托投影空间参考坐标系
	//2.设置地图缩放层级分辨率
	var projectionExtent = projection.getExtent();
	var size = ol.extent.getWidth(projectionExtent) / 256;
	var resolutions = [];
	var matrixIds = [];
	for(var z = 1; z < 19; ++z) {
		resolutions[z] = size / Math.pow(2, z);
		matrixIds[z] = z;
	}
	//创建tile layer
	/*****山东省******/
	var url = "http://www.sdmap.gov.cn/tileservice/SDRasterPubMap";
	var raster = new ol.source.WMTS({
			url: url,
			projection: projection,
			style: 'default',
			format: 'image/png',
			matrixSet: "EPSG:4326",
			layer: "chinaVec",
			tileGrid: new ol.tilegrid.WMTS({
				origin: ol.extent.getTopLeft(projectionExtent),
				resolutions: resolutions,
				matrixIds: matrixIds
			}),
			wrapX: true
		});
	vectorSource = new ol.source.Vector({
		wrapX: false
	});

	vectorLayer = new ol.layer.Vector({
		source: vectorSource
	});	
	var layers = [new ol.layer.Tile({
		source: raster
	}),vectorLayer];
	//设置view
	var view = new ol.View({
		projection: projection, //坐标系如果不设置，默认为墨卡托
//		resolutions:resolutions,//分辨率层级数组
		center: [120.151527, 35.99825595], //必须参数，否则地图无法加载
		zoom: 10
	});
	//加载地图
	map = new ol.Map({
		layers: layers,
		target: 'map', //地图ID
		controls: ol.control.defaults({
			attributionOptions: {
				collapsible: false
			}
		}).extend([
			new ol.control.ScaleLine({
				className: 'custom-scale-line'
			}) //比例尺
		]), //缩放组件
		view: view
	});
}

2. 自定义图标
   地图展示不同的数据,采用不同的图例需要自定义图标样式;
   圆点

var pointStyle = new ol.style.Style({
            image: new ol.style.Circle({radius: 4,
                fill: new ol.style.Fill({
                    color: '#1afa29'
                })})});

同样也可以使用图片展示方形以及三角形等任意形状的样式

//方块
        var plotsStyle = new ol.style.Style({
            image:new ol.style.Icon({
                color: '#1afa29',
                crossOrigin: 'anonymous',
                src: '/static/assets/images/map/square.png'
            })
        });
        //三角形
        var triangleStyle = new ol.style.Style({
            image:new ol.style.Icon({
                color: '#1afa29',
                crossOrigin: 'anonymous',
                src: '/static/assets/images/map/triangle.png'
            })
        });

3. 绘制要素图形到地图
   将通过查询获取的地点或区域信息赋于地图上展示

function addPoint(data,type) {
    for (var i = 0; i < data.length; i++) {
        var feature = new ol.Feature({
        //此处是地点信息
            geometry: new ol.geom.Point([data[i].longitude, data[i].latitude])
        });
        feature.flatCoordinates_ = [data[i].longitude, data[i].latitude];
        //属性信息，可以点选读取要素信息
        feature.setProperties(data[i]);
        layer.getSource().addFeature(feature);
    }
}

4. 点选读取要素属性元素

   /**
    * 点选事件
    */
   this.pointEvent = function () {
       var $this = this;
       //点选select
       this.markerClickEventsKey.setActive(true);
       this.markerClickEventsKey.on('select',function (evt) {
           var features = evt.target.getFeatures().getArray();
           if(features.length>0){
           //获取点选要素属性
               var propertis = features[0].getProperties();
               var html='<div class="popup"><label>企业名称：'+propertis.name+'</label><label>行政编码：'+(propertis.disCode==undefined ? "" : propertis.disCode)+'</label>' +
                   '<label>备注：'+propertis.remark+'</label><label>地址：'+propertis.sheng+propertis.shi+propertis.xian+propertis.xiang+propertis.cun+'</label>'+
                   '<label>类别：'+propertis.dalei+'（'+propertis.biemin+'）</label><label>数据来源：'+propertis.laiyuan+'</label>' +
                   '是否在产：'+propertis.production+'</label><label>创建时间：'+(propertis.buildtime == "NULL" ? "" : propertis.buildtime) +'</label>'+
                   '<label>是否符合筛选原则：'+propertis.is_guimo+'</label><label>规模：'+propertis.guimo+'</label></div>';
               document.getElementById('popup-content').innerHTML = html;
   
             //popup要素赋值
               $this.overlay.setPosition(features[0].flatCoordinates_);
               // $this.basemap.getView().updateAnimations_();
                 //将点选要素至于view中心$this.basemap.getView().animate({center:features[0].flatCoordinates_});
           }
       });
   };
   

点选要素读取如下：

转载自：https://blog.csdn.net/zjr201213136039/article/details/84721464