MetaBaseMap 底图使用说明

组件 API

版本：v1.5

使用方法

1. 本组件依赖于 openalyers6 以上版本

2. npm 依赖：

  "ol": "8.2.0",
  "axios": "0.27.2",
  "lodash-es": "^4.17.21",
  "@turf/turf": "^6.5.0",
  "geobuf": "^3.0.2",
  "pbf": "^3.2.1",
  "proj4": "^2.15.0",

3. 将 meta-base-layer 文件夹放在程序中

4. main.js 中引入 ol-prototype.js

5. 调用【ol 实例】.addMetaGisBaseMap(['水务图'])即可加载水务图底图

6. 调用【ol 实例】.removeMetaGisBaseMap()即可移除水务图底图

7. 调用【ol 实例】.setCloseMouseOverEvent(mapId, isClose)即可设置是否关闭鼠标经过悬浮事件

8. 调用【ol 实例】.registerMouseClickEvent(mapId, hitTolerance, callback)即可注册鼠标点击事件

mapId：地图id
hitTolerance：点击容差
callback：点击回调函数

代理

请求了后台接口，需要配置代理，代理如下：
如果部署在甲三IP是：192.168.183.78:9992
如果部署在金山云上IP是：http://172.26.68.142/prod-api

开发环境

  "/meta-gis-api": {
    target: "http://192.168.183.78:9992",//甲三号开发环境
    // target: "http://172.26.68.142/prod-api",//金山云开发环境
    changeOrigin: true,
    rewrite: (path) => path.replace(/^\/meta-gis-api/, ""),
  },
  "/admin/profile": {
    target: "http://192.168.183.78:9992",//甲三号开发环境
    // target: "http://172.26.68.142/prod-api",//金山云开发环境
    changeOrigin: true,
  },
  "/profile": {
    target: "http://192.168.183.78:9992/admin",//甲三号开发环境
    // target: "http://172.26.68.142/prod-api/admin",//金山云开发环境
    changeOrigin: true,
  },

部署环境

甲三号代理直接配置http://192.168.183.78:9992就行，金山云代理有写不一样： 金山云部署代理

location /meta-gis-api/{
    proxy_set_header Host $http_host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header REMOTE-HOST $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_pass http://172.16.7.88/prod-api/;
}

location /admin/profile/ {
  proxy_pass http://172.16.7.88/prod-api/admin/profile/;
}

location /profile/ {
  proxy_pass http://172.16.7.88/prod-api/admin/profile/;
}

升级日志

v1.0 (2024-05-15)

• 初始版本发布
• 支持加载北京市水务一张图基础底图