mars3d初识

const path = require("path");
const webpack = require("webpack");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");

module.exports = {
  publicPath: "/",
  assetsDir: "static",
  outputDir: "dist",
  lintOnSave: true, // 是否开启eslint
  productionSourceMap: false, // 不需要生产环境的 source map
  filenameHashing: true, // 文件名哈希
  // 它支持webPack-dev-server的所有选项
  devServer: {
    host: "localhost", // 也可以直接写IP地址这样方便真机测试
    port: 3001, // 端口号
    open: true, // 配置自动启动浏览器
  },
  configureWebpack: (config) => {
    const cesiumSourcePath = "node_modules/mars3d-cesium/Build/Cesium/"; // cesium库安装目录
    const cesiumRunPath = "./mars3d-cesium/"; // cesium运行时路径

    let plugins = [
      // 标识cesium资源所在的主目录，cesium内部资源加载、多线程等处理时需要用到
      new webpack.DefinePlugin({
        CESIUM_BASE_URL: JSON.stringify(
          path.join(config.output.publicPath, cesiumRunPath)
        ),
      }),
      // Cesium相关资源目录需要拷贝到系统目录下面（部分CopyWebpackPlugin版本的语法可能没有patterns）
      new CopyWebpackPlugin({
        patterns: [
          {
            from: path.join(cesiumSourcePath, "Workers"),
            to: path.join(config.output.path, cesiumRunPath, "Workers"),
          },
          {
            from: path.join(cesiumSourcePath, "Assets"),
            to: path.join(config.output.path, cesiumRunPath, "Assets"),
          },
          {
            from: path.join(cesiumSourcePath, "ThirdParty"),
            to: path.join(config.output.path, cesiumRunPath, "ThirdParty"),
          },
          {
            from: path.join(cesiumSourcePath, "Widgets"),
            to: path.join(config.output.path, cesiumRunPath, "Widgets"),
          },
        ],
      }),
      new NodePolyfillPlugin(),
    ];
    return {
      module: { unknownContextCritical: false }, // 配置加载的模块类型，cesium时必须配置
      plugins: plugins,
    };
  },
  css: {
    // 是否使用css分离插件
    extract: true,
    // 开启 CSS source maps，一般不建议开启
    sourceMap: false,
    // css预设器配置项
    loaderOptions: {
      sass: {
        additionalData: `@import "mars3d-cesium/Build/Cesium/Widgets/widgets.css";`,
      },
    },
  },
};

定义`Mars3dMap`实体类

class Mars3dMap 用于初始化 map 和定义默认 center position! 相机显示位置!

Mars3dMap.js

import Vue from "vue";
import "mars3d/dist/mars3d.css";
import * as mars3d from "mars3d";
//导入mars3d插件（按需使用，需要先npm install）
import "mars3d-space";
import { isObject } from "@/utils";
// 默认配置选项
// import defaultOptions from "@/config/mars3d/index";

// 挂载到 vue 原型
Vue.prototype.$mars3d = mars3d;

class Mars3dMap {
  constructor(containerEl, options, center = null) {
    this.containerEl = containerEl;
    if (!options) return;

    this.defaultOptions = options;
    this.mapInstance = this.initMap(this.containerEl, this.defaultOptions);
    this.mars3d = mars3d;
    // 设置默认位置
    center && this.setDefaultPosition(center);
  }
  /* 
    初始化 map
    @param {String} containerEl Element容器id
    @param {Object} options 自定义配置项
  */
  initMap(containerEl, options) {
    if (!containerEl) return {};
    let mapInstance = new mars3d.Map(containerEl, options);

    return mapInstance;
  }
  // 设置scene场景参数
  setDefaultPosition(center = null) {
    if (!center || (center && !isObject(center))) return;
    let { lng, lat } = center;
    const options = {
      /* 
          lat 精度
          lng 纬度
          alt 相机上下高度
          pitch 相机角度
          lat":39.908284,"lng":116.397529 -> 北京城区
          roll 翻滚角度值，绕经度线旋转角度, -90至90
        */
      center: {
        lat: lat || 39.908284,
        lng: lng || 116.397529,
        alt: 171187,
        heading: 0,
        pitch: -90,
        roll: 0,
      },
    };
    this.mapInstance.setSceneOptions(options);
  }
}

export default Mars3dMap;

创建`mars3d-map.vue`组件

定义mars3d-map 公共组件! 负责地图初始化事件注册初识化geojson矢量图!

1
2
3

<template>
  <div id="mars3dContainer" class="mars3d-container"></div>
</template>

import Mars3dMap from "@/utils/mars3d/config";
// import { $message, $notify, $alert } from "@mars/components/mars-ui/index vue3"
let MARS3D_INSTANCE = null; // mars3d 封装类
let MAP_INSTANCE = null; // map 实例
let GAODE_POI_API = null; // GAODE poi 查询∏
let GRAPHIC_LAYER = null; // graphic
export default {
  name: "MarsMap",
  props: {
    baseMap: {
      type: String,
      defaultValue: "蓝色底图"
    }, 
    geoJsonUrl: {
      type: String,
      default: "https://geo.datav.aliyun.com/areas_v3/bound/110000_full.json",
    },
    center: {
      type: Object,
      default: () => {
        return {
          lng: 116.397529,
          lat: 39.908284,
        };
      },
    },
    events: {
      type: Array,
      default: () => ["load"],
    },
  },
  data() {
    return {
      // 高德 POI 搜索用到的 key
      gaodeKey: "f7121c551259f70a82ee8569c880b2e7",
    };
  },
  methods: {
    /* 
      获取线上 default config.json
    */
    async getDefaultConfig() {
      let configUrl = "http://mars3d.cn/config/config.json";
      let { map3d: options } = await this.$mars3d.Util.fetchJson({
        url: configUrl,
      });
      // 去除右上角控件control -> 底图影响选择器
      options.control.baseLayerPicker = false;
      // 关闭地形
      options.terrain.show = false;
      return options;
    },
    // 初始化地图
    async initMars3d() {
      const options = await this.getDefaultConfig();
      console.log("options", options)
      MARS3D_INSTANCE = new Mars3dMap("mars3dContainer", options, this.center); //支持的参数请看API文档：http://mars3d.cn/api/Map.html
      // 获取地图实例
      MAP_INSTANCE = MARS3D_INSTANCE.mapInstance;
      // 矢量图层
      GRAPHIC_LAYER = new this.$mars3d.layer.GraphicLayer();
      // 高德 POI 查询
      GAODE_POI_API = new this.$mars3d.query.GaodePOI({
        // 高德 key
        key: [this.gaodeKey],
      });
      console.log("MARS3D_INSTANCE", MARS3D_INSTANCE);
      console.log("MAP_INSTANCE", MAP_INSTANCE);
      console.log("MARS3D", this.$mars3d);

      // 设置底图图层 2017 蓝色底图
      this.setBaseMap(this.baseMap);
      // console.log("MAP_INSTANCE");
      // 注册 map 事件
      this.registEvent(["dblClick"]);
      // 加载 geojson 矢量图
      this.showGeojson(this.geoJsonUrl);
    },
    // 注册事件
    registEvent(defaultEvents = []) {
      let events = defaultEvents.concat(this.events);
      // console.log("registEvent", events);
      // map loaded
      events.map((key) => {
        // load -> onLoad
        let eventKey = `${key.substring(0, 1).toUpperCase()}${key.substring(
          1,
          key.length
        )}`;
        // console.log("eventKey", eventKey);
        eventKey &&
          MAP_INSTANCE.on(this.$mars3d.EventType[key], (e) =>
            this.$emit(`on${eventKey}`, e)
          );
      });
      // map click
    },
    // 注销绑定事件
    offEventsBind() {
      let eventTypes = this.events.map((key) => this.$mars3d.EventType[key]);
      MAP_INSTANCE.off(eventTypes);
    },
    /* 
      radius	number	可选相机距离目标点的距离（单位：米）
      heading	number	可选方向角度值，绕垂直于地心的轴旋转角度, 0至360
      pitch	number	可选俯仰角度值，绕纬度线旋转角度, -90至90
      roll	number	可选翻滚角度值，绕经度线旋转角度, -90至90
      duration	number	可选飞行持续时间（秒）。如果省略，内部会根据飞行距离计算出理想的飞行时间。
    */
    // 获取地图中心当前经纬度
    getCenter() {
      return MAP_INSTANCE.getCenter();
    },
    // 定位至目标点(非相机位置)
    flyToPoint([lng, lat], options = { pitch: -45 }) {
      MAP_INSTANCE.flyToPoint([lng, lat], options);
    },
    // 设置相机位置
    /* 
      @param cameraView Object
      @param options Object
    */
    setCameraView(cameraView = {}) {
      /* 
        lng	number	经度值, 180 - 180
        lat	number	纬度值, -90 - 90
        alt	number	可选高度值
        heading	number	可选方向角度值，绕垂直于地心的轴旋转角度, 0至360
        pitch	number	可选俯仰角度值，绕纬度线旋转角度, -90至90
        roll	number	可选翻滚角度值，绕经度线旋转角度, -90至90
      */
      MAP_INSTANCE.setCameraView(cameraView, {});
    },
    // 设置basemap地图图层
    /* 
      @params basemap 可以是 id 或者是 name
      [{"id": 10,"name": "地图底图"},
      {"id": 2021,"name": "谷歌影像"},
      {"id": 1,"name": "天地图影像"},
      {"id": 4,"name": "天地图电子"},
      {"id": 7,"name": "高德影像"},
      {"id": 11,"name": "高德电子"},
      {"id": 12,"name": "百度影像"},
      {"id": 15,"name": "百度电子"},
      {"id": 16,"name": "腾讯影像"},
      {"id": 19,"name": "腾讯电子"},
      {"id": 21,"name": "ArcGIS影像"},
      {"id": 22,"name": "微软影像"},
      {"id": 2017,"name": "暗色底图"},
      {"id": 23,"name": "蓝色底图"},
      {"id": 24,"name": "黑色底图"},
      {"id": 25,"name": "离线地图 (供参考)"},
      {"id": 29,"name": "单张图片 (本地离线)"},
      {"id": 2023,"name": "无底图"}]
    */
    setBaseMap(basemap = "高德影像") {
      MAP_INSTANCE.basemap = basemap;
    },
    // 打开Popup弹窗
    /* 
      文档地址: http://mars3d.cn/api/Map.html#.sceneOptions
      position	LngLatPoint | Cesium.Cartesian3 | Array.<number>	
      矢量对象 或 显示的位置

      content	string | function | BaseGraphic | BaseGraphicLayer	
      弹窗内容html字符串，或者 回调方法 或者矢量对象/图层。

      options	Popup.StyleOptions	可选配置参数
    */
    async openPopup({ position = [], message = "", options = {} }) {
      // console.log("position content options", position, content, options)
      const lngAndLat = this.$mars3d.LngLatPoint.fromArray(position);
      let addressInfo = await this.getAddressInfo({ position: lngAndLat });
      const content = `
        <div class = "popup-alert">
            <div class="popup-item lng">精度: ${position[0]}</div>
            <div class="popup-item lat">纬度: ${position[1]}</div>  
            <div class="popup-item message">城区: ${message || ""}</div>
            <div class="popup-item address">地址: ${
              (addressInfo && addressInfo.address) || ""
            }</div>  
        </div>
      `;
      MAP_INSTANCE.openPopup(lngAndLat, content, options || {});
    },
    // 获取地里位置信息
    /* 
      高德 POI查询 工具类， 参考文档
      http://mars3d.cn/api/GaodePOI.html?classFilter=gaode
    */
    async getAddressInfo({ position = [] }) {
      // 高德 POI 地址查询 api
      /* const GAODE_POI = new this.$mars3d.query.GaodePOI({
        // 高德 key
        key: [this.gaodeKey],
      }); */
      const addressInfo = await GAODE_POI_API.getAddress({
        location: position,
      });
      if (!addressInfo) {
        console.error("调用平台出先了问题!");
        return null;
      }
      // console.log("GAODE_POI", GAODE_POI_API, addressInfo, position);
      return addressInfo;
    },
    // 搜索区域 ->返回搜索建议
    async getSearchSuggestions(Keyword = "") {
      /* 
        citylimit 开启 限制 city 范围查询
      */
      const result = await GAODE_POI_API.autoTip({
        city: "北京市",
        citylimit: true,
        text: Keyword || "北京市",
        types: ",",
      });
      return (result && result) || null;
    },

    // 显示 geojson 数据
    /* 
      api 地址
      http://mars3d.cn/api/GeoJsonLayer.html?classFilter=geo
    */
    showGeojson(geoJsonUrl) {
      let coneGlowList = [];
      let geojsonLayer = new this.$mars3d.layer.GeoJsonLayer({
        name: "北京市",
        url: geoJsonUrl,
        // data: geojson,
        // id: "2023", 如果不传 会随机生成!
        // popup: "{name}", // 弹窗 name 为 geojson中对应的属性名
        symbol: {
          // 标识数据类型，默认是根据数据生成 point[点]、polyline[线]、polygon[面]
          /* 
            对应的样式:
              point-> http://mars3d.cn/api/PointEntity.html#.StyleOptions
              polyline-> http://mars3d.cn/api/PolylineEntity.html#.StyleOptions
              polygon-> http://mars3d.cn/api/PolygonEntity.html#.StyleOptions
          */
          type: "polygon", // point[点]、polyline[线]、polygon[面]
          // 参考样式示例
          // http://mars3d.cn/editor-vue.html?id=graphic/entity/polygon
          // api http://mars3d.cn/api/PolygonEntity.html#.StyleOptions
          styleOptions: {
            // 高亮时的样式
            /* highlight: {
              type: "click",
              opacity: 0.2,
            }, */
            /* 
              MaterialType 材质类型
              api文档: http://mars3d.cn/api/MaterialType.html
            */
            /*  materialType: this.$mars3d.MaterialType.PolyGradient, // 重要参数，指定材质
            materialOptions: {
              color: "#392bff",
              opacity: 0.7,
              alphaPower: 1.3,
            }, */
            // diffHeight: 1500,
            // 面中心点，显示文字的配置
            label: {
              text: "{name}", // 对应的属性名称
              opacity: 0.9,
              font_size: 22,
              font_weight: "bold",
              color: "#fff",
              font_family: "微软雅黑",
              outline: true,
              scaleByDistance: true,
              scaleByDistance_far: 20000000,
              scaleByDistance_farValue: 0.1,
              scaleByDistance_near: 1000,
              scaleByDistance_nearValue: 1,
            },
          },
          callback: this.setGraphicStyle,
        },
        onCreateGraphic: this.onCreateGraphic,
        flyTo: true, // 定位至加载矢量数据的位置
        flyToOptions: {
          pitch: -45,
          radius: 122450,
          scale: 1.1,
        },
      });
      // 添加到图层
      MAP_INSTANCE.addLayer(geojsonLayer);
      // 光锥
      MAP_INSTANCE.addLayer(GRAPHIC_LAYER);
      // 绑定矢量图事件
      // geojsonLayer.on(this.$mars3d.EventType.click, this.handleGraphicClick);
      GRAPHIC_LAYER.on(this.$mars3d.EventType.click, this.handleGraphicClick);
    },
    // 生成 geojson polygon 矢量图时 
    onCreateGraphic(graphic) {
      // console.log("onCreateGraphic graphic", graphic)
      // 添加光锥图层
      let center = graphic.attr.centroid;
      let coneGlow = new this.$mars3d.graphic.LightCone({
        position: center,
        style: {
          radius: 1500,
          height: 15000,
        },
        attr: graphic.attr
      });
      
      GRAPHIC_LAYER.addGraphic(coneGlow);

      // 添加蓝色水波纹图层
      const circleGraphic = new this.$mars3d.graphic.CircleEntity({
        position: new this.$mars3d.LngLatPoint(
          center[0],
          center[1],
          100
        ),
        style: {
          radius: 5000,
          materialType: this.$mars3d.MaterialType.CircleWave,
          materialOptions: {
            color: "#0b88e3",
            count: 2,
            speed: 10,
          },
        },
        attr: graphic.attr,
      });

      GRAPHIC_LAYER.addGraphic(circleGraphic);
      return graphic;
    },
    // 设置矢量图样式
    setGraphicStyle(attr, styleOpt) {
      // const randomHeight = (attr.childrenNum || 1) * 1500; // 测试的高度
      // console.log("callback", attr, styleOpt);
      return {
        // 材质类型 PolyGradient 渐变面
        materialType: this.$mars3d.MaterialType.PolyGradient,
        // 材质选项配置
        materialOptions: {
          color: "#241e8a",
          // 漫射系数
          // diffusePower: 1.1,
          opacity: 0.8,
          // 渐变透明度
          alphaPower: 1.5,
        },
        // 矢量图高度(厚度)
        diffHeight: 2000,
        height: 50,
        outline: true,
        outlineWidth: 3,
        outlineColor: "#0091ff",
        outlineOpacity: 0.8,
        // hasShadows: true,
        // shadows: this.$mars3d.Cesium.ShadowMode.ENABLED,
        arcType: this.$mars3d.Cesium.ArcType.GEODESIC, // 多边形的边缘必须遵循的线条类型。
        clampToGround: true, // 是否贴地
        // 高亮时的样式（默认为鼠标移入，也可以指定type:'click'单击高亮），构造后也可以openHighlight、closeHighlight方法来手动调用
        highlight: {
          type: "click",
          materialOptions: {
            color: "#201a78",
            opacity: 0.5,
            alphaPower: 1.3,
          },
          outline: true,
          outlineWidth: 5,
          outlineColor: "#0091ff",
          outlineOpacity: 1,
        },
      };
    },
    // 矢量图点击
    handleGraphicClick(event) {
      const { graphic: { attr: { name }}, cartesian, czmObject } = event;
      // 设置高亮颜色
      /* graphic.openHighlight({
          materialOptions: {
            opacity: 0.5,
          },
          outline: true,
          outlineWidth: 10,
          outlineColor: "#3129ba",
        }); */
      const lngAndLat = this.$mars3d.LngLatPoint.fromCartesian(cartesian);
      let position = [lngAndLat.lng, lngAndLat.lat];
      this.openPopup({ position, message: name /* czmObject.name */ });
      // graphic.closeSmallTooltip();
      // graphic.openSmallTooltip(cartesian, czmObject.name);
      console.log("单击了图层", event, lngAndLat);
    },
    getColor() {
      const arrColor = [
        "rgb(15,176,255)",
        "rgb(18,76,154)",
        "#40C4E4",
        "#42B2BE",
        "rgb(51,176,204)",
        "#8CB7E5",
        "rgb(0,244,188)",
        "#139FF0",
      ];

      return arrColor[Math.floor(Math.random() * arrColor.length)];
    },
  },
  // 组件挂在后
  mounted() {
    this.initMars3d();
  },
  // 组件销毁前
  beforeDestroy() {
    // 解除时间绑定
    this.offEventsBind();
    // map 实例
    MAP_INSTANCE && MAP_INSTANCE.destroy();
    // 矢量图
    GRAPHIC_LAYER && GRAPHIC_LAYER.remove();
    GRAPHIC_LAYER = null;
    // 高德 poi 搜索
    GAODE_POI_API ? (GAODE_POI_API = null) : "";
    console.log("解除事件绑定, 销毁地图!");
  },
};

使用

<template>
  <div class="map-box">
    <div class="operator-box">
      <!-- <a-button type="primary" @click="flyToPoint">飞行到北京城区</a-button> -->
      <!-- <a-button type="primary" @click="getPosition">当前屏幕位置</a-button> -->
      <!-- <a-button type="primary" @click="getSearchSuggestions"
        >搜索关键字</a-button
      > -->
      <a-select
        allowClear
        show-search
        label-in-value
        v-model="value"
        placeholder="请输入地址信息"
        style="width: 220px"
        :filter-option="false"
        :not-found-content="searchLoading ? undefined : null"
        @search="getSearchSuggestions"
        @change="handleChangeAddress"
      >
        <a-spin v-if="searchLoading" slot="notFoundContent" size="small" />
        <a-select-option v-for="d in suggestionsList" :key="d.id">
          {{ d.name }}
        </a-select-option>
      </a-select>
    </div>

    <mars-map
      ref="marsMapRef"
      baseMap="蓝色底图"
      :center="{ lng: 114.5377, lat: 36.59959 }"
      :events="['load']"
      @onLoad="onload"
      @onClick="handleMapClick"
      @onDblClick="handleMapDbClick"
    />
  </div>
</template>

<script>
import { debounce } from "lodash";
export default {
  name: "index",
  components: {
    marsMap: () => import("@/components/Mars-Map.vue"),
  },
  data() {
    this.getSearchSuggestions = debounce(this.getSearchSuggestions, 900);
    return {
      // zoom level
      relativeAmount: 3,
      searchLoading: false,
      value: undefined,
      suggestionsList: [],
    };
  },

  methods: {
    // 地图加载完成
    onload(event) {
      console.log("mars-map onload", event);
    },
    // 获取搜索建议
    async getSearchSuggestions(value) {
      if (!value) return;
      this.searchLoading = true;
      const data = await this.$refs["marsMapRef"].getSearchSuggestions(value);
      this.suggestionsList = data.list;
      this.searchLoading = false;
      console.log("queryAddressSuggestions data", data);
    },
    // 选择的地址信息
    handleChangeAddress(address) {
      const { key } = address;
      this.value = key;
      let obj = this.suggestionsList.find(item => item.id === key);
      // console.log("handleChangeAddress address", address, obj);
      if (!obj) return;
      const { lng, lat } = obj;
      this.$refs["marsMapRef"].flyToPoint([lng, lat], {
        pitch: -45,
        radius: 1500 // 相机距离目标距离
      });
    },
    // 点击地图触发
    /* 
      LngLatPoint api 文档
      http://mars3d.cn/api/LngLatPoint.html?classFilter=LngLatPoint
    */
    handleMapClick(event) {
      // cartesian 转换 [lng, lat]经纬度
      const point = this.$mars3d.LngLatPoint.fromCartesian(event.cartesian);
      let pointArr = [point.lng, point.lat];
      // console.log("mars-map handleMapClick", event, point.lat, point.lng);
      this.$refs["marsMapRef"].openPopup({ position: pointArr });
    },
    // 双击 map 事件
    handleMapDbClick(event) {
      const map = event.target;
      let lngAndLat = this.$mars3d.LngLatPoint.fromCartesian(event.cartesian);
      // 设置相机位置
      /* this.$refs["marsMapRef"].setCameraView({
        lng: lngAndLat.lng,
        lat: lngAndLat.lat,
      }); */
      console.log("mars-map handleMapDbClick", event, map, lngAndLat);
      // zoomIn(relativeAmount[相对量], mandatory[是否强制更新，忽略screenSpaceCameraController的enableInputs/enableZoom限制])
      // 缩放
      map.zoomIn(this.relativeAmount, true);
    },
    // 飞行到某个点
    flyToPoint() {
      /* 
        北京城区:
          lng: 116.397529
          lat: 39.908284
        河北邯郸:
          lng: 114.5377
          lat: 36.59959     
      */
      // 北京城区
      this.$refs["marsMapRef"].flyToPoint([116.397529, 39.908284], {
        pitch: -45,
      });
      this.$message.info("飞行到城区");
    },
    // 获取当前屏幕中心点
    getPosition() {
      const position = this.$refs["marsMapRef"].getCenter();
      console.log("mars-map getPosition", position);
      this.$message.info(`lng: ${position.lng} lat: ${position.lat}`);
    },
  },
};
</script>

<style lang="scss" scoped>
.operator-box {
  position: absolute;
  top: 15px;
  left: 15px;
  z-index: 1;

  .ant-btn {
    margin-right: 10px !important;
  }
}
</style>

学习资源

工具链接

mars3d开发案例

vue2 + mars3d

依赖库安装

配置vue.config.js

定义Mars3dMap实体类

创建mars3d-map.vue组件

使用

vue3 + mars3d

`mars3d`开发案例

`vue2` + `mars3d`

配置`vue.config.js`

定义`Mars3dMap`实体类

创建`mars3d-map.vue`组件

`vue3` + `mars3d`