vue+arcgis api两种环境下加载天地图（1.esri-loader、2.@arcgis/core）

有帮到你的话就点个赞叭1.esri-loader直接上源码<template><div id="viewDiv"></div></template><script>import { setDefaultOptions, loadModules } from "esri-loader";// 这里的设置默认配置项的写法等同于{css:tru

我有柚子茶噢

3017人浏览 · 2022-03-04 10:16:28

我有柚子茶噢 · 2022-03-04 10:16:28 发布

有帮到你的话就点个赞叭

难点就在于构造webTileLayer的tileInfo属性，参考了刀语大神的dpi和lods

urltempltate:

subDomains:提供切片以加快切片检索的子域名称字符串。

tileInfo:切片方案的定义

dpi:图像每英寸长度内的像素点数，与像素有关，与最后的图像精度有密切关系

平铺方案每英寸的点数，如果像素点少，那画质就差

lods：核心切片参数，具体定义了缩放比例、分辨率

1.esri-loader

直接上源码

<template>
  <div id="viewDiv"></div>
</template>

<script>
import { setDefaultOptions, loadModules } from "esri-loader";
// 这里的设置默认配置项的写法等同于{css:true}
// setDefaultOptions({ css: true });
export default {
  mounted() {
    // 懒加载 ArcGIS API

    loadModules(
      [
        "esri/views/MapView",
        "esri/Basemap",
        "esri/Map",
        "esri/layers/WebTileLayer",
        "esri/layers/support/TileInfo",
        "esri/geometry/SpatialReference",
      ],
      { css: true }
    ).then(
      ([MapView, Basemap, Map, WebTileLayer, TileInfo, SpatialReference]) => {
        const spatialReference = SpatialReference.WGS84;

        const tileInfo = new TileInfo({
          dpi: 90.71428571427429,
          lods: [
            {
              level: 0,
              levelValue: "1",
              scale: 295828763.79585470937713011037,
              resolution: 0.703125,
            },
            {
              level: 1,
              levelValue: "2",
              scale: 147914381.89792735468856505518,
              resolution: 0.3515625,
            },
            {
              level: 2,
              levelValue: "3",
              scale: 73957190.948963677344282527592,
              resolution: 0.17578125,
            },
            {
              level: 3,
              levelValue: "4",
              scale: 36978595.474481838672141263796,
              resolution: 0.087890625,
            },
            {
              level: 4,
              levelValue: "5",
              scale: 18489297.737240919336070631898,
              resolution: 0.0439453125,
            },
            {
              level: 5,
              levelValue: "6",
              scale: 9244648.868620459668035315949,
              resolution: 0.02197265625,
            },
            {
              level: 6,
              levelValue: "7",
              scale: 4622324.4343102298340176579745,
              resolution: 0.010986328125,
            },
            {
              level: 7,
              levelValue: "8",
              scale: 2311162.2171551149170088289872,
              resolution: 0.0054931640625,
            },
            {
              level: 8,
              levelValue: "9",
              scale: 1155581.1085775574585044144937,
              resolution: 0.00274658203125,
            },
            {
              level: 9,
              levelValue: "10",
              scale: 577790.55428877872925220724681,
              resolution: 0.001373291015625,
            },
            {
              level: 10,
              levelValue: "11",
              scale: 288895.2771443893646261036234,
              resolution: 0.0006866455078125,
            },
            {
              level: 11,
              levelValue: "12",
              scale: 144447.63857219468231305181171,
              resolution: 0.00034332275390625,
            },
            {
              level: 12,
              levelValue: "13",
              scale: 72223.819286097341156525905853,
              resolution: 0.000171661376953125,
            },
            {
              level: 13,
              levelValue: "14",
              scale: 36111.909643048670578262952926,
              resolution: 0.0000858306884765625,
            },
            {
              level: 14,
              levelValue: "15",
              scale: 18055.954821524335289131476463,
              resolution: 0.00004291534423828125,
            },
            {
              level: 15,
              levelValue: "16",
              scale: 9027.977410762167644565738231,
              resolution: 0.000021457672119140625,
            },
            {
              level: 16,
              levelValue: "17",
              scale: 4513.9887053810838222828691158,
              resolution: 0.0000107288360595703125,
            },
            {
              level: 17,
              levelValue: "18",
              scale: 2256.9943526905419111414345579,
              resolution: 0.00000536441802978515625,
            },
            {
              level: 18,
              levelValue: "19",
              scale: 1128.4971763452709555707172788,
              resolution: 0.000002682209014892578125,
            },
          ],
          size: [256, 256],
          origin: {
            x: -180,
            y: 90,
          },
          spatialReference,
        });

        const webTileLayer = new WebTileLayer({
          urlTemplate:
            "http://{subDomain}.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=b854fdb3a3b2625bd6c8353e83f7cca3",
          subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
          tileInfo,
          spatialReference,
        });

        const basemap = new Basemap({
          baseLayers: [webTileLayer],
        });

        const map = new Map({
          basemap,
        });

        const view = new MapView({
          map,
          container: "viewDiv",
          center: [112, 29],
          zoom: 5,
        });
      }
    );
  },
};
</script>
<style>
#viewDiv {
  width: 100%;
  height: 100%;
}
</style>

2.@arcgis/core

<template>
  <div id="viewDiv"></div>
</template>
<script>
import "@arcgis/core/assets/esri/themes/light/main.css";
import EsriMap from "@arcgis/core/Map";
import MapView from "@arcgis/core/views/MapView";
import WebTileLayer from "@arcgis/core/layers/WebTileLayer";
import TileInfo from "@arcgis/core/layers/support/TileInfo";
import SpatialReference from "@arcgis/core/geometry/SpatialReference";
import Basemap from "@arcgis/core/Basemap";

export default {
  mounted() {
    const spatialReference = SpatialReference.WGS84;

    const tileInfo = new TileInfo({
      dpi: 90.71428571427429,
      lods: [
        {
          level: 0,
          levelValue: "1",
          scale: 295828763.79585470937713011037,
          resolution: 0.703125,
        },
        {
          level: 1,
          levelValue: "2",
          scale: 147914381.89792735468856505518,
          resolution: 0.3515625,
        },
        {
          level: 2,
          levelValue: "3",
          scale: 73957190.948963677344282527592,
          resolution: 0.17578125,
        },
        {
          level: 3,
          levelValue: "4",
          scale: 36978595.474481838672141263796,
          resolution: 0.087890625,
        },
        {
          level: 4,
          levelValue: "5",
          scale: 18489297.737240919336070631898,
          resolution: 0.0439453125,
        },
        {
          level: 5,
          levelValue: "6",
          scale: 9244648.868620459668035315949,
          resolution: 0.02197265625,
        },
        {
          level: 6,
          levelValue: "7",
          scale: 4622324.4343102298340176579745,
          resolution: 0.010986328125,
        },
        {
          level: 7,
          levelValue: "8",
          scale: 2311162.2171551149170088289872,
          resolution: 0.0054931640625,
        },
        {
          level: 8,
          levelValue: "9",
          scale: 1155581.1085775574585044144937,
          resolution: 0.00274658203125,
        },
        {
          level: 9,
          levelValue: "10",
          scale: 577790.55428877872925220724681,
          resolution: 0.001373291015625,
        },
        {
          level: 10,
          levelValue: "11",
          scale: 288895.2771443893646261036234,
          resolution: 0.0006866455078125,
        },
        {
          level: 11,
          levelValue: "12",
          scale: 144447.63857219468231305181171,
          resolution: 0.00034332275390625,
        },
        {
          level: 12,
          levelValue: "13",
          scale: 72223.819286097341156525905853,
          resolution: 0.000171661376953125,
        },
        {
          level: 13,
          levelValue: "14",
          scale: 36111.909643048670578262952926,
          resolution: 0.0000858306884765625,
        },
        {
          level: 14,
          levelValue: "15",
          scale: 18055.954821524335289131476463,
          resolution: 0.00004291534423828125,
        },
        {
          level: 15,
          levelValue: "16",
          scale: 9027.977410762167644565738231,
          resolution: 0.000021457672119140625,
        },
        {
          level: 16,
          levelValue: "17",
          scale: 4513.9887053810838222828691158,
          resolution: 0.0000107288360595703125,
        },
        {
          level: 17,
          levelValue: "18",
          scale: 2256.9943526905419111414345579,
          resolution: 0.00000536441802978515625,
        },
        {
          level: 18,
          levelValue: "19",
          scale: 1128.4971763452709555707172788,
          resolution: 0.000002682209014892578125,
        },
      ],
      size: [256, 256],
      origin: {
        x: -180,
        y: 90,
      },
      spatialReference,
    });

    const webTileLayer = new WebTileLayer({
      urlTemplate:
        "http://{subDomain}.tianditu.gov.cn/vec_c/wmts?SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=vec&STYLE=default&TILEMATRIXSET=c&FORMAT=tiles&TILEMATRIX={level}&TILEROW={row}&TILECOL={col}&tk=b854fdb3a3b2625bd6c8353e83f7cca3",
      subDomains: ["t0", "t1", "t2", "t3", "t4", "t5", "t6", "t7"],
      tileInfo,
      spatialReference,
    });

    const basemap = new Basemap({
      baseLayers: [webTileLayer],
    });

    const map = new EsriMap({
      basemap,
    });

    const view = new MapView({
      map,
      container: "viewDiv",
      center: [114, 29],
      zoom: 2,
    });
  },
};
</script>

<style>
html,
body {
  height: 100%;
}
#viewDiv {
  width: 100%;
  height: 100%;
}
</style>

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^