基础平面地图教程

2022-05-30 07:16:59

1 基础知识学习

1 GCJ-02坐标系

GCJ-02是由中国国家测绘局（G表示Guojia国家，C表示Cehui测绘，J表示Ju局）制订的地理信息系统的坐标系统。它是一种对经纬度数据的加密算法，即加入随机的偏差。国内出版的各种地图系统（包括电子形式），必须至少采用GCJ-02对地理位置进行首次加密。
JavaScript版本—坐标系转换工具
JavaScript版本—坐标系转换工具—整个geojson转换

1.2 GeoJson格式

GeoJSON是基于JavaScript 对象表示法的地理空间信息数据交换格式，请参考：地理空间数据格式——GeoJSON
GeoJSON在线编辑 geojson.io
GeoJSON行政区划边界提取小工具 DataV.GeoAtlas，最低层级为区县级

1.3 坐标拾取器—高德地图

详细地址与精准坐标之间的相互转化坐标拾取器，输入西溪湿地 ，右侧坐标获取结果即可显示对应的坐标信息。

2 基础平面地图

2.1 地图容器

基础平面地图地图容器包括 全局设置 和 图表尺寸位置 默认参数设置
全局设置：设置地图背景色、地图缩放级别、地图中心经纬度、控制比例尺控件显影等默认参数
图表尺寸位置：设置 基础平面地图 组件位于画布的位置及其长宽尺寸

2.2 底图层（地图瓦片层）

目前支持接入的地图瓦片服务

2.2.1 GeoQ地图
GeoQ水墨灰：'//map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetGray/MapServer/tile/{z}/{y}/{x}'
GeoQ午夜蓝：'//map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}'
GeoQ彩色：'//map.geoq.cn/ArcGIS/rest/services/ChinaOnlineCommunity/MapServer/tile/{z}/{y}/{x}'
GeoQ边界：'//thematic.geoq.cn/arcgis/rest/services/ThematicMaps/administrative_division_boundaryandlabel/MapServer/tile/{z}/{y}/{x}'

2.2.2 高德地图
高德电子地图：'http://webst02.is.autonavi.com/appmaptile?style=7&x={x}&y={y}&z={z}'
高德卫星图：'http://webst02.is.autonavi.com/appmaptile?style=6&x={x}&y={y}&z={z}'
高德卫星图（路网、注记）：'http://webst02.is.autonavi.com/appmaptile?style=8&x={x}&y={y}&z={z}'

2.2.3 天地图
天地图电子地图：'//t0.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z} '
天地图电子地图注记：'//t0.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}'
天地图影像：'//t0.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}'
天地图影像注记：'//t0.tianditu.com/DataServer?T=cia_w&x={x}&y={y}&l={z}'
天地图地形：'//t0.tianditu.com/DataServer?T=ter_w&x={x}&y={y}&l={z}'
天地图地形注记：'//t0.tianditu.com/DataServer?T=cta_w&x={x}&y={y}&l={z}'

2.2.4 Google地图（可能访问不到，建议使用GeoQ、高德、天地图瓦片服务）
谷歌电子地图：'http://www.google.cn/maps/vt?lyrs=m@189&gl=cn&x={x}&y={y}&z={z}'
谷歌卫星地图：'http://mt3.google.cn/vt/lyrs=s&hl=zh-CN&gl=cn&x={x}&y={y}&z={z}'

2.3 背景图

对于固定缩放等级的大屏设计需求，用户可以考虑自己设计地图背景，作为地图底图，增强地图美感

2.4 点图层—散点层、呼吸气泡层、点热力层、流式气泡层

2.4.1 散点层
散点层数据格式

  [
      {
          "dotid": 0,
          "lat": 31.8998, //纬度
          "lng": 102.2212, //经度
          "value": 8,  //权重值
          "info": "描述信息0", //弹窗信息
          "type": "error", 
          "name": "点0", //点位名称，可以用于显示点位标注
          "rotationAngle": 45
      }
  ]

参考博文 DataV地图组件全新发布，带你玩转地理大数据

2.4.2 呼吸气泡层
呼吸气泡层数据格式

  [
      {
        "lat": 31.8998, //纬度
        "lng": 102.2212, //经度
        "value": 1, //权重值
        "type": 1  //气泡类型
      }
  ]

2.4.3 点热力层
呼吸气泡层数据格式

  [
      {
        "lat": 25.82, //纬度
        "lng": 98.86, //经度
        "value": 17  //权重值
      }
  ]

2.4.4 流式气泡层
流式气泡层数据格式，info支持</br>换行

  [
      {
        "lng": 124.233398, //经度
        "lat": 45.73686, //纬度
        "info": "自定义信息</br>自定义信息"
      }
  ]

2.5 线图层—线热力层

参考：DataV地图组件全新发布，带你玩转地理大数据

2.6 面图层—区域热力层、区域（行政）下钻层、等值面层、网格热力层

2.6.1 区域热力层
参考：基础平面地图——区域热力层使用教程
2.6.2 区域（行政）下钻层
参考：基础平面地图——区域热力层使用教程
2.6.3 等值面层
参考：DataV带你回顾春节前后全国空气质量变化
2.6.4 网格热力层
注意经纬度坐标格式要写正确

2.7 地图交互—回调ID

DataV中的回调ID是个什么鬼？
DataV回调id升级啦

码农公寓