Openlayers---创建地图

写在前面

公司基于以前项目做升级,以前我是用openlayer3写的,现在openlayers都升级到5了,不由得感叹学不动了.话虽说但是还的学,不学谁养我呀?评论举个手,我就跟你走.,哈哈哈闲话不多说,基于我们公司升级的项目的地图部分给大家做一下讲解.

安装

我们公司项目是基于vue进行编写的,前端插件包也是用npm管理的所以

npm install ol
复制代码

直接上代码

<template>
  <div id="maplay"></div>
</template>
<script>
import "ol/ol.css";//地图的css样式
import { Map, View } from "ol"; //引入需要的Map和View模块
import TileLayer from "ol/layer/Tile"; //引入图层模块
import OSM from "ol/source/OSM"; //引入地图数据源模块
export default {
  data() {
    return {
      map: null
    };
  },
  methods: {
    init() {
      this.map = new Map({
        target: "maplay", //要把地图渲染的dom节点中的额id
        layers: [
          //图层可以是多个所以是个数组
          new TileLayer({
            //创建图层
            source: new OSM() //记载数据源
          })
        ],
        view: new View({
          //创建一个地图的窗口{地图的移动,放大,缩小,旋转等等都可以在这实现}
          projection: "EPSG:4326", //wgs84坐标系,(地图的一种坐标系)
          center: [114.064839, 22.548857], //定位到坐标点
          zoom: 12 //定位12图层
        })
      });
    }
  },
  mounted() {
    this.init();
  }
};
</script>
<style lang="scss" scoped>
#maplay {
  font-size: 16px;
  height: 100%;
  width: 100%;
  // .ol-attribution,.ol-zoom { display: none;}
}
</style>
复制代码

看看效果

我们一点一点分析

new Map({
  target: "maplay", //dom中的额id
   layers: [
     //图层可以是多个所以是个数组
     new TileLayer({
       //创建图层
       source: new OSM() //记载数据源---使用Open Street Map地图源的瓦片图层
     })
   ],
   view: new View({
     //创建一个地图的窗口{地图的移动,放大,缩小,旋转等等都可以在这实现}
     projection: "EPSG:4326", //wgs84坐标系
     center: [114.064839, 22.548857], //定位到坐标点
     zoom: 12 //定位12图层
   })
 });
复制代码

ol/Map是openlayers核心组件

'ol/Map'是openlayers核心组件,他定义了target容器,把map呈现的地图映射到网页上.也可以使用setTarget()方法进行配置

import View from 'ol/View';
import Map from 'ol/Map';

var map = new Map({target: 'map'});
map.setView(new View({
  center: [0, 0],
  zoom: 2
}));
复制代码

source地图数据源

import OSM from 'ol/source/OSM';

var osmSource = OSM();
复制代码

openlayers给我们封装了,一些免可用的地图资源服务,如OpenStreetMa或者Bing,OGC源以及GeoJson或KML格式的矢量数据服务

layer层

类型:

• ol/layer/Tile--将地图图像按照缩放级别和特定分辨率组织到网格中,呈现到我们面前,

• ol/layer/Image--对应的是一整张图，而不像瓦片那样很多张图，从而无需切片，也可以加载一些地图，适用于一些小场景地图。

• ol/layer/Vector--对应的是矢量地图源，点，线，面等等常用的地图元素(Feature)，就囊括到这里面了。这样看来，只要这两种Source就可以搞定80%的需求了。

• ol/layer/VectorTile--对应矢量切片

作者

作者: weshmily前端

官网: 百度搜索(weshmily前端)

CSDN博客:blog.csdn.net/qq_27118895

github:github.com/weshmily

公众号:搜索"weshmilyqd"