vue+arcgis api两种环境下加载天地图（1.esri-loader、2.@arcgis/core）_我有柚子茶噢的博客-CSDN博客
相比较于arcgis api openlayer加载天地图就很简单了，因为底层的切片方案是一致的
<template><div id="map"></div></template><script>import "ol/ol.css";import Map from "ol/Map";import View from "ol/View";import TileLayer from "ol/layer/Tile";import XYZ from "ol/source/XYZ";export default {mounted() {let layer = new TileLayer({source: new XYZ({url:"/DataServer?T=vec_w&tk=4a76fd399e76e3e984e82953755c3410&x={x}&y={y}&l={z}",}),});let map = new Map({target: "map",view: new View({projection: "EPSG:4326",center: [114, 29],zoom: 5,}),layers: [layer],});},};</script><style>html,body{height: 100%;}#map{height: 100%;}</style>
这边还收集整理了其他天地图底图资源，并将其模块化成 Load_tianditu.js
import { XYZ } from 'ol/source';export function tianditu(map) {// T=vec_c表示请求的是路网数据，x 表示切片的 x 轴坐标，y 表示切片的y轴坐标，z表示切片所在的缩放级别。// 使用 ol.source.XYZ 加载切片，并将获取的数据初始化一个切片图层 ol.layer.Tile：//天地图底图var source = new XYZ({url: "/DataServer?T=vec_w&tk=申请的天地图key&x={x}&y={y}&l={z}"});var tileLayer = new TileLayer({id: "tileLayer",title: "天地图",layerName: "baseMap",source: source});//标注图层var sourceMark = new XYZ({url: '/DataServer?T=cva_w&tk=申请的天地图key&x={x}&y={y}&l={z}'});var tileMark = new TileLayer({id: "tileMark",title: "标注图层",layerName: "baseMap",source: sourceMark,});//卫星图像var sourceSatellite = new XYZ({url: '/DataServer?T=img_w&tk=申请的天地图key&x={x}&y={y}&l={z}'});var tileSatellite = new TileLayer({id: "tileSatellite",title: "卫星图",layerName: "baseMap",source: sourceSatellite});//天地图地形地图var map_ter = new TileLayer({id: "map_ter",title: "天地图地形",layerName: "baseMap",source: new XYZ({url: "/DataServer?T=ter_w&tk=申请的天地图key&x={x}&y={y}&l={z}"})})var map_cta = new TileLayer({id: "map_cta",title: "天地图标注",layerName: "baseMap",source: new XYZ({url: "/DataServer?T=cva_w&tk=申请的天地图key&x={x}&y={y}&l={z}"})});return {"tileLayer": tileLayer,"tileMark": tileMark,"tileSatellite": tileSatellite,"map_ter": map_ter,"map_cta": map_cta};}
