arcgis api 4.x for js 圖層拓展篇之mapvLayer(附源碼下載)

因為在項目開發過程中，使用的arcgis js api版本是4.7，並不能支持客戶端渲染熱力圖，想到arcgis js api 4.x的渲染是基於canvas，故琢磨着是否能借助類似於mapV、echart、heatmap.js等同樣基於canvas的優秀可視化庫來操作，本篇主要講述拓展支持mapV圖層的過程，我們可以參看mapV的相關說明，它的渲染是基於我們的屏幕坐標，而在arcgis api js 4.x中便有屏幕坐標和地理坐標的互相轉換，所以這便是拓展的關鍵點，好了，我們來上手吧。

效果圖：

安裝mapV

• npm install mapv

引用mapV對象(DataSet、圖層對象)

• import { DataSet, canvasDrawHeatmap, canvasDrawHoneycomb } from 'mapv' ;

初始化mapV圖層參數

constructor(view, option) {
this.view = null;
this.box = null;
this.mapvOption = {};
this.mapv_ctx = null;
this.map_ExtentChange_Listener = null;
this.map_RotateView_Listener = null;
this._init(view, option);
}
_init(view, option) {
this._setBaseMap(view);
this._setMapvOption(option);//設置mapv圖層參數
this.createLayer(view);//創建圖層
}sv

創建mapV圖層對象，並加入到地圖容器

createLayer(view) {
if (this.mapvOption.geoData) {
if (!document.querySelector('#mapv')) {
let box = this.box = document.createElement("canvas");
box.setAttribute("id", "mapv")
box.setAttribute("name", "mapv")
box.style.width = view.width + 'px';
box.style.height = view.height + 'px';
box.style.position = "absolute";
box.style.top = 0;
box.style.left = 0;
let parent = document.getElementsByClassName("esri-view-surface")[0];
parent.appendChild(box);
}
this.getCanvas();//獲取canvas圖層
this.renderLayer();//渲染圖層
this.startMapEventListeners();//開啟地圖的監聽事件
}
else {
document.querySelector('#mapv') && this.removeCanavs();
}
}
getCanvas() {
let canvas = document.querySelector('#mapv');
canvas.width = document.body.offsetWidth;
canvas.height = document.body.offsetHeight;
this.mapv_ctx = canvas.getContext('2d');
}

渲染mapV圖層到地圖上

renderLayer() {
let { type, visualMap } = this.mapvOption, renderLyr;
let dataset = this.createDataSet();//構建圖層數據及轉換
switch (type) {
case "heatmap"://熱力圖
renderLyr = canvasDrawHeatmap.draw(this.mapv_ctx, dataset, visualMap);
break;
case "honeycomb"://蜂窩圖
renderLyr = canvasDrawHoneycomb.draw(this.mapv_ctx, dataset, visualMap);
break;
default:
renderLyr = null;
break;
}
}

構建圖層數據及坐標轉換

createDataSet() {
let { geoData } = this.mapvOption;
let data = this.geo2Screen(geoData);
data = new DataSet(data);
return data;
}
geo2Screen(geoData) {
let { view } = this;
return geoData.map((item, index) => {
let temp = {};
let mapPoint = {
……

更多的詳情見：GIS之家小專欄

文章尾部提供源代碼下載，對本專欄感興趣的話，可以關注一波