ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

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

2021-11-19 17:30:12  阅读:271  来源: 互联网

标签:map ol 入门 data webGIS 地图 openlayers new evt


在一家互联网企业工作,工作接近一年,总结一下对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高亮显示,当然这要根据具体功能来写了
    }
}

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

  这是打印出来的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;
  }

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

 

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

设置样式的时候加个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;
     }
   }
}

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

 

标签:map,ol,入门,data,webGIS,地图,openlayers,new,evt
来源: https://blog.csdn.net/qq_43274430/article/details/121424014

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有