开始

安装

引入

<script src="https://yargs.gitee.io/metagis/index.js"></script>

npm安装

npm install metagis
npm i metagis

npm卸载

npm uninstall metagis

快速上手

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

如果用的是网络地址或本地js,metaGis示例化的时候加上.default

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

baseLayer 底图

高德地图

type = "WMTS"

{
  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"

  {
    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"

{
  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'

  {
    type: "WMSXYZ", // 这个影像需要 crs: "EPSG4326",
    url: "http://192.168.0.25:6163/igs/rest/mrms/docs/ZCQCHXZQ",
  },

geojson地图

{
  type: "geojson",
  data: map,
}

drawLayer 要素绘制

点与文字

type = "point" 点和文字集成在一个要素里边，如果有text字段，就会自动加入文字

{
  type: "point",
  // sys: "GCJ02",
  coordinate: [102.73129657902908, 25.047944995715422],
  text: "昆明金平果",
}

线

type = "polyline"

{
  type: "polyline",
  coordinates: [
    [102.73129657902908, 25.047944995715422],
    [103.73129657902908, 25.047944995715422],
    [102.73129657902908, 26.047944995715422],
  ],
}

面

type = "polygon"

{
  type: "polygon",
  coordinates: [
    [102.73129657902908, 25.047944995715422],
    [103.73129657902908, 25.047944995715422],
    [102.73129657902908, 26.047944995715422],
  ],
}

其他操作

飞行到点

flyTo(经度，纬度，缩放级别) 不带缩放级别为默认飞行到相同级别

map.flyTo(102.73020058664703, 24.034912333424444)

map.flyTo(102.73020058664703, 24.034912333424444, 10)

事件

实现了点击事件并可获取点和面的信息

map.on('click',(e) => {
  console.log(e,'我是点击事件的回调');
});

缩放启用

默认为启用

option.zoomEnable: false, //关闭缩放

平移启用

dragEnable: false, //关闭拖动

实现了未开放的功能

svg自定义颜色

geojson地图自定义背景图片

polygon自定义背景图片

鼠标移上去的手性标记

鼠标移上去的高亮

基础动画

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

基础示例

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],
      ],
    },
  ],
});