Vue+OpenLayers学习系列（二）OpenLayers 读取 ArcGIS Server 发布的地图服务

最新推荐文章于 2024-01-29 21:22:19 发布

爱睡懒觉的老舅

最新推荐文章于 2024-01-29 21:22:19 发布

阅读量1.9k

点赞数 1

分类专栏：前端文章标签： OpenLayers

本文链接：https://blog.csdn.net/Ocean111best/article/details/107429340

版权

前端专栏收录该内容

19 篇文章 17 订阅

订阅专栏

一、首先用 ArcGIS Server 发布地图服务

在 ArcMap 中文件-共享为-服务，然后选择发布服务。

二、Vue + OpenLayers 读取发布的 ArcGIS Server 地图服务

<template>
  <div id="map" ref="rootmap">

  </div>
</template>
<script>
  import 'ol/ol.css';
  import Map from 'ol/Map';
  import View from 'ol/View';
  import {Tile as TileLayer, Image as ImageLayer} from 'ol/layer';
  import {OSM, ImageArcGISRest} from 'ol/source';
  export default{
    name: 'OlImage',
    data(){
      return{
          map: null
      };
    },
    mounted(){

        var url = 'http://localhost:6080/arcgis/rest/services/Test/hzzg/MapServer';   //结果可以出来
        this.map = new Map({
          target: "map",
          layers: [
              new TileLayer({
                source: new OSM()
              }),
              new ImageLayer({
                source: new ImageArcGISRest({   //可以得出结果
                  ratio: 1,
                  url: url
                })
              })
          ],
          view: new View({
            center: [-10997148, 4569099],
            zoom: 4
          })
        });
    }
  };

</script>

<style>
  #map{
    height:800px;
    width: 1400px;
  }
  /*隐藏ol的一些自带元素*/
  .ol-attribution,.ol-zoom { display: none;}

</style>