openlayers入门学习

这里写目录标题

    • 参考文档
    • npm安装
    • OSM地图服务
        • 组件使用
        • 效果图
    • XYZ瓦片图服务(天地图)
        • 注意
        • 参考文档
        • 组件使用
    • XYZ瓦片图服务(百度地图)(不推荐)
        • 参考文档
    • GeoServe服务以及绘制标注点
        • 组件使用
        • 效果图
    • 静态图片底图
        • 参考文档
        • 组件使用
        • 效果图

参考文档

Openlayers官网
EPSG:3857和EPSG:4326区别详解—重点文档
通常:数据存储在EPSG:4326中,显示在EPSG:3857中,所以一定要注意坐标系切换问题。

npm安装

cnpm i -S ol

OSM地图服务

参考文档01
参考文档02

组件使用

<template>
  <div class="home">
    <div id="map"></div>
  </div>
</template>

<script>

import "ol/ol.css";
import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";
export default {
  data () {
    return {
      map: null
    };
  },
  mounted () {
    this.map = new Map({
      target: "map",
      layers: [
        new TileLayer({
          source: new OSM()
        })
      ],
      view: new View({
        projection: "EPSG:4326",  //坐标系,即地球坐标系——WGS84:常见于 GPS 设备,Google 地图等国际标准的坐标体系。
        center: [116.3972282409668, 39.90960456049752],  //中心点坐标,即北京天安门
        zoom: 12
      })
    });
  }
};
</script>

<style lang="less" scoped>
#map {
  height: 600px;
}
/*隐藏ol的一些自带元素*/
// 隐藏zoom组件
/deep/.ol-zoom {
  display: none;
}
// 隐藏右下角版权信息
/deep/.ol-attribution.ol-uncollapsible {
  display: none;
}
</style>

效果图

XYZ瓦片图服务(天地图)

注意

1、使用天地图、谷歌地图、高德地图、百度地图等,要注意其坐标系与openlayers中的projection下的EPSG对应。如使用天地图、谷歌地图可直接使用EPSG:4326,而对于高德地图、百度地图则需要特殊处理。(下文有百度地图推荐学习文档,但是我本人不推荐使用高德地图、百度地图,主要就是坐标系问题)

2、openlayers中的XYZ下的url,即地图服务的请求地址,可通过f12查看相应地图服务的请求地址。

参考文档

注意:天地图共有 8 个服务地址,子域名分别从 t0 到 t7,不同图层放入不同服务中。
参考文档1
参考文档2
参考文档3

组件使用

<template>
  <div>
    <h2>天地图地图服务</h2>
    <div id="map"></div>
  </div>
</template>

<script>

import "ol/ol.css";
import { Map, View } from "ol";
import TileLayer from "ol/layer/Tile";
import XYZ from "ol/source/XYZ";

export default {
  data () {
    return {
      map: null
    };
  },
  mounted () {
    this.map = new Map({
      target: "map",
      layers: [
        // 天地图路网
        new TileLayer({
          source: new XYZ({
            url: 'http://t4.tianditu.com/DataServer?T=vec_w&X={x}&Y={y}&L={z}&tk=e33bff145f017205e949052045b56087'
          })
        }),
        // 加载注记图层
        new TileLayer({
          source: new XYZ({
            url: 'http://t3.tianditu.com/DataServer?T=cva_w&X={x}&Y={y}&L={z}&tk=e33bff145f017205e949052045b56087'
          })
        }),
        // 加载卫星影像
        // new TileLayer({
        //   source: new XYZ({
        //     url: 'http://t3.tianditu.com/DataServer?T=img_w&X={x}&Y={y}&L={z}&tk=e33bff145f017205e949052045b56087'
        //   })
        // }),
      ],
      view: new View({
        projection: "EPSG:4326",  //坐标系,即地球坐标系——WGS84:常见于 GPS 设备,Google 地图等国际标准的坐标体系。
        center: [116.3972282409668, 39.90960456049752],  //中心点坐标,即北京天安门
        zoom: 12
      })
    });
  }
};
</script>

<style lang="less" scoped>
#map {
  height: 600px;
}
/*隐藏ol的一些自带元素*/
// 隐藏zoom组件
/deep/.ol-zoom {
  display: none;
}
// 隐藏右下角版权信息
/deep/.ol-attribution.ol-uncollapsible {
  display: none;
}
</style>

XYZ瓦片图服务(百度地图)(不推荐)

参考文档

参考文档01
参考文档02
参考文档03
参考文档04
参考文档05

GeoServe服务以及绘制标注点

组件使用

<template>
  <div id="container">
    <div id="map"
         style="width: 100%; height: 100%"></div>
  </div>
</template>

<script>
import 'ol/ol.css'
import { Map, View, Feature } from 'ol'
import Projection from 'ol/proj/Projection'
import { Vector as SourceVec, ImageWMS } from 'ol/source'
import { Point } from 'ol/geom'
import { Style, Icon, Text, Fill } from 'ol/style'
import { Vector as LayerVec, Image } from 'ol/layer'
export default {
  data: function () {
    return {
      map: {},
      loading: false,
      testData: [
        {
          id: "6752845443727622144",
          name: "80103、9201及9202",
          riskLevel: "1",
          x: "-5302.402919149073",
          y: "3541.8358675377112",
        },
        {
          id: "6748440227615866880",
          name: "80103综采工作面",
          riskLevel: "2",
          x: "-5171.282981056542",
          y: "3756.727781547658",
        },
        {
          id: "6748440575126536192",
          name: "9202综采工作面",
          riskLevel: "3",
          x: "-5257.1690025799835",
          y: "3363.13658939467",
        },
        {
          id: "6748513045875523584",
          name: "9202工作面安装",
          riskLevel: "3",
          x: "-5304.907056761922",
          y: "3246.4338306089517",
        }
      ],
    };
  },
  created () { },
  mounted () {
    this.initMap()
  },
  methods: {
    initMap () {
      let that = this
      let mapUrl = "http://111.229.215.211:8080/geoserver/sxmap/wms"
      let mapName = "sxmap:hfshape"
      let myCode = "EPSG:404000"
      let myUnits = 'degrees'
      //wms的边界范围
      let extent = [-5783.940779486906, 2420.684125662136, -3999.448596040022, 5088.623484956386]
      //wms作底图
      let wmsLayer = [
        new Image({
          source: new ImageWMS({
            ratio: 1,
            url: mapUrl,
            params: {
              'FORMAT': 'image/png',
              'VERSION': '1.1.1',
              "STYLES": '',
              "LAYERS": mapName,
              "exceptions": 'application/vnd.ogc.se_inimage',
            }
          })
        })
      ];
      // 坐标系
      let projection = new Projection({
        code: myCode,
        units: myUnits,
        global: false
      })
      //定义地图对象
      that.map = new Map({
        layers: wmsLayer,
        target: 'map',
        view: new View({
          projection,
          zoom: 4,
          maxZoom: 20,
        }),
      });
      // 根据范围让地图元素居中显示  重点
      that.map.getView().fit(extent, that.map.getSize());
      // 获取风险点
      this.loadData();
    },
    loadData () {
      this.addAllLayerToMap(this.testData)
    },
    // 风险点标注
    addAllLayerToMap (dataList) {
      let that = this
      let features = []
      // 矢量元素定义  点类型   设置myData用于绑定数据
      features = dataList.map(data => {
        const { x, y } = data;
        return new Feature({
          geometry: new Point([x, y], "XY"),
          myData: data
        })
      })
      // 矢量元素样式设置  图标、文本
      features.forEach(feature => {
        feature.setStyle(() => {
          return new Style({
            image: new Icon({
              opacity: 0.75,
              src: require(`@/assets/home/map/${feature.values_.myData.riskLevel}.png`)
            }),
            text: new Text({
              text: `${feature.values_.myData.name}`,
              fill: new Fill({
                color: "#fff",
              }),
              offsetY: 26,
            }),
          })
        })
      })
      //创建矢量容器
      let vectorSource = new SourceVec({
        features: features,
      });
      //创建矢量层
      let vectorLayer = new LayerVec({
        source: vectorSource,
      });
      that.map.addLayer(vectorLayer);

      // 监听singleclick事件,通过点击事件,获取对应点的feature图标
      that.map.on('singleclick', function (e) {
        console.log(e.coordinate)
        if (that.map.hasFeatureAtPixel(e.pixel)) {
          let feature = that.map.getFeaturesAtPixel(e.pixel)
          that.toRisksPage(feature[0].values_.myData)
        }
      })
    },
    toRisksPage (data) {
      this.$router.push({
        path: "/risks",
        query: {
          riskPointId: data.id,
          riskPointName: data.name,
        },
      });
    },
  },
};
</script>

<style lang="less" scoped>
#container {
  height: 800px;
}
</style>

效果图

openlayers入门学习_第1张图片

静态图片底图

参考文档

参考文档01
参考文档02
参考文档03
参考文档04

组件使用

默认图片左下角为原点

<template>
  <div id="map"></div>
</template>

<script>
import "ol/ol.css";
import { Map, View } from "ol";
import { Image as ImageLayer } from "ol/layer";
import { ImageStatic } from "ol/source";
import { getCenter } from "ol/extent";
import { Projection } from "ol/proj";

import staticMap from "@/assets/map.png";


export default {
  data () {
    return {
      map: null, // 地图
      imgx: 0, // 当前地图宽
      imgy: 0, // 当前地图高
    };
  },
  mounted () {
    let img = new Image();
    img.src = staticMap;
    let that = this;
    img.onload = function (res) {
      that.imgx = res.target.width;
      that.imgy = res.target.height;
      that.initMap();
    };
  },
  methods: {
    // 初始化地图
    initMap () {
      let extent = [0, 0, this.imgx, this.imgy];  // 获取图片的宽高
      let projection = new Projection({
        code: "xkcd-image",
        units: "pixels",
        extent: extent
      });
      this.map = new Map({
        target: "map",
        layers: [
          new ImageLayer({
            source: new ImageStatic({
              url: staticMap,  // 静态地图
              projection: projection,
              imageExtent: extent  // 映射到地图的范围
            })
          })
        ],
        view: new View({
          projection: projection,
          center: getCenter(extent),
          zoom: 2,
          maxZoom: 18,
          minZoom: 2,
        })
      });
      // 监听地图点击事件  获取点击的坐标
      this.map.on('singleclick', mapClick);
      function mapClick (e) {
        console.log(e.coordinate)
      }
    },
  },
};
</script>

<style>
#map {
  height: calc(100vh - 50px);
}
</style>

效果图

openlayers入门学习_第2张图片

你可能感兴趣的:(地图,学习,前端,javascript)