【免费底图调用】亚米级分辨率！Vue3和Openlayers加载“吉林一号“切片影像套件

一、吉林一号切片影像套件申请

吉林一号网（吉林一号网）推出亚米级影像切片套件，为遥感地信开发者提供最新全国高质量影像切片数据和开发工具包，加力赋能各行各业。接下来将介绍如何申请吉林一号影像套件：

1、访问【吉林一号网】【遥感商城】【切片影像套件】，这里我们点击使用体验版，首次使用需填写相关信息完成注册申请

2、点击查看套件明细和套件管理

3、在套件管理页面中，复制TK的代码并挑选所需的MK的代码，在这里我们选用2022年度全国高质量一张图作为底图，如下图

二、封装GIS组件

1、安装openlayers组件库

npm install ol

2、在components目录下新建MainMap.vue文件，该文件为GIS相关操作的功能组件，目录结构如下图所示

3、修改style.css文件，本次展示的效果是全屏铺满地图展示，需对body以及vue挂载的父组件进行样式调整，保证其充满全屏

#style.css
body{
    margin: 0;
    width:100vw;
    height:100vh
}
#app{
    width:100%;
    height:100%;
}  

4、父组件App.vue的编写，内部文件采用Vue3组合式编码规范，提高代码可读性和可维护性，这里我们设置中心点为北京故宫，初始层级为14级

<template>
<!--  子组件调用-->
  <MainMap :option="mapOption" class="mainMap" />       
</template>
<script setup>
import MainMap from './components/MainMap.vue'          //引入GIS子组件
const cg_mk='YOUR MK'                                   //申请的MK
const cg_tk='adcaa255672f20f16726b90ae2d72dc3'          //选用的遥感影像的套件
const mapOption={                                       //相关配置参数
  mapCenter:[116.35308, 39.91775],
  zoom:14,
  cgUrl:`https://api.jl1mall.com/getMap/{z}/{x}/{-y}?mk=${cg_mk}&tk=${cg_tk}`
}
</script>
<style scoped>
.mainMap{
  width:100%;
  height:100%;
}
</style>

5、子组件MainMap.vue编写

（1）首先对于GIS组件我们需创建地图的容器，这里在模板中创建id为map铺满全屏的盒子

（2）设置视图View，在这里可设置地图的初始中心、旋转约束、视图范围、最大最小缩放层级等

（3）设置图层Layer，在这里我们加载Tile瓦片图层，用到了Openlayers3中ol.source.XYZ类，在source中需设置XYZ瓦片的URL、坐标系(EPSG:3857投影坐标系)、瓦片加载的最大最小图层

<template>
  <div id="map"></div>
</template>
<script setup>
import { ref,onMounted } from 'vue'
import { Map, View } from 'ol';
import { Tile } from 'ol/layer';
import { XYZ } from 'ol/source';
import {fromLonLat} from "ol/proj";
let props=defineProps({                                //父组件传递的参数
  option: Object,
})
let map = null;
const initMap = () => {                                //初始化地图函数
  map = new Map({
    target: document.querySelector('#map'),
    view: new View({
      center: fromLonLat(props.option.mapCenter),
      zoom: props.option.zoom,
    }),
    layers: [
      new  Tile({
        source: new XYZ({
          projection: "EPSG:3857",
          url: props.option.cgUrl,
          maxZoom: 18,
          minZoom: 0,
        }),
      })
    ],
  });
};
onMounted(()=>{                                       //调用加载
  initMap()
})
</script>
<style scoped>
</style>

6、这样我们就可以在浏览器中查看加载吉林一号影像套件

三、添加路网信息

在我们实际应用需求中，通常要求我们加入影像的路网信息。这时我们可以申请试用开源天地图路网信息，具体操作如下：

1、访问天地图开放平台的注册页面：http://lbs.tianditu.gov.cn/register.html

2、输入必要的注册信息，包括用户名、密码、电子邮件地址等

3、勾选《服务协议》，并提交注册信息

4、在注册成功后，登录天地图开放平台，进入控制台页面：http://lbs.tianditu.gov.cn/console

5、在控制台页面中，单击“应用管理”菜单，创建一个新的应用程序

6、在创建新应用程序时，需要指定应用程序的名称、类型和访问权限等信息，并获取到应用程序的开发者密钥（key）

这时我们对子组件MainMap.vue稍加修改就可以

<template>
  <div id="map"></div>
</template>
<script setup>
import { ref,onMounted } from 'vue'
import { Map, View } from 'ol';
import { Tile } from 'ol/layer';
import { XYZ } from 'ol/source';
import {fromLonLat} from "ol/proj";
let props=defineProps({
  option: Object,
})
let map = null;
const initMap = () => {
  map = new Map({
    target: document.querySelector('#map'),
    view: new View({
      center: fromLonLat(props.option.mapCenter),
      zoom: props.option.zoom,
    }),
    layers: [
      new  Tile({
        source: new XYZ({
          projection: "EPSG:3857",
          url: props.option.cgUrl,
          maxZoom: 18,
          minZoom: 0,
        }),
      }),
      new  Tile({
        source: new XYZ({
          projection: "EPSG:3857",
          url: 'http://t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=your tk',
        }),
      }),
    ],
  });
};
onMounted(()=>{
  initMap()
})
</script>
<style scoped>
</style>

四、使用QGIS加载吉林一号切片影像套件

1、复制url

2、打开QGIS，选择XYZ Tiles，右键新建连接，将mk地址复制到URL中点击确定即可

欢迎上吉林一号网(https://www.jl1mall.com/)申请体验~