openlayers+vue+wms 第一课

简介

OpenLayers（openlayers.org/）是一个用来帮助开发Web地图应用的高性能的、功能丰富的JavaScript类库，可以满足几乎所有的地图开发需求。

有如下特点：

1. 支持任何XYZ瓦片资源，同时也支持OGC的WMTS规范的瓦片服务以及ArcGIS规范的瓦片服务；
2. 支持矢量切片，包括pbf、GeoJSON、TopoJSON格式；
3. 支持矢量图层，能渲染GeoJSON、TopoJSON、KML、GML和其他格式的矢量数据；
4. 支持OGC制定的WMS、WFS等GIS网络服务规范；
5. 支持在移动设备上运行；
6. 可以通过css来为地图控件设置样式；
7. 面向对象开发方式，在OpenLayers中万物皆对象。

openlayers 核心概念：

1. 一张Map上是由很多Layer图层组成；
2. 一个Layer对应一个Source矢量数据源；
3. 一个Source由很多个Feature组成；
4. Feature 是由Geometry和Style组成。

加载geoserver服务发布的图层

导入

import "ol/ol.css";
import { Map, View, Feature } from "ol";

import { Tile as TileLayer } from "ol/layer";
import { Geometry, Polygon, Point } from "ol/geom";
import OSM from "ol/source/OSM";
import { createStringXY } from "ol/coordinate";
// 添加图层

import XYZ from "ol/source/XYZ";
import { TileWMS } from "ol/source";

import {
  getPointResolution,
  get as getProjection,
  fromLonLat,
  transform,
} from "ol/proj";

import {
  init,
  initScaleTools,
  searchAutocomplete,
  getAddressByLngLat,
} from "./utils/gaode/gaodeMap";

import {
  Zoom,
  ZoomSlider,
  MousePosition,
  ScaleLine,
  OverviewMap,
  ZoomToExtent,
  FullScreen,
} from "ol/control";

初始化地图

// 没有说明的表示你都可以复制
// 创建图层layer    在这里我使用的自己基于geoserver发布的wms服务
   var layerAreaLine = new TileLayer({
        source: new TileWMS({
          //不能设置为0，否则地图不展示。
          ratio: 1,
          url: "http://xxx/geoserver/sde/wms", // 使用你自己的的geoserver 发布的wms替换。在geoserver图层预览点击预览浏览器地址问号前面一截的地址就是这个。
          params: {
            LAYERS: "dty:DLDT_QX_110", // 对应的是geoserver 图层浏览 你自己定义的名称列
            STYLES: "",
            VERSION: "1.1.1",
            TILED: true,
          },
          zIndex: 2,
          serverType: "geoserver",
          visible: true,
        }),
      });
      
      
     // 初始化地图Map
      
       this.map = new Map({
        target: this.$refs.opMapContainer, // map 挂载点
        layers: [
          layer,
          layerAreaLine,
        ],
        view: new View({
          // 视图
          projection: "EPSG:4326",
          center: [118.14697, 36.12854],
          zoom: 8,
        }),
        controls: [ //地图 控件
          new ZoomToExtent({
            extend: [117.334, 35.983, 117.33, 35.941],
          }), //导航控件
          new Zoom(), // 缩放按钮
          new ZoomSlider(), // 缩放滑块
          new ScaleLine({ units: "us" }), // 比例尺
          new FullScreen(), // 全屏控件
          new OverviewMap({
            // 鹰眼
            layers: [
              // 鹰眼的图层，这里使用OSM地图
              new TileLayer({
                name: "osm",
                source: new OSM(),
                visible: true,
              }),
            ],
          }),
          new MousePosition({
            // 鼠标坐标点控件
            target: "mapPoint", // 存放坐标的html元素 你想把坐标显示的地方
            coordinateFormat: createStringXY(3), // 坐标格式
            placeholder: "", // 当鼠标离开地图，无坐标信息时显示的内容
          }),
        ],
      });

矢量图形绘制

1 通过样式信息和几何信息构建点要素

//  设置几何信息 大点
      var feature = new Feature({
        geometry: new Point([118.38, 36.851]),
        name: "My Polygon",
      });

      //  通过image 属性设置点要素-----------------

      // 点的天填充
      const fill = new Fill({
        color: "#ff2d51",
      });
      // 点的边框
      const stroke = new Stroke({
        color: "#333",
        width: 2,
      });
      // 点的样式
      const styles = [
        new Style({
          image: new Circle({
            fill: fill, // 点填充颜色
            stroke: stroke, // 给点描边
            radius: 10, // 设置点的半径
          }),
        }),
      ];

      // 给几何信息点设置样式
      feature.setStyle(styles);

2 将要素添加到矢量数据源

 let source = new Vector({ features: [feature] });

3 将矢量数据添加到矢量图层

 let layerVector = new VectorLayer({ source });

4 添加矢量图层到地图容器

 this.map.addLayer(layerVector);