290      阿裏雲  技術社區[雲棲]

DataV平麵地圖組件全新升級，新功能帶你搶先看

一、無級縮放

總會遭遇到這樣的尷尬，地圖縮放等級多一級太大，少一級又太小，強迫症患者簡直不能忍，別擔心，新版本的地圖組件支持分數級縮放啦！下麵就帶大家感受一下：

有了無級縮放，大家就可以任意調整至最合適的顯示區域了，不用在兩個整數縮放等級之間糾結萬分了，是不是很讚？

二、新增行政下鑽區域熱力組件

這個可以說是諸多客戶期待已久的組件了，終於在DataV地圖組件亮相啦！先來一睹為快：

相比較之前需要在地圖工具上下載對應的區域的geojson數據再填入區域熱力圖的矢量麵數據源，然後再配置映射數據來說（如下圖gif所示），這個組件就給大家帶來極大的方便了。

下麵來介紹下這個支持下鑽的區域熱力圖組件，組件內置全國省市區的地理數據，使用區域的adcode作為關聯值，在映射數據中字段是area_id。

1. 操作上采用雙擊區域則下鑽到下一級，雙擊無數據區域則返回上一層。
2. 同時支持默認顯示省份的選擇，可以自定義初始顯示的省份。
3. 在數據上組件支持將下級的數據聚合到上一級。 如示例圖所示，如果杭州市一級未填寫相應的數據則會將下一級的桐廬縣的數據聚合上來作為市的數據，如果市一級已有數據映射則不聚合下級區域的數據。
4. 其他操作同區域熱力圖組件，支持回調、數據優先渲染、標注、交互等。

附：省市區adcode與經緯度映射表.csv

三、高性能渲染

新版本的地圖圖層全部選用canvas優先進行渲染，大大提升了數據渲染能力。

四、散點層（散點、多係列散點（支持數據映射）、圖標點、多係列圖標點）

這個厲害了，多合一組件，將之前的散點層、多係列散點層和圖標點層的功能全部集成進來，還有隱藏功能哦。

下麵先帶您感受一下這個新組件：

1. 支持圖標和散點切換展示
2. 均支持多係列配置（數據的type字段配置）
3. 均支持回調ID配置
4. 支持散點數據映射（數據的value字段配置）
5. 支持自定義圖標點url（數據的iconUrl字段配置）
6. 支持點擊彈窗（數據的info字段配置）
7. 支持對點進行標注
8. 支持圖標位置和標注位置設置
9. 還支持圖標點的旋轉角度設置（不知道眼尖的同學有沒有看到）（數據的rotationAngle字段配置）

注意：如果沒有配置係列值或者不在係列值之內的數據點會使用默認配置進行渲染。

下麵講一下這個圖標點旋轉角度設置的配置，先帶大家看一下效果：

使用方式很簡單，就是在數據字段內加一個字段rotationAngle（這個字段是用來表示旋轉角度，單位默認是°，您隻需填數值即可），再選擇使用圖標渲染，然後上傳一個自定義圖標或者在數據字段中自定義iconUrl即可。

[
  {
    "lng": 102.2212,
    "lat": 31.8998,
    "rotationAngle": 45
  },
  {
    "lng": 120.079,
    "lat": 28.6542,
    "rotationAngle": 90
  }
  ...
]

五、新增線熱力圖組件

想繪製地鐵線路圖苦於在DataV找不到合適的地圖組件？不用怕，DataV新增線狀圖層可視化，下麵帶您看一下這個組件的功能。

該組件跟區域熱力圖一樣需配置兩個數據源（矢量線數據和映射數據）。

其中矢量線數據為geojson類型的數據，要素類型為LineString，如果需要跟映射數據對應，必須保證有唯一的link_id或者id字段。關於geojson的標準可以參考https://geojson.org/geojson-spec.html 。

如：

{
  "type": "FeatureCollection",
  "features": [
    {
      "type": "Feature",
      "properties": {
        "link_id": 1,
        "name": "test"
      },
      "geometry": {
        "type": "LineString",
        "coordinates": [
          [
            109.4677734375,
            41.409775832009565
          ],
          [
            117.46582031249999,
            36.31512514748051
          ],
          [
            118.828125,
            32.0639555946604
          ],
          [
            114.9169921875,
            27.566721430409707
          ]
        ]
      }
    }
  ]
}

那麼映射數據對應則為：

[
  {
    "link_id": 1,
    "value": 1,
    "color": "#ED3229"
  }
]

這裏支持數據優先的渲染，如果您配置了諸如color線顏色、weight線寬、dashArray虛線等字段，那麼會優先使用這些屬性來對關聯的線進行渲染，這裏的示例數據分別填入兩個數據源之後，來看一看長什麼樣：

總結一下新的線熱力圖組件支持的功能:

1. 支持回調ID
2. 支持點擊彈窗
3. 支持交互，如點擊縮放到線區域範圍、懸停效果
4. 支持數據映射，最大值最小值映射到顏色範圍
5. 支持數據優先渲染

六、其他組件

1.點熱力圖組件重構

2.瓦片圖層支持蒙版，濾鏡調整更明顯

3.區域熱力層增加點擊聚焦、支持數據優先渲染(支持fillColor填充色、color邊線色、weight邊線寬、dashArray虛線配置)

4.地圖父組件支持配置數據源來更改地圖中心點和縮放等級

地圖中心點和縮放等級配置示例數據：

    [
        {
          "zoom": 4,
          "lng": 112,
          "lat": 34
        }
      ]

這些功能隻要是DataV的企業版用戶均可以享受到，更多功能和玩法期待大家去挖掘，也歡迎大家給我們提建議，我們會努力改進！

最後更新：2017-06-19 19:32:21

  上一篇：  五款高推薦度的協同辦公軟件

  下一篇：  全球最昂貴的10大科技產品