Vue+ArcGIS API for JS实现地图邮编分区以及定位的区域高亮-CSDN博客

本文链接：https://blog.csdn.net/weixin_45882608/article/details/134640261

本文介绍了如何在国际物流系统开发中使用Vue.js结合ArcGIS API for JS来实现地图上的邮编分区展示以及定位后的区域高亮效果。详细步骤包括安装esri-loader，创建地图容器，初始化地图，引入图层库中的图层，并通过官方API进行定位点和高亮面的设置。此外，文章还分享了如何获取并应用边界坐标的技巧。

摘要由CSDN通过智能技术生成

前言

最近公司开发国际物流系统，如果使用国内地图，类似百度，腾讯，高德地图，那么国外的地理信息不会那么全，而且获取邮编api只对国内生效，所以考虑使用esri公司的arcgis地图，但是这个地图在国内社区并不完善，踩过很多坑，在网上也找不到相关的解决办法。在此分享给需要做类似需求的小伙伴，希望能帮到大家。

官网：https://www.esri.com/zh-cn/arcgis/products/develop-with-arcgis/overview

使用步骤

创建一个地图有以下步骤：

1、安装esri-loader

npm i esri-loader

2、在文件中引入

import { loadModules } from "esri-loader";

3、创建容器

<div id="arcmap"></div>

注意：需要给容器指定高度，否则无法显示。

4、初始化地图

_createMapView() {
      const _self = this; //定义一个_self防止后续操作中this丢失
      //定义一个包含有JS API中js包和css样式文件的对象
      const option = {
        url: "https://js.arcgis.com/4.28/",
        css: "https://js.arcgis.com/4.28/esri/themes/light/main.css",
      };

      //通过loadModules来做衔接引入类 以下是一些本文章会使用到的类
      loadModules(
        [
          "esri/Map", // 地图
          "esri/views/MapView", // 地图视图
          "esri/layers/GraphicsLayer", // 图形图层
          "esri/Graphic", // 图形类
          "esri/layers/FeatureLayer", // 用于管理要素图层的数据源
        ],
        option
      )
        .then(([Map, MapView]) => {
          //实例化地图
          this.map = new Map({
            basemap: "streets", // 指定底图
          });
          this.view = new MapView({
            //实例化地图视图
            container: "arcmap",
            map: this.map,
            zoom: 11,// 缩放等级
            center: [this.longitude, this.latitude], // 中心点