openlayer简介及简单使用

openlayers

1. OpenLayers是一个用于开发WebGIS客户端的JavaScript包，最初基于BSD许可发行。OpenLayers是一个开源的项目，其设计之意是为互联网客户端提供强大的地图展示功能，包括地图数据显示与相关操作，并具有灵活的扩展机制。目前OpenLayers已经成为一个拥有众多开发者和帮助社区的成熟、流行的框架。
   以下是OpenLayers的官方网站：https://openlayers.org/
   

创建一个openlayer地图

1、打开工程并且安装openlayer

npm i -S ol

2、引入openlayer 在这里我是用的是vue

<template>
    <div>
        <div id="map" style="height:800px;"></div>
        <div id="mousePosition"></div>
    </div>
</template>
<script>
import TileLayer from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import { Map, View } from "ol";
import { MousePosition } from "ol/control";
import {createStringXY} from "ol/coordinate";
export default {
  data() {
    return {
      map: null
    };
  },
  mounted() {
    let mousePosition = new MousePosition({
      //投影坐标格式，显示小数点后边多少位
      coordinateFormat: createStringXY(8),
      //指定投影
      projection: "EPSG:4326",
      //指定显示经纬度的容器
      target:document.getElementById('mousePosition')
    });
    this.map = new Map({
      target: "map",
      view: new View({
        projection: "EPSG:4326", 
        center: [108.87912466543567, 34.1994107045476],  //地图中心位置
        zoom: 10  //缩放级别
      }),
      layers: [
        new TileLayer({
          source: new OSM() //地图数据来源
        })
      ]
    });
    this.map.addControl(mousePosition); //给地图添加鼠标位置
  }
};
</script>
<style >
//控件样式
.ol-overlaycontainer-stopevent {
  display: none !important;
}
</style>