博客

1.创建vue项目

vue create ol-app

2.下载ol依赖包

npm i -s ol

3.创建组件Map.vue

<template>
  <div id="map" ref="map"></div>
</template>
<script>
import "ol/ol.css";
import TileLayer from "ol/layer/Tile";
import Projection from 'ol/proj/Projection';
import TileGrid from 'ol/tilegrid/TileGrid';
import XYZ from 'ol/source/XYZ';

import { Map, View } from "ol";

export default {
  data () {
    return {
      map: null,
    };

  },
  created () { },
  mounted () {
    this.initMap();

  },
  methods: {
    // 初始化地图
    initMap () {
      //定义坐标系
      const projection = new Projection({
        code: 'EPSG:4550',
        extent: [495283.6529890423, 4610983.549933729, 575005.9457669612, 4651555.897745091],
        units: 'm',
      });
       //地图服务切片地址
        var tileUrl = "http://******:6080/arcgis/rest/services/地形图/MapServer/tile/{z}/{y}/{x}";
       // 坐标原点
        var origin = [-5123200.0, 1.00021E7];
        // 分辨率
        var resolutions = [264.5838625010584, 132.2919312505292,66.1459656252646, 33.0729828126323,16.933367200067735,8.466683600033868,4.233341800016934,2.116670900008467,
            1.0583354500042335,0.5291677250021167,0.26458386250105836,0.13229193125052918,0.05291677250021167];
        //地图范围
        var extent = [495283.6529890423, 4610983.549933729, 575005.9457669612, 4651555.897745091];
        var tileGrid = new TileGrid({
                tileSize: 256,
                origin: origin,
                extent: extent,
                resolutions: resolutions
        });
            // 瓦片数据源
        var tileArcGISXYZ = new XYZ({
                tileGrid: tileGrid,
                projection: projection,
                url: tileUrl,
        });     
      
      this.map = new Map({
        target: "map", // 指向对象
        layers: [
          new TileLayer({
              source:tileArcGISXYZ
          }),
        ],
        view: new View({
          projection: projection,
          resolutions: resolutions,
          center: [533282.1027814309, 4629446.636493146],
          zoom: 10,
        }),
      });

    },
  },
};
</script>
 <style lang="less" scoped>

html,
body {
  margin: 0;
  height: 100%;
}

#map {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
}
</style>  

4.项目结构如下