openlayers 实例教程分享

OpenLayers3示例   

记录一个openlayers 实例教程网址

1、WebGIS简介 · 语雀

记录一个openlayers入门教程

地图坐标系转换 - Online Tools 

记录一个国家2000坐标转换工具的方法

记录一次我使用openlayers 开发地图的实例，实现了打点，弹窗，聚合

<script>
import 'ol/ol.css'
import TileLayer from 'ol/layer/Tile'
import VectorLayer from 'ol/layer/Vector'
import VectorSource from 'ol/source/Vector'
import XYZ from 'ol/source/XYZ'
import { Map, View, Feature, Overlay } from 'ol'
import { Style, Fill, Stroke, Icon, Text } from 'ol/style'
import { Point } from 'ol/geom'
import { defaults as defaultControls, ZoomSlider } from 'ol/control'
import { fromLonLat, toLonLat } from 'ol/proj'
import doumen from '@/assets/mapdata/doumen.json'
import liuchuan from '@/assets/mapdata/zong_pipe.json'
import allMap from '@/assets/mapdata/allMap.json'
import douqu from '@/assets/mapdata/zong_canal.json'
import branch_pipe from '@/assets/mapdata/branch_pipe.json'
import main_pipe from '@/assets/mapdata/main_pipe.json'
import shank_pipe from '@/assets/mapdata/shank_pipe.json'
import side_pipe from '@/assets/mapdata/side_pipe.json'
import zhiqu from '@/assets/mapdata/shushuiquxi_zhiqu.json'
import douguan from '@/assets/mapdata/douguan.json'
import zhiguan from '@/assets/mapdata/guandao_zhiguan.json';
import ganguan from '@/assets/mapdata/guandao_ganguan.json';
import shushuidouqu from '@/assets/mapdata/shushuiquxi_douqu.json'
 
import { benzhanList, szyInfo, modbusInfo } from '@/api/first/benzhan'
import GeoJSON from 'ol/format/GeoJSON'
import Cluster from 'ol/source/Cluster.js'
// 边界json数据
export default {
  data() {
    return {
      map: null,
      zmName: '',
      ssLiuLiang: '',
      leiJi: '',
      zhaMen: '',
      pointLayer: null,
      pointLayer1: null,
      featuresArr: [],
      featuresArr1: [],
      shopPopup: false,
      popup: null,
      atzoom: '', // 当前缩放比例
      clusterSource: null // 聚合要素
    }
  },
  methods: {
    /**
     * 初始化地图
     */
    initMap() {
      this.map = new Map({
        target: 'Map',
        controls: defaultControls({
          zoom: true
          // 添加鹰眼图的控件
        }).extend([]),
        layers: [
          new TileLayer({
            source: new XYZ({
              url:
                'http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
            })
          })
        ],
        view: new View({
          center: fromLonLat([104.4143, 36.6604]),
          zoom: 13,
          maxZoom: 19,
          minZoom: 4
        })
      })
      this.map.addControl(new ZoomSlider())
 
      this.map.on("singleclick", evt => {
        var position = evt.coordinate;
        console.log(position);
        this.clickMap(evt);
      })
    },
    /**
     * 白银市地理数据
     */
    setBackColor() {
      const features = (new GeoJSON({ featureProjection: 'EPSG:3857' })).readFeatures(allMap)
      const vectorSource = new VectorSource({ features: features })
      // 白银市地理数据
      const lineLayer = new VectorLayer({
        zIndex: 0,
        source: vectorSource
      })
      lineLayer.setStyle(
        new Style({
          fill: new Fill({ color: 'rgba(38,60,217,0.5)' }),
          stroke: new Stroke({
            width: 1,
            color: [71, 137, 227, 1]
          })
        })
      )
      this.map.addLayer(lineLayer)
    },
    /**
     * 加载刘川灌区
     */
    // 加载刘川地理数据
    addGeoJson() {
      const features = (new GeoJSON({ featureProjection: 'EPSG:3857' })).readFeatures(liuchuan)
      const vectorSource = new VectorSource({ features: features })
      // 设置矢量数据源
      const lineLayer = new VectorLayer({
        zIndex: 1,
        source: vectorSource
      })
      const style = new Style({
        stroke: new Stroke({
          width: 2,
          color: '#fff'
        }),
        fill: new Fill({
          color: '#B9D9EB44'
        })
      })
      lineLayer.setStyle(style)
      this.map.addLayer(lineLayer) // 把图层添加到地图
    },
    /**
     * 加载刘川斗渠数据
     */
    addGeoJsonone() {
      const features = (new GeoJSON({ featureProjection: 'EPSG:3857' })).readFeatures(douqu)
      // 设置矢量数据源
      const vectorSource = new VectorSource({ features: features })
      const lineLayer = new VectorLayer({
        zIndex: 1,
        source: vectorSource
      })
      this.map.addLayer(lineLayer) // 把图层添加到地图
 
      // 循环添加feature
      const source = lineLayer.getSource().getFeatures()
      for (let i = 0; i < source.length; i++) {
        source[i].setStyle(this.setText(source[i].values_.NAME))
      }
    },
    /**
     * 加载支渠
     */
    addZhiqu() {
      const features = (new GeoJSON({ featureProjection: 'EPSG:3857' })).readFeatures(zhiqu)
      // 设置矢量数据源
      const vectorSource = new VectorSource({ features: features })
      const lineLayer = new VectorLayer({
        zIndex: 1,
        source: vectorSource
      })
 
      this.map.addLayer(lineLayer) // 把图层添加到地图
      // 循环添加feature
      const source = lineLayer.getSource().getFeatures()
      for (let i = 0; i < source.length; i++) {
        source[i].setStyle(this.setText(source[i].values_.NAME))
      }
    },
 
    /**
     * 加载斗管
     */
    addDouguan() {
      const features = (new GeoJSON({ featureProjection: 'EPSG:3857' })).readFeatures(douguan)
      // 设置矢量数据源
      const vectorSource = new VectorSource({ features: features })
      const lineLayer = new VectorLayer({
        zIndex: 1,
        source: vectorSource
      })
      this.map.addLayer(lineLayer) // 把图层添加到地图
      // 循环添加feature
      const source = lineLayer.getSource().getFeatures()
      for (let i = 0; i < source.length; i++) {
        source[i].setStyle(this.setText(source[i].values_.NAME))
      }
    },
    /**
     * 加载只管
     */
    addZhiguan() {
      const features = (new GeoJSON({ featureProjection: 'EPSG:3857' })).readFeatures(zhiguan)
      // 设置矢量数据源
      const vectorSource = new VectorSource({ features: features })
      const lineLayer = new VectorLayer({
        zIndex: 1,
        source: vectorSource
      })
      this.map.addLayer(lineLayer) // 把图层添加到地图
      // 循环添加feature
      const source = lineLayer.getSource().getFeatures()
      for (let i = 0; i < source.length; i++) {
        source[i].setStyle(this.setText(source[i].values_.NAME))
      }
    },
    /**
     * 加载干管
     */
    addGanGuan() {
      const features = (new GeoJSON({ featureProjection: 'EPSG:3857' })).readFeatures(ganguan)
      // 设置矢量数据源
      const vectorSource = new VectorSource({ features: features })
      const lineLayer = new VectorLayer({
        zIndex: 1,
        source: vectorSource
      })
      this.map.addLayer(lineLayer) // 把图层添加到地图
      // 循环添加feature
      const source = lineLayer.getSource().getFeatures()
      for (let i = 0; i < source.length; i++) {
        source[i].setStyle(this.setText(source[i].values_.NAME))
      }
    },
    //  加载输水斗渠
    addShushuiDouqu() {
      const features = (new GeoJSON({ featureProjection: 'EPSG:3857' })).readFeatures(shushuidouqu)
      // 设置矢量数据源
      const vectorSource = new VectorSource({ features: features })
      const lineLayer = new VectorLayer({
        zIndex: 1,
        source: vectorSource
      })
      this.map.addLayer(lineLayer) // 把图层添加到地图
      // 循环添加feature
      const source = lineLayer.getSource().getFeatures()
      for (let i = 0; i < source.length; i++) {
        source[i].setStyle(this.setText(source[i].values_.NAME))
      }
    },
 
    //
    addGeoone() {
      const features = (new GeoJSON({ featureProjection: 'EPSG:3857' })).readFeatures(branch_pipe)
      // 设置矢量数据源
      const vectorSource = new VectorSource({ features: features })
      const lineLayer = new VectorLayer({
        zIndex: 1,
        source: vectorSource
      })
      this.map.addLayer(lineLayer) // 把图层添加到地图
 
      // 循环添加feature
      const source = lineLayer.getSource().getFeatures()
      for (let i = 0; i < source.length; i++) {
        source[i].setStyle(this.setText(source[i].values_.NAME))
      }
    },
    main_pipe() {
      const features = (new GeoJSON({ featureProjection: 'EPSG:3857' })).readFeatures(main_pipe)
      // 设置矢量数据源
      const vectorSource = new VectorSource({ features: features })
      const lineLayer = new VectorLayer({
        zIndex: 1,
        source: vectorSource
      })
      this.map.addLayer(lineLayer) // 把图层添加到地图
 
      // 循环添加feature
      const source = lineLayer.getSource().getFeatures()
      for (let i = 0; i < source.length; i++) {
        source[i].setStyle(this.setText(source[i].values_.NAME))
      }
    },
    side_pipe() {
      const features = (new GeoJSON({ featureProjection: 'EPSG:3857' })).readFeatures(side_pipe)
      // 设置矢量数据源
      const vectorSource = new VectorSource({ features: features })
      const lineLayer = new VectorLayer({
        zIndex: 1,
        source: vectorSource
      })
      this.map.addLayer(lineLayer) // 把图层添加到地图
 
      // 循环添加feature
      const source = lineLayer.getSource().getFeatures()
      for (let i = 0; i < source.length; i++) {
        source[i].setStyle(this.setText(source[i].values_.NAME))
      }
    },
    shank_pipe() {
      const features = (new GeoJSON({ featureProjection: 'EPSG:3857' })).readFeatures(shank_pipe)
      // 设置矢量数据源
      const vectorSource = new VectorSource({ features: features })
      const lineLayer = new VectorLayer({
        zIndex: 1,
        source: vectorSource
      })
      this.map.addLayer(lineLayer) // 把图层添加到地图
 
      // 循环添加feature
      const source = lineLayer.getSource().getFeatures()
      for (let i = 0; i < source.length; i++) {
        source[i].setStyle(this.setText(source[i].values_.NAME))
      }
    },
    // 文字标注的样式
    setText(name) {
      const style = new Style({
        stroke: new Stroke({
          width: 3,
          color: '#FFEBEE'
        }),
        text: new Text({
          font: '20px',
          // 对其方式
          textAlign: 'center',
          // 基准线
          textBaseline: 'middle',
          offsetY: -35,
          offsetX: 0,
          // backgroundFill: new Stroke({
          //   color: 'rgba(0,123,255,0.8)'
          // }),
          // 文本填充样式
          fill: new Fill({
            color: 'rgba(236,218,20,1)'
          }),
          padding: [5, 5, 5, 5],
          text: `${name}`
        })
      })
      return style
    },
    /**
     * 批量根据经纬度坐标打点 斗门
     */
    addPoints(coordinates) {
      console.log('打点坐标调试', coordinates);
      // 创建一个 VectorSource 对象
      const source = new VectorSource()
      // 创建一个 Cluster 对象
      const clusters = new Cluster({
        distance: 60,
        source: source
      })
      // 循环添加 feature
      for (let i = 0; i < coordinates.length; i++) {
        // 创建 feature，一个 feature 就是一个点坐标信息
        const feature = new Feature({
          geometry: new Point(fromLonLat([coordinates[i].x, coordinates[i].y])),
        })
 
        feature.set("moreInfo", coordinates[i].moreInfo)
 
        // 设置图层
        this.pointLayer = new VectorLayer({
          source: clusters, // 使用之前创建的 VectorSource 对象作为图层的源
          zIndex: 1,
          style: this.getIcon(coordinates[i].id, coordinates[i].name)
        })
        //console.log('本站名', coordinates[i].name);
        // 将 feature 添加到 source 中
        source.addFeature(feature)
      }
      this.map.addLayer(this.pointLayer)
 
    },
 
    /**
     * 添加图标和文字
     */
    getIcon(type, name) {
      let src = ''
      type > 95
        ? (src = require('../../assets/zhamen_run.png'))
        : (src = require('../../assets/zhamen_stop.png'))
      const styleIcon = new Style({
        // 设置图片效果
        image: new Icon({
          // scale: 0.15 * (this.atzoom - 8),
          width: 25,
          src: src,
          anchor: [1, 1]
        }),
        text: new Text({
          // 对其方式
          textAlign: 'center',
          // 基准线
          textBaseline: 'middle',
          offsetY: -35,
          offsetX: 0,
          backgroundFill: new Stroke({
            color: 'rgba(0,0,255,0.4)'
          }),
          // 文本填充样式
          fill: new Fill({
            color: 'rgba(236,218,20,1)'
          }),
          padding: [5, 5, 5, 5],
        })
      })
      return styleIcon
    },
    /**
     * 弹窗
     */
    addOverlay() {
      // 创建Overlay, 覆盖层
      const elPopup = this.$refs.popup
      this.popup = new Overlay({
        element: elPopup,
        autoPan: true,
        positioning: 'bottom-center',
        stopEvent: false,
        offset: [-10, -25],
        autoPanAnimation: {
          duration: 250
        }
      })
      this.map.addOverlay(this.popup)
    },
    clickMap(e) {
      console.log('坐标信息', e);
      var pixel = this.map.getEventPixel(e.originalEvent)
      const feature = this.map.forEachFeatureAtPixel(
        pixel,
        (feature) => feature
      )
      console.log('ffffff', feature);
 
      //feature && feature.values_.moreInfo && this.map.hasFeatureAtPixel(e.pixel)
      if (feature && feature.values_.features && feature.values_.features.length > 0) {
        this.shopPopup = true
        // 设置弹窗位置
        const coordinates = feature.getGeometry().getCoordinates()
        console.log('弹窗位置', coordinates);
        this.popup.setPosition(coordinates)
        // 从geoJson中获取信息
        const valuesObj = feature.values_.features[0].values_.moreInfo
        console.log(valuesObj);
        if (valuesObj) {
          // 查询本站实时数据
          //const { NAME, ANGLE, REMAKE, OBJECTID } = valuesObj
          this.zmName = valuesObj.position
          if (valuesObj.protocolType == "1") {
            modbusInfo(valuesObj.addr).then(res => {
              console.log('modbus', res);
              this.ssLiuLiang = res.data.instantaneousFlow
              this.leiJi = res.data.cumulativeFlow
              this.zhaMen = res.data.aperture
            })
          }
 
          if (valuesObj.protocolType == "2") {
            szyInfo(valuesObj.addr).then(res => {
              console.log('szy', res)
 
              this.ssLiuLiang = "ANGLE"
              this.leiJi = "REMAKE"
              this.OBJECTID = "OBJECTID"
            })
          }
 
        }
 
      } else {
        this.shopPopup = false
      }
    },
    /**
     * 鼠标移动的事件
     */
    pointermove() {
      this.map.on('pointermove', (e) => {
        if (this.map.hasFeatureAtPixel(e.pixel)) {
          this.map.getViewport().style.cursor = 'pointer'
        } else {
          this.map.getViewport().style.cursor = 'inherit'
        }
      })
    },
    getBenzhan() {
      benzhanList().then(res => {
        console.log('泵站查到了', res);
        const bzList = res.data
 
        const arr = []
        bzList.forEach(item => {
          arr.push({
            y: item.dimensionality,
            x: item.longitude,
            name: item.position,
            id: item.id,
            moreInfo: item
          })
        })
        this.addPoints(arr)
      })
    },
    close() {
      this.popup.setPosition(undefined)
      return false;
    }
  },
  mounted() {
    this.initMap()// 初始化地图方法
    this.setBackColor()
    this.addGeoJson()
    this.addGeoJsonone()
    this.addOverlay() // 弹框
    this.pointermove()
    this.addGeoone()
    this.main_pipe()
    this.shank_pipe()
    this.addZhiqu()
    this.addZhiguan()
    this.addDouguan()
    this.addGanGuan()
    this.addShushuiDouqu()
 
    this.getBenzhan()
 
    this.map.on('moveend', (e) => {
      const zoom = this.map.getView().getZoom()
      this.atzoom = zoom
      console.log(zoom)
    })
    // setInterval(() => {
    //   this.addPoints(arr)// 根据坐标点批量打点
    // }, 1000)
  }
}
script>
<style lang="scss" scoped>
#Map {
  width: 100%;
  height: 100vh;
}
 
.popupbox {
  width: 270px;
  height: 210px;
  background: url(../../assets/bg@2x.png) no-repeat;
  background-size: contain;
  display: flex;
  flex-direction: column;
  text-align: center;
  position: relative;
 
  .close {
    position: absolute;
    right: 10px;
    top: 10px;
  }
 
  .title {
    margin-top: 9px;
  }
 
  .info {
    font-size: 16px;
    text-align: left;
    margin-left: 25px;
 
    ul {
      margin: 0;
      padding: 0;
      list-style: none;
    }
 
    span.spc {
      color: white;
    }
  }
}
style>