前端笔记 Front-end Dev Engineer

浙江省天地图

2020-09-16
地图
 

应为业务需要使用了浙江天地图这款地图，其中很多东西需要记录一下，所以有了本博文。

浙江天地图介绍

目前浙江省天地图的官网是 http://ditu.zjzwfw.gov.cn/,还有一个疑似官网的 http://tianditu.zj.gov.cn/

浙江省天地图，支持政务网，可以在政府云上使用，在内网环境也能提供地图服务。该地图是由浙江省测绘局牵头的，并且在浙江省内的各地政府项目中，都全面应用。

特别注意，国家天地图与浙江省天地图实则是两家不同的机构，只是名义上有关系，浙江省天地图，是针对浙江省内的地图，进一步优化的，提供的api与服务都是不一样的，不可通用。

开始使用

前往官网下载sdk，其中，h5的sdk分为两套api：leaflet sdk和openlayers sdk，应为我只熟悉leaflet的那套api，所以我下载leaflet sdk。

需要把下载的文件中的以下几个文件按顺序引入

<link rel="stylesheet" href="/js/lib/LeafletSDK/css/leaflet.css"/>     

<script src='/js/lib/LeafletSDK/js/leaflet-src.js'></script>
<script src='/js/lib/LeafletSDK/js/leaflet.js'></script>
<script src='/js/lib/LeafletSDK/js/CustomWebSDK.min.js'></script>

载入地图

    var map = L.map('map',{crs:L.CRS.CustomEPSG4326,center: {lon:120.09215287988154,  lat:30.277052933991797},zoom:12,inertiaDeceleration:15000,maxZoom:20});
    //添加底图
    var layer = new L.GXYZ('http://ditu.zjzwfw.gov.cn/mapserver/vmap/zjvmap/getMAP?x={x}&y={y}&l={z}&styleId=tdt_biaozhunyangshi_2017',{tileSize:512});
    map.addLayer(layer);

以上是最简单的使用方法，实际上，可以同时加载多个 layer 图，比如正常使用时，我们需要加载 地图底图与注记图。

地图服务类型主要有：

名称 描述 继承自
L.GXYZ 后端绘制矢量瓦片底图图层 Leaflet的L.TileLayer
L.GVMapGrid 前端绘制矢量瓦片底图图层 Leaflet的L.TileLayer  
L.GLabelGrid 后端注记避让前端绘制注记图层 Leaflet的L.Layer  
L.GWVTAnno 前端注记避让前端绘制注记图层 Leaflet的L.Layer  
L.CRS.CustomEPSG4326 支持经纬度投影从1级开始请求 Leaflet的L.CRS.Earth  

自此地图的基本功能就算完成了。

地图api

应为我使用的是 leaflet，所以，可以使用leaflet的所有的功能，具体参考官网：https://leafletjs.com/

leaflet sdk 还在 leaflet的基础上扩展了一些方法，可以获取到一些地图信息，具体请看文档:http://ditu.zjzwfw.gov.cn/docs/#/README?areaCode=330000

除此以外还有一些别的功能api，是单独的 “矢量地图服务”,”栅格地图服务”,”OGC服务”,”政区查询服务”,”POI搜索服务”,”name”:”地理编码服务”,”专题地图服务”,”目录服务” 可以获取一些经纬度或者查询等等内容。

自定义服务

还可以自己上传 argsic 格式的地图，然后生成瓦片，并且使用，还可以自己编辑样式，还可以获取其中的一些内容。 图片展示还可以进行过滤条件http://ditu.zjzwfw.gov.cn/docs/vectorservice/#/ 过滤条件和设置样式时通用，详见http://ditu.zjzwfw.gov.cn/docs/vectorservice/#/filter

pianqu  in ("琅琊镇第一片区","安地镇片区","汤溪所第二片","秋滨所第四片","道院塘北区","骆家塘片区","城西所第二片区","西关所第一片","西关所第五片","城东所第三片区","江南所第三片")

总结

地图还有很多秘密，需要自己在详细钻研

评论

Content