elchee

Terraqt jssdk for JD

Getting Started

Installing

// version is required for private npm
npm install -S @terraqt/elchee

// import component
import sdk from '@terraqt/elchee';

// import styles
import '@terraqt/elchee/dist/style.css';

Building

Clone elchee code to local

[email protected]:qx.front/elchee.git

To build the library:

npm run build

To build the docs:

npm run build:docs

API

sdk methods

sdk.int(target, token)

// target 是 id 属性, 例如 <div id="mMap"></div>中的 mMap
// sdk 的所有其他方法必须在 `sdk.init` 以后调用，否则会抛异常
// 需要自己设定地图容器的宽和高等样式

sdk.init('mMap', 'hardcode toke');

sdk.renderProduct(areaDistrict, dataType)

// areaDistrict, 行政区域枚举值，例如 STRICT_GUANGFU 是 '广福镇'
// dataType, 地图种类，例如 ENUM_DATA_CROP 是 '作物地图'
// tileEnable, 默认为 false, 是否在地图上贴出产品瓦片图


sdk.renderProduct('ENUM_DISTRICT_KAIJIANG', 'ENUM_DATA_LAND');

sdk.fitBounds(geojson)

// 将地图中心适配到对应的 geojson 区域
// geojson, 多边形的 geojson

const geojson = {
  type: 'Feature',
  properties: {},
  geometry: {
    type: 'Polygon',
    coordinates: [
      [
        [104.56787109374999, 35.764343479667176],
        [104.04052734375, 34.75966612466248],
        [105.13916015625, 34.77771580360469],
        [104.56787109374999, 35.764343479667176]
      ]
    ]
  }
};

sdk.fitBounds(geojson);

sdk.drawGeoJson(geojson)

// 该多边形被画在 map上，不受 drawContainer 影响。可以通过调用 `sdk.removeGeoJson` 清除。
// geojson, 多边形的 geojson
// clearPre, 是否在画多边形前移除上一个已画多边形，默认值为 true
// style, 自定义样式，详情请参考：https://leafletjs.com/reference-1.6.0.html#path-option

const geojson = {
  type: 'Feature',
  properties: {},
  geometry: {
    type: 'Polygon',
    coordinates: [
      [
        [104.56787109374999, 35.764343479667176],
        [104.04052734375, 34.75966612466248],
        [105.13916015625, 34.77771580360469],
        [104.56787109374999, 35.764343479667176]
      ]
    ]
  }
};

sdk.drawGeoJson(geojson);

sdk.drawPolygon(geojson, clearPre, style)

// 该多边形被画在 drawContainer 容器中，当调用 `sdk.clearDrawContainer` 方法时会清除多边形。
// geojson, 多边形的 geojson
// clearPre, 是否在画多边形前移除上一个已画多边形，默认值为 true
// style, 自定义样式，详情请参考：https://leafletjs.com/reference-1.6.0.html#path-option

const geojson = {
  type: 'Feature',
  properties: {},
  geometry: {
    type: 'Polygon',
    coordinates: [
      [
        [104.56787109374999, 35.764343479667176],
        [104.04052734375, 34.75966612466248],
        [105.13916015625, 34.77771580360469],
        [104.56787109374999, 35.764343479667176]
      ]
    ]
  }
};

sdk.drawPolygon(geojson);

sdk.drawPolyline(geojson, clearPre, style)

// geojson, 折线的 geojson
// clearPre, 是否在画折线时清除上一个已画折线，默认值为 true
// style, 自定义样式，详情参考 https://leafletjs.com/reference-1.6.0.html#path-option

const coordinates = [
  [111.70898437499999, 35.96022296929667],
  [110.0390625, 33.063924198120645],
  [111.7529296875, 32.13840869677249],
  [114.32373046875, 33.87041555094183],
  [116.6748046875, 31.409912194070973],
  [112.56591796875, 27.955591004642553],
  [108.21533203125, 28.38173504322308],
  [108.47900390625, 24.946219074360084],
  [110.478515625, 24.906367237907997]
];

function drawPolyline(length) {
  const _length = length || coordinates.length - 1
  const geometry = {
    type: 'LineString',
    coordinates: coordinates.slice(0, -length)
  };
  sdk.drawPolyline(geometry);
  setTimeout(() => {
    drawPolyline(_length - 1);
  }, 1000);
}

drawPolyline();

sdk.removeGeoJson, sdk.removePolygon, sdk.removePolyline

sdk.drawGeoJson(geojson, false);
sdk.removeGeoJson();

sdk.polygonDrawer

sdk.polygonDrawer.enable

document.querySelector('#enable-polygon-drawer').addEventListener('click', () => {
  sdk.polygonDrawer.enable();
})

sdk.polygonDrawer.disable

document.querySelector('#disable-polygon-drawer').addEventListener('click', () => {
  sdk.polygonDrawer.disable();
})

sdk.polygonDrawer.deleteLastVertex

document.querySelector('#cancel-last-step').addEventListener('click', () => {
  sdk.polygonDrawer.deleteLastVertex();
})

events

sdk.on and sdk.off

sdk.polygonDrawer.enable();

function onDrawCreate(e) {
  const geojson = e.layer.toGeoJSON();
  sdk.drawPolygon(geojson);
}

sdk.on('draw:created', onDrawCreate);
setTimeout(() => {
  sdk.off('draw:created', onDrawCreate);
}, 6000000)