基础平面地图教程-阿里云开发者社区

开发者社区> 阿里云DataV> 正文

基础平面地图教程

简介: 基础知识学习:GCJ-02坐标系、GeoJson格式、坐标拾取器—高德地图;基础平面地图:地图容器、底图层(地图瓦片层)、背景图、点图层(散点层、呼吸气泡层、点热力层、流式气泡层)、线图层(线热力层)、面图层(区域热力层、区域(行政)下钻层、等值面层、网格热力层)、地图交互(回调ID)。

1 基础知识学习

1 GCJ-02坐标系

1.2 GeoJson格式

1.3 坐标拾取器—高德地图

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


86fb4b50cb2ef5d69b9a006c6b70632d3818fb76

2 基础平面地图

2.1 地图容器

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


ef4f934de65c2d8473719a0aa063853f837d2744

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 背景图

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


328cabce3b7626da3cc5df849cb52e2fd81a30e2

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

2.4.1 散点层
散点层数据格式

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


4b077275e1ed47fa74c9703d2f1e0be1969aadb7

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

2.4.2 呼吸气泡层
呼吸气泡层数据格式
  [
      {
        "lat": 31.8998, //纬度
        "lng": 102.2212, //经度
        "value": 1, //权重值
        "type": 1  //气泡类型
      }
  ]


1165a57b007302bd534b56c030738cf13b1ed9a4


d03b7b19765fa95f8fcbc1d4f7c0a182ddddda6c


2.4.3 点热力层
呼吸气泡层数据格式
  [
      {
        "lat": 25.82, //纬度
        "lng": 98.86, //经度
        "value": 17  //权重值
      }
  ]


eaf45b67b29538dd3aebc80bc55831e256889cef


66e51b293c907dd37a12eb4a3333fb7c950a90ce


2.4.4 流式气泡层
流式气泡层数据格式,info支持</br>换行
  [
      {
        "lng": 124.233398, //经度
        "lat": 45.73686, //纬度
        "info": "自定义信息</br>自定义信息"
      }
  ]


be403c2665ffbde3d93be7c47aa51a0c5a74a061

2.5 线图层—线热力层

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

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

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


17f3c29914a305d6b20f90037252818a8e930b04

2.7 地图交互—回调ID

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

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

分享:
+ 订阅

官网链接