组件库参考 demo

"@turf/turf": "^6.5.0", 是一个 开源的 JavaScript 地理空间分析库（GeoSpatial Analysis Library），专门用于处理、计算和转换地理空间数据，支持浏览器和 Node.js 环境，核心目标是让开发者轻松实现地理空间相关的算法和功能，无需从零编写复杂的几何计算逻辑 "crypto-js": "^4.1.1", 谷歌算法库 "d3-contour": "^1.3.2",D3.js 生态中的一个专注于等高线（Contour）和等值面（Isosurface）生成的开源库，核心作用是将「离散的数值数据」（如高程、温度、密度、人口分布等）转换为「连续的可视化图形」（2D 等高线、3D 等值面边界），常用于地理信息可视化、科学数据可视化等场景

demo

<!--
* @FileDescription:  井位图测试
* @Author: 李兵泉
* @Date: 2025-11-21 
* @LastEditors: 最后更新作者
* @LastEditTime: 最后更新时间
-->
<template>
  <BdFlatMap ref="flatMapRef" />
</template>
<script setup>
import { ref, shallowRef, computed, watch, onMounted } from "vue";
import { BdFlatMap } from '@bdsoft/flatmap'

import { demoData_wellPoint, symbol_well } from "./wellPoint.js";
// refs
const flatMapRef = ref();

const _options = shallowRef({});

// const flatMap = computed(() => {
//   let aa = flatMapRef.value.flatMap
//   return aa
// })
const initFlatMap = () => {
  _options.value = {
    target: "mapview",
    name: "xxxx平面图",
    mapType: "WellMap", //图件类型
    appKey:
      "cce70581e6eb2ab42734f2f33a918557ca934a0115d453e4c59eb8cb225f222d248fde6d73d6d2d7", //系统应用编码
    userid: "00001", //用户id
    pageid: "10000", //页面id
    httpHead: "http://localhost:49607",
  };
  
  flatMapRef.value.setOption(_options.value);

  let wellLayer = flatMapRef.value.addWellLayer(
    "井位图层",
    demoData_wellPoint,
    symbol_well
  );
  flatMapRef.value.addLayerSwitcher(); //图层控制
  flatMapRef.value.addOverviewMap(); //鹰眼
  //  flatMapRef.value.addTotalLegend({});// 图例
};

onMounted(() => {
  //初始化平面图
  initFlatMap();
});
</script>

<style lang="scss" scoped></style>