0.1.7 • Published 3 years ago
@terraqt/elchee v0.1.7
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 属性, 例如 <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)