sgmapgd

v0.4.4

Published

7 months ago

这是一个基于高德地图的React地图引擎组件，实现指定中心点的卫星地图显示，航拍或手绘高清地图瓦片加载，位置选择，区块划分，路网规划等功能。

Downloads

0High
0Medium
0Low

sigutech

SGMapGD

这是一个基于高德地图的React地图引擎组件，实现指定中心点的卫星地图显示，航拍或手绘高清地图瓦片加载，位置选择，区块划分，路网规划等功能。

当前版本

v0.4.4 polyline增加connected属性用于表示道路连通性

v0.4.3 强制在pickcenter模式下不加载瓦片

v0.4.2 修复轨道分支branch属性不能修改问题

v0.4.1 修复预览页面设备详情框不能关闭的问题增加了轨道类型的路网线段properties.branch字段

v0.4.0 设备marker增加focus效果

v0.3.9 优化组件大小处理部分bug

v0.3.6 修复路网线段距离修正功能数据保存不生效的问题

v0.3.5 优化路网在非编辑模式下的显示

v0.3.4 去除部分调试日志

v0.3.3 优化地图缩放大小将地图secruitykey内置到组件，并引出配置参数

v0.3.2 调整设备marker样式

v0.2.9 调整地块轮廓线宽度为4

v0.2.8 修复路网不能点击的问题 example中增加preview，通过mqtt实现实时监测

v0.2.7 折线路网增加measure(距离，单位米)字段

v0.2.6 修复blockEditClick点击事件坐标位置变化的问题修复其它bug

v0.2.5 修复marker双击事件，并增加click事件处理修复地块图片显示大小问题路网编辑功能中，针对直线路网增加道路类似字段，并增加轨道类型（geojson中为properties.type='track'）

v0.2.4 坐标拾取模式下，增加双击重拾坐标为事件坐标点功能重新升级高德地图内核至2.1Beta，增加显示地形图的选项（功能暂只提供体验，非完成版）完善区块管理相关功能，增加区块管理相关事件（详细事件使用见example）

v0.2.3 增加地块渲染及删除功能修复geojson为空异常

v0.2.2 升级SDK至2.1beta版增加showTerrain参数，用于控制3D地形图的显示 v0.2.1 优化曲线绘图过程中的点击确认问题修复某些情况下路网对象id重复造成绘图失败的问题

v0.1.9 增加路网组件的editable功能，但组件只传geojson数据，MapMode!=MapMode.geo时，只能查看路网，不能修改优化组件代码结构为marker和markers增加w,h属性，用于设置不同图标的宽高，默认为24x24

v0.1.8 所有路网组件（点、线、面）的选取、删除等操作路网组件属性不同属性面板功能框架及界面完成

v0.1.7 修复css样式问题

v0.1.6 添加坐标点拾取pickup模式

v0.1.4

完成路网数据传入传出；完成直线、曲线绘制和修改处理瓦片默认加载级别范围为15-22，加载高清瓦片单点绘制（虽然感觉没啥用，但是还是要有）区域绘制优化程序结构

待更新功能： 针对不同路网组件，增加如方向、区域类型、限速、路宽等参数设置线组件方向（单向、双向通行）处理两条不相交线（直线、曲线）修改为相交的处理（需要判断线段的起点终点拖动过程中与其它线段的相交吸附判断）

目录结构

 -src                      //组件源文件目录
 --index.css               //组件主样式文件
 --index.tsx               //组件主代码
 -example                   //组件使用示例程序

如何使用

示例代码运行

yarn install
cd example
yarn run start

组件安装

yarn add sgmapgd / npm install sgmapgd

使用前说明

组件中所有涉及地理坐标均采用WGS84（即大地坐标系），包括输入参数（含中心点、点、线和多边形等），和输出参数。输入的坐标参数由组件自行转换成GCJ02坐标系，输出参数也由组件转换回WGS84.

组件引用

import * as React from 'react';
import * as ReactDOM from 'react-dom';



import SGMapGD from 'SGMapGD';

const App = () => {
  return (
    <div>
     <SGMapGD mapkey="0cc03b6fc083ecfc0c4b9f61769b643e" center={[114.35851078387346,30.469962248474555]} 
      zoom={21} 
      tileurl="https://www.sigucloud.cn/map2/{z}/{x}_{y}.png" 
      mapmode={MapMode.geo} 
      geojson={geojson}
      onCenterChange={(c)=>{console.log(c)}} 
      onZoomChange={(z)=>{console.log(z);}}
      onGeojsonChange={(g)=>{console.log(g);}}
      />
    </div>
  );
};

ReactDOM.render(<App />, document.getElementById('root'));

可用属性和方法

属性

回调事件方法

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme