openLayers 加载点线面等基础用法

官方网址：https://openlayers.org/

                           http://121.199.5.11/openlayers/v6.6.1/apidoc/index.html

        作者只是针对于自己在项目（Vue）中所用到的基础用法进行了整理，更多用法请到官方网站进行查看使用。个人认为openLayers的功能还是特别强大的，再配合其他插件，基本能够全部满足项目开发需求。
Vue 相关引入：

• npm 安装：npm install ol （也可自行安装指定版本）
• 单页面引入：

<script>
   import "ol/ol.css"; // ol 样式
   import Map from "ol/Map"; // ol 地图
   import TileLayer from "ol/layer/Tile"; // 底图图层
   import Projection from "ol/proj/Projection";
   import View from "ol/View";
   import XYZ from "ol/source/XYZ";
   import { DoubleClickZoom } from "ol/interaction"; // 双击放大
   import VectorLayer from "ol/layer/Vector"; // 加载（点线面等）图层
   import VectorSource from "ol/source/Vector"; // 加载（点线面等）图层源
   import OlStyleIcon from "ol/style/Icon";
   import OlGeomPoint from "ol/geom/Point";
   import WebGLPointsLayer from "ol/layer/WebGLPoints";
   import LineString from "ol/geom/LineString"; // 线
   import LineString from "ol/geom/MultiLineString"; // 多线
   import Polygon from "ol/geom/Polygon"; // 面
   import MultiPolygon from 'ol/geom/MultiPolygon' // 多面
   import Feature from "ol/Feature"; // 图层
   import { Style, Stroke, Fill } from "ol/style"; // 样式、边框、填充
   import {DragBox, Select} from 'ol/interaction'; // 框选
   import {platformModifierKeyOnly} from 'ol/events/condition';
   export default {
   	data() {
   		return {
   			// ol 地图
   			myOLMap: null,
   			// 点位图层
   			pointerLayer: null,
   		}
   	}
   }
</script>

注：其他所需功能可自行引入

1、地图加载

this.myOLMap= new Map({
   target: "myOLMap",
    layers: [
        new TileLayer({
            source: new XYZ({
                url: '瓦片地址'
            }),
        }),
        new TileLayer({
            source: new XYZ({
                projection: 'EPSG:4326',
                url: '瓦片地址'
            }),
            visible: false,  // 可同时添加多个layer 图层，通过此参数控制是否显示
        }),
    ],
    logo: false,
    view: new View({
		center: [108.8423, 34.1914],
		zoom: 14,
		minZoom: 10,
		maxZoom: 22,
		projection: new Projection({
			code: "EPSG:4326",
			units: "degrees",
			axisOrientation: "enu",
		}),
	 })
});
// 禁止双击放大
const dblClickInteraction = this.myOLMap.getInteractions().getArray().find((interaction) => {
    return interaction instanceof DoubleClickZoom;
});
this.myOLMap.removeInteraction(dblClickInteraction);
注：由于openLayer地图加载后不能销毁，在未手动刷新再次进入页面时会存在多次加载地图，所以只需根据地图是
否存在来控制是否加载地图（地图click事件也可通过此方法来控制）
if(!this.myOLMap) {
	// 调用加载地图事件加载地图
}

2、设置地图属性

this.myOLMap.getView(); // 获取地图View
this.myOLMap.getView().getZoom(); // 获取图层当前视图等级
this.myOLMap.getView().setZoom(); // setZoom 设置图层当前视图等级
this.myOLMap.getView().getZoom() - 1; //（此方法在根据加载的点线面数据设置视图等级时很好用）
const extent = 图层.getSource().getExtent(); // 获取当前视图几何范围
this.myOLMap.getView().fit(extent); // 根据几何范围设定当前视图

3、加载点位（海量点位）（pointData数据源）

let features = [];
let pointerFeature = new Feature({
	type: "icon",
	// 有需要可传递参数
	// data: { },
	click: true,
	geometry: new OlGeomPoint(pointData),
	style: new Style({
		image: new OlStyleIcon({
			// 纠偏
			src: "../../../assets/image/point.png", // 点位图片
			opacity: 1,
			scale: 0.7,
		}),
	}),
});
features.push(pointerFeature);
let pointSource = new VectorSource();
pointSource.addFeature(pointerFeature );
// 加载单个点位
// 标点图层创建
this.pointerLayer = new VectorLayer({
    source: pointSource,
    style: function (feature) {
        return feature.get("style");
    },
});
this.myOLMap.addLayer(this.pointerLayer);

// 加载海量点位
let style = {
	symbol: {
	    symbolType: 'image',
	    size: 22,
	    // size: ['match', ['get', 'feauretype'], '路灯', 12,'不明井盖', 16, 20],
	    src: "../../../assets/image/point.png", // 点位图片
	}
};
let vectorSource = new VectorSource();
vectorSource.addFeatures(features);
let webGLPoint = new WebGLPointsLayer({
	source: vectorSource,
	style: style
});
this.myOLMap.addLayer(webGLPoint);

4、加载线（多线）（data数据源）

let vectorSource = new VectorSource();
let jsonData = JSON.parse(data.boundary);
if (jsonData.type === "MultiLineString") {
	// 多线
    let lineString = new MultiLineString(jsonData.coordinates);
    let feature = new Feature(lineString);
    vectorSource.addFeature(feature);
} else {
	// 单线
    let lineString = new LineString(jsonData.coordinates);
    let feature = new Feature(lineString);
    vectorSource.addFeature(feature);
}
let lineStringLayer = new VectorLayer({
    source: vectorSource,
    style: new Style({
        // 线样式
        stroke: new Stroke({
            color: '#252beb',
            width: 2,
            lineDash: [12, 4]
        }),
    }),
    zIndex: 99
});
this.myOLMap.addLayer(lineStringLayer);

5、加载面（多面）（data数据源）

let vectorSource = new VectorSource();
data.forEach(item => {
     let polygonData = JSON.parse(item.sp_grid);
     let polygon = null;
     if (polygonData.type === "Polygon") {
         polygon = new Polygon(polygonData.coordinates);
     } else if (polygonData.type === "MultiPolygon") {
         polygon = new MultiPolygon(polygonData.coordinates);
     }
     let feature = new Feature({
         type: 'polygon',
         item: item, // 传递数据，点击面展示可用
         geometry: polygon
     });
     vectorSource.addFeature(feature);
 });
 let gridLayer = new VectorLayer({
     source: vectorSource,
     style: new Style({
         fill: new Fill({
             color: 'rgba(0, 255, 0, 0.4)'
         }),
         stroke: new Stroke({
             color: '#0000FF',
             width: 1,
         }),
     }),
 });
 this.myOLMap.addLayer(gridLayer);