@kzlib/kmap - npm explorer

$3

📦 安装



npm i @kzlib/kmap --save





🔨 使用

 javascript

import {

  initMap, // 初始化地图

  initMapBD09, // 初始化BD09地图，例如加载百度底图

  wgs84togcj02, // wgs84坐标转jcg02坐标

  gcj02towgs84, // jcg02坐标转wgs84坐标

  getRaius, // 画圆时你发现传入的半径，与实际画出来的不符合。获取'米'对应的投影长度

  getRaius2, // 获取投影长度对应的'米'

  formatLength, // 获取一条线的长度，单位为km或者m

  TraceAnimate // 绘制轨迹动画（可以跑一辆车等等）

} from '@kzlib/kmap';

 javascript 

// 示例代码---初始化地图

import {initMap} from '@kzlib/kmap';

const map = initMap('kzKyk', [121.24370643004204, 31.36215757687218], ['https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}']);// 返回Map实例



// 示例代码---轨迹动画（一辆车顶着车牌跑）

import {TraceAnimate} from '@kzlib/kmap';

const traceList = [[121.35517654868337, 31.369691409110867], [121.3553178367902, 31.36971265754803], [121.35568758258347, 31.369697283933963], [121.35585191580782, 31.369721571248128], [121.35622166741209, 31.369822230265], [121.35719263227605, 31.370150968917695], [121.36169141220505, 31.371320671352603], [121.36184567154734, 31.370985811727934], [121.36194485634338, 31.370981967216764], [121.36203803142014, 31.3709981192116], [121.36345769190204, 31.371499489767235], [121.36264933315064, 31.372931675891166], [121.36250810405242, 31.373298567767232], [121.36241493399203, 31.37332643032966], [121.36228368851506, 31.37330221689603], [121.35990711590776, 31.37230411410052], [121.35981794405251, 31.37229596682774], [121.35974781408241, 31.372350869796144], [121.35941124067038, 31.373213587029202], [121.35974781408241, 31.372350869796144], [121.35981794405251, 31.37229596682774], [121.35990711590776, 31.37230411410052], [121.36228368851506, 31.37330221689603], [121.36241493399203, 31.37332643032966], [121.36250810405242, 31.373298567767232], [121.36264933315064, 31.372931675891166], [121.36345769190204, 31.371499489767235], [121.3642281114101, 31.371762753837785]];

const animate = new TraceAnimate();

const id = animate.animateLine(map, traceList, true, '沪AB1234', 200, true, true).get('id')

animate.startAnimation(id);



// 示例代码---画半径为50m的圆, 如果直接设置为50，发现实际画出来的圆半径不是50m

import { Feature } from 'ol';

import Circle from 'ol/geom/Circle';

import {getRaius} from '@kzlib/kmap'; // 将’米‘转为投影中的距离

 const feature = new Feature({

  geometry: new Circle(center, getRaius(50, map))

});



// 示例代码---获取Circle的半径（以米为单位）

import Circle from 'ol/geom/Circle';

import {getRaius2} from '@kzlib/kmap'; // 将投影中的距离转为’米‘

const radius = getRaius2(circle.getRadius(), map);

📦 安装

npm i @kzlib/kmap --save

🔨 使用

javascript
import {
initMap, // 初始化地图
initMapBD09, // 初始化BD09地图，例如加载百度底图
wgs84togcj02, // wgs84坐标转jcg02坐标
gcj02towgs84, // jcg02坐标转wgs84坐标
getRaius, // 画圆时你发现传入的半径，与实际画出来的不符合。获取'米'对应的投影长度
getRaius2, // 获取投影长度对应的'米'
formatLength, // 获取一条线的长度，单位为km或者m
TraceAnimate // 绘制轨迹动画（可以跑一辆车等等）
} from '@kzlib/kmap';

javascript
// 示例代码---初始化地图
import {initMap} from '@kzlib/kmap';
const map = initMap('kzKyk', [121.24370643004204, 31.36215757687218], ['https://webrd01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}']);// 返回Map实例

// 示例代码---轨迹动画（一辆车顶着车牌跑）
import {TraceAnimate} from '@kzlib/kmap';
const traceList = [[121.35517654868337, 31.369691409110867], [121.3553178367902, 31.36971265754803], [121.35568758258347, 31.369697283933963], [121.35585191580782, 31.369721571248128], [121.35622166741209, 31.369822230265], [121.35719263227605, 31.370150968917695], [121.36169141220505, 31.371320671352603], [121.36184567154734, 31.370985811727934], [121.36194485634338, 31.370981967216764], [121.36203803142014, 31.3709981192116], [121.36345769190204, 31.371499489767235], [121.36264933315064, 31.372931675891166], [121.36250810405242, 31.373298567767232], [121.36241493399203, 31.37332643032966], [121.36228368851506, 31.37330221689603], [121.35990711590776, 31.37230411410052], [121.35981794405251, 31.37229596682774], [121.35974781408241, 31.372350869796144], [121.35941124067038, 31.373213587029202], [121.35974781408241, 31.372350869796144], [121.35981794405251, 31.37229596682774], [121.35990711590776, 31.37230411410052], [121.36228368851506, 31.37330221689603], [121.36241493399203, 31.37332643032966], [121.36250810405242, 31.373298567767232], [121.36264933315064, 31.372931675891166], [121.36345769190204, 31.371499489767235], [121.3642281114101, 31.371762753837785]];
const animate = new TraceAnimate();
const id = animate.animateLine(map, traceList, true, '沪AB1234', 200, true, true).get('id')
animate.startAnimation(id);

// 示例代码---画半径为50m的圆, 如果直接设置为50，发现实际画出来的圆半径不是50m
import { Feature } from 'ol';
import Circle from 'ol/geom/Circle';
import {getRaius} from '@kzlib/kmap'; // 将’米‘转为投影中的距离
const feature = new Feature({
geometry: new Circle(center, getRaius(50, map))
});

// 示例代码---获取Circle的半径（以米为单位）
import Circle from 'ol/geom/Circle';
import {getRaius2} from '@kzlib/kmap'; // 将投影中的距离转为’米‘
const radius = getRaius2(circle.getRadius(), map);