Wise-map-plus NPM

更新日志: CHANGE.md

使用说明

请提前配置安装Node，npm/yarn，Vue CLI脚手架,建议使用VSCode开发工具;

安装

npm install wise-map-plus

或

yarn add wise-map-plus

官方链接

基础展示
wise-map组件文档
WiseMap介绍
公司官网

引用

把 cesiumLib 拷贝到 public 文件夹中 (cesiumLib 联系管理员获取)
在 index.html 文件中引用

<script type="text/javascript" src="cesiumLib/include-lib.js" libpath="cesiumLib/" include="haoutil,turf,zz3d,zz3d-camera,font-awesome,web-icons,POI,dom2img,ZZWiseMap"></script>

在 vue 工程中 main.js 中引用

import WiseMapPlus from 'wise-map-plus';

import 'wise-map-plus/style.css';

Vue.use(WiseMapPlus);

快速使用

替换App.vue内容

<template>
  <div id="app">
    <ZZCMap
      :mapLabel="mapLabel"
      :baseUrl="baseUrl"
      :list="list"
      :isRotate="true"
      @mapData="inintMapSuccess"
    ></ZZCMap>
    <ZZMangerMapTree
      v-if="isViewer"
      :list="treeList"
      @checkChange="checkChange"
    ></ZZMangerMapTree>
    <ZZMangerBaseLayer v-if="isViewer" :config="config"></ZZMangerBaseLayer>
    <ZZToolbar v-if="isViewer" :checkLayers="checkLayerList"></ZZToolbar>
  </div>
</template>
<script>
export default {
  name: "MapHome",
  components: {},
  data() {
    return {
      baseUrl: "http://localhost:18080",
      list: [
        {
          name: "示例数据",
          resourceId: "Library://示例数据/地图/示例数据.MapDefinition",
          type: "WISEMAP"
        },
      ],
      isViewer: false,
      checkLayerList: [],
      treeList: [],
    };
  },
  mounted() {},
  methods: {
    inintMapSuccess(param) {
      window.viewer = param.viewer;
      this.isViewer = true;
      this.treeList = param.treeList;
    },
    checkChange() {},
  },
};
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  position: absolute;
  width: 100%;
  height: 100%;
}
</style>

启动服务

npm run serve

恭喜你已完成可以预览了！

ZZ3D 配置说明

ZZ3D 是地图渲染显示参数。如：

"map3d": {
    loadImageRequireMode: true, // 按需加载影像模式
    clockViewModel: "2020-09-01T15:00+08:00",  // 场景显示固定时间效果
    homeButton: false, //回到默认视域按钮
    animation: false, //是否创建动画小器件，左下角仪表
    timeline: false, //是否显示时间线控件
    fullscreenButton: false, //右下角全屏按钮
    vrButton: false, //右下角vr虚拟现实按钮
    geocoder: false, //是否显示地名查找控件
    sceneModePicker: false, //是否显示投影方式控件
    navigationHelpButton: false, //是否显示帮助信息控件
    navigationInstructionsInitiallyVisible: false, //在用户明确单击按钮之前是否自动显示
    infoBox: false, //是否显示点击要素之后显示的信息
    selectionIndicator: false, //选择模型是是否显示绿色框,
    shouldAnimate: true,
    showRenderLoopErrors: true, //是否显示错误弹窗信息
    baseLayerPicker: false, //地图底图
    contextmenu: true, //右键菜单
    requestWebgl2: true, // 使用webGL2
    center: {  // 场景中点击复位视角时定位的相机视角。在场景里，可以通过快捷键z+c获取，快捷键z+c能查看当前视角，并复制成功。只需将复制的数据粘贴到此处即可。
        "heading": 357.7,
        "pitch": -49.5,
        "roll": 360,
        "x": 102.867100,
        "y": 23.001642,
        "z": 22263
    },
    baseterrains:[{     // 配置地形数据
        "url": "../assets/mapdata/Terrain",
        "visible": true
    }],
    terrainBtns:[], // 配置切换地形按钮
    "navigation": {
            "legend": {       // 比例尺
                "left": "0px",
                "bottom": "-1px"
            },
            "compass": {     // 导航球
                "bottom": "240px",
                "right": "2px"
            }
        },
    basemaps: []   // 配置地球地图
}

以上罗列了部分场景初始化的常见参数，如果想使用或了解更多参数的含义，请联系相关开发者。

地形配置

/**
    * 1.处理逻辑
    *      config.terrainBtns为空时不显示高程按钮
    *      取config.baseterrains最后一个visble为true的高程信息（与zz3d一致），根据其id在config.terrainBtns中找对应高程信息，根据此信息显示按钮样式。
    *          config.baseterrains中visible全为false时取config.terrainBtns第一个高程信息，根据此信息显示按钮样式。
    *      鼠标悬浮在显示按钮上时，展开按钮列表，隐藏显示按钮对应的按钮。
    *      点击对应按钮后把点击按钮的样式覆盖到显示按钮内。
    * 2.参数说明
    *      id：唯一标识
    *      mode：高程类别（terrainModeNone、terrainModeOnline、terrainModeOffline）
    *      fontClass：按钮显示字体图标样式
    *      type：高程类型
    *      url：高程地址
    *      tooltip：提示语
    *  config.baseterrains中信息
    *      visible为true的信息必要参数要有id，且在config.terrainBtns中有对应id。
    *  config.terrainBtns中
    *      关闭高程的按钮信息必要参数为 mode="terrainModeNone"。
    *  3.其它
    *      按钮样式优先取fontClass，其次根据mode取默认设置好的样式。
    *      按钮显示顺序为config.terrainBtns中先后顺序。
    *      type为高程类型，支持
    *                  cesium官方在线的 - "ion"、"cesium"
    *                  谷歌地球地形服务 - "gee"、"google"
    *                  ArcGIS地形服务 - "arcgis"
    *                  无地形 - "ellipsoid"
    *                  自定义的 - 空或其它
    *      config.terrainBtns中至少有两个按钮信息。
    *
*/
"terrainBtns": [
        {
            "name": "关闭高程",
            "tooltip": "关闭高程",
            "mode": "terrainModeNone"
        },
        {
            "name": "在线高程",
            "tooltip": "在线高程",
            "id": "onlineTerrainBtn",
            "url": "https://lyzzsoft500.obs.cn-north-1.myhuaweicloud.com/mapdata/terrain",
            "mode": "terrainModeOnline",
            "fontClass": "iconfont sk-zaixiangaocheng3"
        },
        {
            "name": "离线地形",
            "tooltip": "离线地形",
            "url": "../assets/mapdata/Terrain",
            "mode": "terrainModeOffline",
            "id": "selectTerrain"
        }
    ]