创建地图--vue

最新推荐文章于 2024-05-11 06:03:29 发布

小小弯_Shelby

最新推荐文章于 2024-05-11 06:03:29 发布

阅读量521

点赞数

分类专栏：地图知识点文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_44293690/article/details/125850370

版权

地图知识点专栏收录该内容

6 篇文章 0 订阅

订阅专栏

1.地图api

ArcGIS API for JavaScript（version: 4.x）：
API文档地址：https://developers.arcgis.com/javascript/latest/api-reference/
ArcGIS API for JavaScript（version: 3.x）：
API文档地址：https://developers.arcgis.com/javascript/3/jsapi/map-amd.html

2.使用esri-loader加载ArcGIS API for JavaScript 3.x或4.x

安装esri-loader：

npm install --save esri-loader

3.创建地图map

使用预定义的底图创建地图

<template>
  <div class="map"></div>
</template>
<script>
  import { loadModules } from 'esri-loader';
  export default {
    name: 'web-map',
    data(){
      return{
        map:null,
        view:null
      }
    },
    mounted() {
      loadModules([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/WebTileLayer",
        "esri/layers/support/TileInfo",
        "esri/geometry/Extent", "esri/symbols/Font", "esri/tasks/IdentifyTask", "esri/tasks/support/IdentifyParameters",
        "esri/PopupTemplate", "esri/symbols/PictureMarkerSymbol", "esri/Graphic", "esri/layers/MapImageLayer", "esri/layers/GraphicsLayer",
        "esri/symbols/TextSymbol", "esri/Color", "esri/views/2d/draw/Draw", "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol",
        "esri/geometry/SpatialReference", "esri/tasks/GeometryService", "esri/tasks/support/AreasAndLengthsParameters",
        "esri/tasks/support/LengthsParameters", "esri/geometry/Point", "esri/geometry/Polyline", "esri/geometry/Polygon",
        'esri/geometry/geometryEngine', "esri/layers/TileLayer", 'esri/layers/FeatureLayer',
        "esri/layers/GeoJSONLayer",
        "dojo/domReady!",
        
      ], { css: true })
        .then(([
        Map, MapView, WebTileLayer, TileInfo, Extent, Font, IdentifyTask, IdentifyParameters,
        PopupTemplate, PictureMarkerSymbol, Graphic, MapImageLayer, GraphicsLayer, TextSymbol, Color, Draw, SimpleFillSymbol, SimpleLineSymbol,
        SpatialReference, GeometryService, AreasAndLengthsParameters, LengthsParameters, Point, Polyline, Polygon, GeometryEngine,
        TileLayer, FeatureLayer,GeoJSONLayer]) => {
        
        this.map = new Map({
          basemap: 'topo-vector',//使用预定义的底图
          spatialReference: { //空间参考，很重要
            wkid: 4490
          },
        });
        
        this.view = new MapView({
          container: this.$el,
          map: this.map,
          center: [113.25874328613281,23.129310008527632],
          zoom: 11,
        });
      });
    },
  }
</script>

<style>
  .map{
    width:1500px;
    height:600px;
    background-color: #aaa;
  }
</style>

使用自定义的底图创建地图

<template>
  <div class="map"></div>
</template>
<script>
  import { loadModules } from 'esri-loader';
  export default {
    name: 'web-map',
    data(){
      return{
        map:null,
        view:null
      }
    },
    mounted() {
      loadModules([
        "esri/Map",
        "esri/views/MapView",
        "esri/layers/WebTileLayer",
        "esri/layers/support/TileInfo",
        "esri/geometry/Extent", "esri/symbols/Font", 
        "esri/tasks/IdentifyTask", "esri/tasks/support/IdentifyParameters",
        "esri/PopupTemplate", "esri/symbols/PictureMarkerSymbol",
        "esri/Graphic", "esri/layers/MapImageLayer", "esri/layers/GraphicsLayer",
        "esri/symbols/TextSymbol", "esri/Color", "esri/views/2d/draw/Draw", 
        "esri/symbols/SimpleFillSymbol", "esri/symbols/SimpleLineSymbol",
        "esri/geometry/SpatialReference", "esri/tasks/GeometryService", 
        "esri/tasks/support/AreasAndLengthsParameters",
        "esri/tasks/support/LengthsParameters", "esri/geometry/Point",
         "esri/geometry/Polyline", "esri/geometry/Polygon",
        'esri/geometry/geometryEngine', "esri/layers/TileLayer", 
        'esri/layers/FeatureLayer',
        "esri/layers/GeoJSONLayer",
        "dojo/domReady!",
        
      ], { css: true })
        .then(([
        Map, MapView, WebTileLayer, TileInfo, Extent, Font, IdentifyTask,
        IdentifyParameters,PopupTemplate, PictureMarkerSymbol, Graphic,
        MapImageLayer, GraphicsLayer, TextSymbol,Color, Draw, SimpleFillSymbol, 
        SimpleLineSymbol,SpatialReference, GeometryService, 
        AreasAndLengthsParameters, LengthsParameters, Point, Polyline, Polygon,
        GeometryEngine,TileLayer, FeatureLayer,GeoJSONLayer]) => {
        
        var baseTileLayer=new TileLayer({
		  id: "base-tile-layer",//自定义值
		  //使用自定义的底图(自己发布的地图服务图层)
		  url: 'http://116.8.3.144:60/arcgis/rest/services/base/lz_vec/MapServer',
		  visible: true,
		});
        this.map = new Map({
          basemap: {
          	baseLayers: [baseTileLayer]
          },
          spatialReference: { //空间参考，很重要
            wkid: 4490
          },
        });
        
        this.view = new MapView({
          container: this.$el,
          map: this.map,
          center: [113.25874328613281,23.129310008527632],
          zoom: 11,
        });
      });
    },
  }
</script>

<style>
  .map{
    width:1500px;
    height:600px;
    background-color: #aaa;
  }
</style>