openlayers从入门到深入——来自一名webGIS开发工程师工作一年的经验

在一家互联网企业工作,工作接近一年,总结一下对openlayers的学习,主要是在vue项目中对openlayers的使用,希望可以对大家有所帮助~~

openlayers的安装说起把~

npm install ol

openlayers在项目中的引入

引入是按需引入,根据你所需要的来引入就好了

import 'ol/ol.css'
import Map from 'ol/Map'
import View from 'ol/View'
import { WMTS, Vector as VectorSource } from 'ol/source'
import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer'
import { Circle as CircleStyle, Fill, Stroke, Icon, Text, Style } from 'ol/style';
import WMTSTileGrid from 'ol/tilegrid/WMTS'
import Feature from 'ol/Feature'
import { XYZ,ImageWMS,TileWMS, Vector as VectorSource,WMTS } from "ol/source";
import { Tile as TileLayer, Image as ImageLayer,Vector as VectorLayer } from "ol/layer";

创建天地图

为了方便后面对地图的操作,可以将map定义成全局变量

data(){
  return{
    map:null,
    newcontent: null,
    newoverlay: null,
  }
},
mounted(){
  this.initMap()
},
methods:{
  initMap(){
    const map = new Map({
        target: 'map',
        // logo: false,
        layers: [],
        view: new View({
          // 地图视图
          projection: 'EPSG:4326', // 坐标系,有EPSG:4326和EPSG:3857
          center: [117.2531, 31.861184], // 坐标 安徽
          // minZoom: 10, // 地图缩放最小级别
          zoom: 8 // 地图缩放级别
        })
    })
    this.map = map
    const wkid = "EPSG:4326"
    //天地图底图
    this.addTiandiLayer("http://t{0-7}.tianditu.com/DataServer?T=vec_w&tk=申请的天地图 
    key&x= {x}&y={y}&l={z}",wkid)
    //天地图标注图层
    this.addTiandiLayer("'http://t{0-7}.tianditu.com/DataServer?T=cva_w&tk=申请的天地图 
    key&x= {x}&y={y}&l={z}'",wkid)
  },
   addTiandiLayer(url,wkid) {
     const source = new XYZ({
       url: url,
       projection: wkid
     });
     const tdtLayer = new TileLayer({
       source: source,
       visible: true
     });
  }
}

加载矢量数据

以点为例,point.setProperties(data[i]);很重要,不写的话点击的时候获取不到point的属性数据

addPointData(){
  var source = new VectorSource();
  var layer = new VectorLayer({
      source: this.source
  });
  this.map.addLayer(layer);
  for (let i = 0; i < data.length; i++) {
    const point = new Feature({
      geometry: new Point([data[i].longitude, data[i].latitude])
    });
    point.setStyle(new Style({
      image: new Icon({
        src: require('../../../assets/icons/点.png')
      })
    }))
    point.setProperties(data[i]);//这点很重要,不写的话点击的时候获取不到point的属性数据
    layer.getSource().addFeature(point);
  }
}

地图的几种事件

用到最多的应该就是单击事件了,目前见到的大概就是这么多了

map.on('click', this.mapClick);//地图点击
map.on('pointermove', this.mapPointerMove);//鼠标移入
map.on('singleclick', this.mapSingleClick);//地图单击
map.on('postcompose', this.animateFlights);//拖拽地图开始事件(不常用)
map.on('moveend', this.mapMoveEnd);//拖拽地图结束事件(不常用)

  地图事件详解——click单击事件的mapClick方法

当你点击地图的时候,就会触发这个方法

mapClick(evt){
  console.log(evt)//打印结果如下图
    if (this.map.hasFeatureAtPixel(evt.pixel)) {//判断是否点击的是加载的feature数据,点线面等
      //获取点击到的features,可能不止一个,根据需要取舍,在此取features[0]
      const features = this.map.getFeaturesAtPixel(evt.pixel);
      //可以对点击的feature进行一些操作,如显示点击图层的某个属性,以弹窗展示等等,或是设置点击feature高亮显示,当然这要根据具体功能来写了
    }
}

openlayers从入门到深入——来自一名webGIS开发工程师工作一年的经验

 这是打印出来的evt的结果,我们常用到的也就是上面的二个属性evt.pixel和evt.coordinate

openlayers从入门到深入——来自一名webGIS开发工程师工作一年的经验

  这是打印出来的features的结果,我们常用到的也就是上面的二个属性features[0].values_

地图事件详解——pointermove移入事件的mapPointerMove方法

移入事件和点击事件是一样的,只不过触发方式不同

mapPointerMove(evt){
  console.log(evt)//打印结果如下图
    if (this.map.hasFeatureAtPixel(evt.pixel)) {//判断是否点击的是加载的feature数据,点线面等
      //获取点击到的features,可能不止一个,根据需要取舍,在此取features[0]
      const features = this.map.getFeaturesAtPixel(evt.pixel);
      //可以对点击的feature进行一些操作,如显示点击图层的某个属性,以弹窗展示等等,或是设置点击feature高亮显示,当然这要根据具体功能来写了
    }
}

地图弹窗实现

initMap修改

initMap(){
    var container = document.getElementById('popup');
    var content = document.getElementById('popupcontent');
    var overlay = new Overlay({
      element: container,
      autoPan: true,
      autoPanAnimation: {
           duration: 250
      }
    });
    const map = new Map({
        target: 'map',
        // logo: false,
        layers: [],
        view: new View({
          // 地图视图
          projection: 'EPSG:4326', // 坐标系,有EPSG:4326和EPSG:3857
          center: [117.2531, 31.861184], // 坐标 安徽
          // minZoom: 10, // 地图缩放最小级别
          zoom: 8 // 地图缩放级别
        }),
        overlays: [overlay]
    })
    this.map = map
    this.newoverlay = overlay
    this.newcontent = content
    const wkid = "EPSG:4326"
    //天地图底图
    this.addTiandiLayer("http://t{0-7}.tianditu.com/DataServer?T=vec_w&tk=申请的天地图 
    key&x= {x}&y={y}&l={z}",wkid)
    //天地图标注图层
    this.addTiandiLayer("'http://t{0-7}.tianditu.com/DataServer?T=cva_w&tk=申请的天地图 
    key&x= {x}&y={y}&l={z}'",wkid)
  },
mapClick(evt){
    if (this.map.hasFeatureAtPixel(evt.pixel)) {
      const features = this.map.getFeaturesAtPixel(evt.pixel);
      //判断点击的是否为点数据,面改为Polygon,线改为Line
      if(features[0].getGeometry() instanceof Point){
        const cor = evt.coordinate
        const data = features[0].values_
        this.addPopup(data,cor)//展示弹窗
      }else{
        this.newoverlay.setPosition(undefined);// 否则不显示
      }
    }
}
  addPopup(data,cor){
      if(data.name){
        this.newcontent.innerHTML = '<div><span>名称:</span><span 
        class="popup_code">' +
        data.name + '</span></div';
        this.newoverlay.setPosition(cor);
      }
      
    },

temlate

<div id="mapDiv" class="device-mapDiv"></div>
// 弹窗
 <div id="popup" class="ol-popup" style="background:rgba(32, 72, 145, 1);">
    <div id="popupcontent" class="popupcontent"></div>
 </div>

弹窗样式css

.ol-popup{
    position: relative;
    left: -100px;
    top: -55px;
    border-radius: 5px;
  }
  .popupcontent{
    height: 46px;
    padding: 10px;
    font-family: 'Open Sans';
    color: #FFF;
    font-size: 19px;
  }
  .ol-popup:after, .ol-popup:before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
  }
  .ol-popup:after {
    // border-top-color: white;
    // border-width: 10px;
    left: 48px;
    margin-left: -10px;
  }
  .ol-popup:before {
    // border-top-color: #cccccc;
    // border-width: 11px;
    left: 48px;
    margin-left: -11px;
  }

点击事件就完成了,内容可以根据需要修改 

openlayers从入门到深入——来自一名webGIS开发工程师工作一年的经验

 

 如何加载矢量面的时候,将面的名称也显示出来

设置样式的时候加个text就好了

for (let i = 0; i < data.length; i++) {
  var source = new VectorSource();
  var layer = new VectorLayer({
      source: this.source
  });
  if (data[i].floor == selectfloor) {
    //wkt转feature数据
    let wkt = data[i].shape;
    let format = new WKT();
    let feature = format.readFeature(wkt);
    feature.setProperties(data[i]);
    source.addFeature(feature);
    feature.setStyle(addStyle(feature));
    function addStyle () {
      let style = new Style({
        fill: new Fill({
          color: '#0e2036'
        }),
        stroke: new Stroke({
          color: '#5b91bb',
          width: 3
         }),
         text: new Text({
           text: `${feature.getProperties().name}`,
           textAlign: 'center',
           font: 'bold 12px sans-serif',
           fill: new Fill({
             color: '#7bb5e1'
           })
         })
       });
       return style;
     }
   }
}

openlayers从入门到深入——来自一名webGIS开发工程师工作一年的经验

先更新到这了,之后遇到问题会持续更新~~

 

上一篇:javascript当中事件派发(dispatchEvent)的用法


下一篇:JavaScript操作select下拉框