Mapbox加载浙江省天地图服务和数据处理

1. 加载影像服务

通过浙江省天地图官网申请所需服务,使用token获取服务数据

由于浙江省天地图使用的坐标系是 cgcs2000,需要使用 的框架对应为 @cgcs2000/mapbox-gl,通过cdn引入或npm下载

影像服务地址为:

'https://ditu.zjzwfw.gov.cn:443/services/wmts/imgmap/default/oss?service=WMTS\&request=GetTile\&version=1.0.0\&layer=imgmap\&style=default\&tilematrixSet=esritilematirx\&format=image%2Fjpgpng\&height=256\&width=256\&fullExtent=[object Object]\&tilematrix={z}\&tilerow={y}\&tilecol={x}\&token=申请的token'

影像标注地址为:

'https://ditu.zjzwfw.gov.cn:443/services/wmts/emap_lab/default/oss?service=WMTS\&request=GetTile\&version=1.0.0\&layer=imgmap\&style=default\&tilematrixSet=esritilematirx\&format=image%2Fjpgpng\&height=256\&width=256\&fullExtent=[object Object]\&tilematrix={z}\&tilerow={y}\&tilecol={x}\&token=申请的token'

其他的服务同理

2. 行政边界获取

const getData =async (name) => {

const res = await fetch('https://ditu.zjzwfw.gov.cn/ime-server/rest/xzqh_zj/division/search?withgeometry=true\&token=申请的token\&withparents=false\&fullname=' + name)

.then(resp => resp.json())

return res

}

getData('浙江省杭州市')

3. 行政边界数据处理

获取的数据为wkt 格式,需要使用gis小工具 wicket

wicket 使用cdn或npm 下载

javascript 复制代码
// 使用npm下载
import Wkt from 'wicket'

const wkt = new Wkt.Wkt()

// item.GEOMETRY 为 wkt字符串
const geometry = wkt.read(item.GEOMETRY).toJson()

4. 行政区划查询(正向、逆向)

javascript 复制代码
// 正向
const searchData =async (name) => {
  const res = await fetch('https://ditu.zjzwfw.gov.cn/ime-server/rest/xzqh_zj/division/search?callback=showresult&v=2&token=申请的token&fullname=' + name)
      .then(resp => resp.json())

  return res
}

searchData('浙江省杭州市')


// 逆向
const searchRgeo =async (lnglat:{
  lon: number,
  lat: number
}) => {
  const res = await fetch(`https://ditu.zjzwfw.gov.cn/ime-server/rest/xzqh_zj/division/rgeo?lon=${lnglat.lon}&lat=${lnglat.lat}&token=申请的token`)
      // .then(resp => resp.json())

  return res
}

  searchRgeo({
    lat: 30.25961,
    lon: 120.13026
  })
相关推荐
霍理迪几秒前
CSS复合、关系、属性、伪类选择器
前端·javascript·css
棒棒的唐2 分钟前
Avue2图片上传使用object对象模式时,axios的请求模式用post还是get?
开发语言·前端·javascript·avue
亮子AI7 分钟前
【Typescript】未知类型如何处理?
linux·javascript·typescript
梵得儿SHI7 分钟前
Vue Router 路由管理从入门到精通:基础、导航与参数传递实战(含避坑指南)
前端·javascript·vue.js·路由基础配置·版本适配·路由实例创建·路由规则定义
Watermelo61711 分钟前
【前端实战】Axios 错误处理的设计与进阶封装,实现网络层面的数据与状态解耦
前端·javascript·网络·vue.js·网络协议·性能优化·用户体验
不一样的少年_11 分钟前
【性能监控】别只做工具人了!手把手带你写一个前端性能检测SDK
前端·javascript·监控
开发者小天12 分钟前
react中使用复制的功能
前端·javascript·react.js
wanderful_15 分钟前
Javascript笔记分享-流程控制(超级超级详细!!!)
javascript·笔记·流程控制·实战案例·新手友好
长安牧笛31 分钟前
制作本地美食测评评分工具,输入美食名称,口味,价格,自动生成评分,帮助消费者选择美食。
javascript
Aftery的博客31 分钟前
Uniapp-vue实现语言功能切换(多语言)
javascript·vue.js·uni-app