1、Vue3.0 第一个地图

OpenLayers是一个用于开发WebGIS客户端的高性能、功能丰富的JavaScript库,用于在 Web 上创建交互式地图。OpenLayers 支持的地图来源包括Google Maps、Yahoo、 Map、微软Virtual Earth 等，用户还可以用简单的图片地图作为背景图，与其他的图层在OpenLayers 中进行叠加，在这一方面OpenLayers提供了非常多的选择。除此之外，OpenLayers实现访问地理空间数据的方法都符合行业标准。OpenLayers 支持Open GIS 协会制定的WMS（Web Mapping Service）和WFS（Web Feature Service）等网络服务规范，可以通过远程服务的方式，将以OGC 服务形式发布的地图数据加载到基于浏览器的OpenLayers 客户端中进行显示。OpenLayers采用面向对象方式开发，并使用来自Prototype.js和Rico中的一些组件。

image.png

一、支持瓦片图层

OpenLayers支持从OSM、Bing、MapBox、Stamen和其他任何你能找到的XYZ瓦片资源中提取地图瓦片并在前端展示。同时也支持OGC的WMTS规范的瓦片服务以及ArcGIS规范的瓦片服务。

二、支持矢量切片（或者矢量瓦片）

OpenLayers也支持矢量切片的访问和展示，包括MapBox矢量切片中的pbf格式，或者GeoJSON格式和TopoJSON格式的矢量切片。

三、支持矢量图层

能够渲染GeoJSON、TopoJSON、KML、GML和其他格式的矢量数据，上面说的矢量切片形式的数据也可以被认为是在矢量图层中渲染。

四、支持OGC规范

OpenLayers支持OGC制定的WMS、WFS等GIS网络服务规范。

五、运用前沿技术

利用Canvas 2D、WebGL以及HTML5中其他最新的技术来构建功能。同时支持在移动设备上运行。

六、易于定制和扩展

可以直接调整CSS来为地图控件设计样式。而且可以对接到不同层级的API进行功能扩展，或者使用第三方库来定制和扩展。

七、面向对象的思想

最新版本的OpenLayers采用纯面向对象的ECMA Script 6进行开发，可以说，在OpenLayers中万物皆对象。

八、优秀的交互体验

OpenLayers实现了类似于Ajax的无刷新功能，可以结合很多优秀的JavaScript功能插件，带给用户更多丰富的交互体验。

九、Vue3.0 第一个地图

了解完Openlayers特性，接下来使用Vue3.0写一个第一个地图吧。

<template>
  <van-nav-bar
    left-arrow
    fixed
    title="1、Vue3.0 第一个地图"
    @click-left="$router.go(-1)"
  ></van-nav-bar>
  <div id="map1"></div>
</template>
<script>
import "ol/ol.css";
import { Map, View } from "ol";
import Tile from "ol/layer/Tile";
import OSM from "ol/source/OSM";
import { onMounted } from "vue";
export default {
  name: "Map1",
  components: {},
  setup() {
    onMounted(() => {
      console.log(OSM);
      new Map({
        target: "map1",
        layers: [
          new Tile({
            source: new OSM(),
          }),
        ],
        view: new View({
          center: [-27118403.38733027, 4852488.79124965],
          zoom: 12,
        }),
      });
    });
    return {};
  },
};
</script>
<style scoped>
#map1 {
  padding-top: 46px;
  width: 100vw;
  height: 100vh;
}
</style>