# emapjs-2d

**Repository Path**: giserGLL/emapjs-2d

## Basic Information

- **Project Name**: emapjs-2d
- **Description**: 基于vue2和openlayers开发的2d地图插件,支持百度/高德/arcgis/天地图等主流商业/开源地图。喜欢的请点个赞支持
- **Primary Language**: JavaScript
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2021-10-08
- **Last Updated**: 2025-12-29

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<!--
 * @Author: your name
 * @Date: 2021-09-10 14:15:57
 * @LastEditTime: 2021-10-14 18:40:09
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \emapjs\README.md
-->
# emapjs-2d
emapjs-2d是基于开源GIS引擎openlayers封装的插件工具，利用VUE组件混入的方式，来发挥其在VUE项目中可复用的特性。emapjs集成了国内目前主流的商业地图(百度/高德/天地图/ArcGIS)，可以实现不同地图的无缝切换而不用修改你的代码。目前仅支持二维地图，VUE版本为2.0。三维地图请参考兄弟项目emapjs-3d。

## Project setup(安装项目依赖)
```
npm install
```

## Compiles and hot-reloads for development(运行)
```
npm run serve
```
## Configure map(配置地图)
  emap-2d目前提供了对高德/百度/智图GeoQ(ArcGIS地图)/天地图的支持，且同种坐标系地图可以叠加，比如智图叠加高德路网，这里笔者收集了一些地图资源作为配置项进行加载，读者可以任意切换查看效果。注意百度地图只能叠加百度路网，暂时设置智图和高德投影为3857，天地图为4326。
  |  ![avatar](src/assets/img/bdmap.png) 百度地图 | ![avatar](src/assets/img/gdmap.png) 高德地图| ![avatar](src/assets/img/arcgis_bdroad.png) ArcGIS地图 + 高德路况| ![avatar](src/assets/img/tdt.png) 天地图 |
|  :-----------------------------------------------------------: | :-----------------------------------------------------------: | :------------------------------------------------------------------: | :--------------------------------------------------------------: |
```
--->src/utils/mapConfig.js
  basemaps: [
    // {
    //   url: 'http://172.16.21.202:6080/arcgis/rest/services/sccd/sscd_vec/MapServer/tile/{z}/{y}/{x}',
    //   label: '一张图地图深色',
    //   type: 'tiled',
    //   source: 'tdt'
    // }
    // {
    //   url: 'http://map.geoq.cn/arcgis/rest/services/ChinaOnlineStreetPurplishBlue/MapServer',
    //   label: '易图通深色',
    //   type: 'tiled',
    //   source: 'arcgis'
    // },
    // {
    //   url: 'http://api0.map.bdimg.com/customimage/tile?&x={x}&y={y}&z={z}&udt=20191205&scale=1&ak=5ieMMexWmzB9jivTq6oCRX9j&customid=midnight',
    //   label: '百度深色地图',
    //   type: 'tiled',
    //   source: 'baidu',
    //   subdomains: '0123456789'
    // },
    // {
    //   url: 'http://wprd0{1-4}.is.autonavi.com/appmaptile?lang=zh_cn&size=1&style=7&x={x}&y={y}&z={z}',
    //   label: '高德浅色地图',
    //   type: 'tiled',
    //   source: 'gaode',
    //   subdomains: '0123456789'
    // },
    // {
    //   url: 'http://its.map.baidu.com:8002/traffic/TrafficTileService?time=1632307194750&level={z}&x={x}&y={y}&ak=5ieMMexWmzB9jivTq6oCRX9j',
    //   label: '百度实时路况',
    //   type: 'tiled',
    //   source: 'baidu',
    //   subdomains: '0123456789'
    // },
    // {
    //   url: 'https://tm.amap.com/trafficengine/mapabc/traffictile?v=1.0&t=1&x={x}&y={y}&z={z}',
    //   label: '高德实时路况',
    //   type: 'tiled',
    //   source: 'gaode'
    // },
    {
      url: 'https://t0.tianditu.gov.cn/DataServer?T=vec_c&x={x}&y={y}&l={z}&tk=0081cb9ccd23fc5fcdfa07030f974e03',
      label: '天地图',
      type: 'tiled',
      source: 'tdt'
    },
    {
      url: 'https://t0.tianditu.gov.cn/DataServer?T=cva_c&x={x}&y={y}&l={z}&tk=0081cb9ccd23fc5fcdfa07030f974e03',
      label: '天地图',
      type: 'tiled',
      source: 'tdt'
    }
  ```
  ## Load Map(加载地图)
  ```
  --->src/views/index/gis/MapContainer.vue
  导入emap文件
  import emap2d from '@/utils/emap-2d.js';
  导入地图配置文件
  import mapConfig from '@/utils/mapConfig';
  调用地图加载方法
  this.initMap({mapConfig})
  ```


  ## 调用地图方法
  ### 1.initMap 调用地图
  ```
  this.initMap({mapConfig}).then(() => {
    //地图加载完成后的操作
    console.log('地图加载完成！')
  })
  ```
  ### 2.addOverlays 添加覆盖物
  如果说前面加载一幅地图是基础，那么添加一个marker就是对前面成果的检验。我们可以先去[高德坐标拾取器](http://www.google.com/)上点击一个位置获取坐标，注意这里获取的坐标为火星坐标，我选择的是天府广场正中心,横纵坐标分别为(104.06588561676243, 30.657446236806237)。
  
  ```
      --->src/views/index/gis/MapContainer.vue--->addPts
      const TianfuSquare = [104.06588561676243, 30.657446236806237];

      const overlaysObj = {
        defaultType: 'testPt',
        defaultSymbol: {
          type: 'point',
          url: require('@/assets/img/position.png')
        },
        overlays: [
          {
            id: 'testPt001',
            type: 'test',
            geometry: {
              coordinates: TianfuSquare,
              coordinateSystem: 'GCJ02',
              type: 'point'
            }
          }
        ],
        index: 2
      };

      this.addOverlays(overlaysObj);
  ```
  尝试切换为百度地图，发现点位仍位于正确的位置。这得益于在emap中对坐标和地图投影进行了判断并进行了正确的处理。
  读者可以继续尝试一次性添加多个覆盖物，但是出于设计考虑，同时只能选择点线面的一种。
  ### 2.addPopup 添加弹窗
  地图和矢量覆盖物展示的信息有限，更多的信息需要以弹窗的形式展示。利用VUE组件可复用的特性，地图上的弹窗可设计为一个组件，显示到正确的位置。