# @terraqt/elchee > jssdk fro JD Latest version **0.1.7** (published 2021-01-25) · MIT license · 0 weekly downloads ## Install ```sh npm install @terraqt/elchee pnpm add @terraqt/elchee yarn add @terraqt/elchee bun add @terraqt/elchee ``` ## Health **Score 20/100 (F)** — status: abandoned. Positive: esm support; no vulnerabilities. Warnings: low downloads; no types; pre 1.0. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 0.1.7 | | Published | 2021-01-25 | | First published | 2020-04-27 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | ESM + CommonJS | | Dependencies | 7 | | Unpacked size | 308.8 KB | | Known vulnerabilities | 0 (+7 in 1 direct dependencies) | | Install scripts | no | | Author | bryan@terraqt.com | | Maintainers | terraqt | ## Links - npm: https://www.npmjs.com/package/@terraqt/elchee - npm.io page: https://npm.io/package/@terraqt/elchee ## Dependencies (7) - [svelte](https://npm.io/package/svelte.md) ^3.20.1 - [leaflet](https://npm.io/package/leaflet.md) ^1.6.0 - [webpack](https://npm.io/package/webpack.md) ^4.41.6 - [webpack-cli](https://npm.io/package/webpack-cli.md) ^3.3.11 - [leaflet-draw](https://npm.io/package/leaflet-draw.md) ^1.0.4 - [leaflet-side-by-side](https://npm.io/package/leaflet-side-by-side.md) ^2.1.0 - [leaflet-boundary-canvas](https://npm.io/package/leaflet-boundary-canvas.md) ^1.0.0 ## Recent versions - 0.1.7 (latest) — 2021-01-25 - 0.1.6 — 2020-12-14 - 0.1.5 — 2020-12-07 - 0.1.4 — 2020-12-02 - 0.1.3 — 2020-11-23 - 0.1.2 — 2020-11-23 - 0.1.1 — 2020-06-01 - 0.1.0 — 2020-06-01 - 0.0.10 — 2020-05-20 - 0.0.9 — 2020-05-20 - 0.0.8 — 2020-05-13 - 0.0.7 — 2020-05-12 - 0.0.6 — 2020-05-12 - 0.0.5 — 2020-04-29 - 0.0.4 — 2020-04-29 - … 3 more at https://npm.io/package/@terraqt/elchee/versions ## README # 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 `git@git.terraqt.dev: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 属性, 例如
中的 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) ``` --- _Source: https://npm.io/package/@terraqt/elchee · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._