# metagis

**Repository Path**: yargs/metagis

## Basic Information

- **Project Name**: metagis
- **Description**: 自创的地图引擎，支持EPSG3857和EPSG4326及基础的地图操作

- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-09-21
- **Last Updated**: 2023-11-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## 开始

![](./readme.png)




### 安装

##### 引入
```html
<script src="https://yargs.gitee.io/metagis/index.js"></script>
```


##### npm安装
```js
npm install metagis
npm i metagis
```

##### npm卸载
```js
npm uninstall metagis
```

### 快速上手

```js
new metaGis("app", {
  center: [102.73020058664703, 25.034912333424444],
  zoom: 6
})
```

如果用的是网络地址或本地js,metaGis示例化的时候加上.default
```js
new metaGis.default("app", {
  center: [102.73020058664703, 25.034912333424444],
  zoom: 6
})
```



## baseLayer 底图

### 高德地图
type = "WMTS"
```js
{
  type: "WMTS",
  url: "https://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8",
}
```
### arcgis WMT 地图
type = "WMS"
```js
  {
    type: "WMS",
    url: "http://localhost:6080/arcgis/rest/services/newhaha/haha/MapServer",
    parameters: {
      dpi: 96,
      transparent: true,
      format: "png8",
      imageSR: 4490,
      f: "image",
      bboxSR: 4490,
    },
  }
```
tip: arcgis WMT 地图的加载尚未完美继承
### igserverWMTS（EPSG4326）地图
option.crs = "EPSG4326"
```js
{
  type: "WMTS", // 这个影像需要 crs: "EPSG4326",
  url: " http://192.168.0.25:6163/igs/rest/mrms/tile/ZCQC5300002021GYX/{z}/{y}/{x}",
}
```


### igserver WMT（EPSG4326）地图
option.crs = "EPSG4326"
option.baseLayer type = 'WMSXYZ'
```js
  {
    type: "WMSXYZ", // 这个影像需要 crs: "EPSG4326",
    url: "http://192.168.0.25:6163/igs/rest/mrms/docs/ZCQCHXZQ",
  },
```
### geojson地图
```js
{
  type: "geojson",
  data: map,
}
```

## 工具栏

目前提供测距（polyline）和测面（polygon）两个功能

```js
toolbar: [
  {
    type: "polyline",
  },
  {
    type: "polygon",
  },
],
```

## drawLayer 要素绘制 

### 点与文字
type = "point"
点和文字集成在一个要素里边，如果有text字段，就会自动加入文字
```js
{
  type: "point",
  // sys: "GCJ02",
  coordinate: [102.73129657902908, 25.047944995715422],
  text: "昆明金平果",
}
```


### 线
type = "polyline"
```js
{
  type: "polyline",
  coordinates: [
    [102.73129657902908, 25.047944995715422],
    [103.73129657902908, 25.047944995715422],
    [102.73129657902908, 26.047944995715422],
  ],
}
```


### 面
type = "polygon"
```js
{
  type: "polygon",
  coordinates: [
    [102.73129657902908, 25.047944995715422],
    [103.73129657902908, 25.047944995715422],
    [102.73129657902908, 26.047944995715422],
  ],
}
```


## 其他操作


### 飞行到点

flyTo(经度，纬度，缩放级别)
不带缩放级别为默认飞行到相同级别
```js
map.flyTo(102.73020058664703, 24.034912333424444)

map.flyTo(102.73020058664703, 24.034912333424444, 10)
```
### 飞行到面

flyRange(点集合)

```js
const ss = [
  [102.73129657902908, 25.447944995715422],
  [102.23129657902908, 29.047944995715422],
  [102.73129657902908, 25.247944995715422],
];
mapaa.flyRange(ss);
```

### 事件

实现了点击事件并可获取点和面的信息
```js
map.on('click',(e) => {
  console.log(e,'我是点击事件的回调');
});
```

### 缩放启用

默认为启用
```js
option.zoomEnable: false, //关闭缩放
```

### 平移启用
```js
dragEnable: false, //关闭拖动
```

## 实现了未开放的功能
svg自定义颜色

geojson地图自定义背景图片

polygon自定义背景图片

鼠标移上去的手性标记

鼠标移上去的高亮

基础动画

不能禁用鼠标移到地图上显示经纬度


## 基础示例

```js
new engine("app", {
  center: [102.73129657902908, 25.047944995715422],
  zoom: 6,
  animate: true,
  baseLayer: [
    {
      type: "WMTS",
      url: "https://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8",
    },
    // {
    //   type: "WMS",
    //   url: "http://localhost:6080/arcgis/rest/services/newhaha/haha/MapServer",
    //   parameters: {
    //     dpi: 96,
    //     transparent: true,
    //     format: "png8",
    //     imageSR: 4490,
    //     f: "image",
    //     bboxSR: 4490,
    //   },
    // },
    {
      type: "geojson",
      data: map,
    },
    // {
    //   type: "WMTS",
    //   url: "https://webrd01.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8",
    // },
  ],
  drawLayer: [
    {
      type: "point",
      coordinate: [102.73129657902908, 25.047944995715422],
      text: "大家好",
    },
    {
      type: "polygon",
      coordinates: [
        [102.73129657902908, 25.047944995715422],
        [103.73129657902908, 25.047944995715422],
        [102.73129657902908, 26.047944995715422],
      ],
    },
  ],
});
```