mars3d 用后端传来的数据画点

最新推荐文章于 2024-11-07 15:57:10 发布

士居坡东

最新推荐文章于 2024-11-07 15:57:10 发布

阅读量757

点赞数 1

CC 4.0 BY-SA版权

文章标签：前端 vue.js

本文链接：https://blog.csdn.net/qq_43977829/article/details/126545210

本文介绍如何将普通JSON数据转换为GeoJSON格式，并利用Mars3D平台进行地图点位的绘制。具体步骤包括定义GeoJSON结构、通过后端接口获取数据、转换坐标数据格式、创建Blob文件并最终在地图上展示点位。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

 const staionJson = { type: "FeatureCollection" }; //定义一个空对象，因为是geojson所以默认加上格式。
 //调后端接口
  axios
    .get(`xxxxxxxxx`)
    .then((res) => {
    //以下代码将获取到的普通接口json转换为geojson的格式
      var features = [];
      //res.data.result根据自己的接口格式变更
      res.data.results.forEach((i) => {
        if (i.lng != null && i.lat != null) {
          var feature = {};
          feature.type = "Feature";
          feature.properties = {
            address: i.address,
            monitorObj: i.monitorObj,
            stcd: i.stcd,
          };
          var geometry = {};
          geometry.coordinates = [i.lng, i.lat];
          geometry.type = "Point";
          feature.geometry = geometry;
          features.push(feature);
        }
      });
      staionJson.features = features;
      //到这里，stationJson已经是成型的geojson数据了。
      //接下来将数据转成文件形式
      const blob = new Blob([JSON.stringify(staionJson)], {
        type: "application/json",
      });
      //接下来调用mars3d画点方法
      const staionPoints = new mars3d.layer.GeoJsonLayer({
        name: "站点",
        url: URL.createObjectURL(blob), //获取到刚刚得到的geojson文件地址
        symbol: {
          styleOptions: {
            image: "img/pointNormal.jpg",//自己的图片路径
            verticalOrigin: Cesium.VerticalOrigin.BOTTOM,
            scale: 1,
            scaleByDistance: true,
            scaleByDistance_far: 20000,
            scaleByDistance_farValue: 0.5,
            scaleByDistance_near: 1000,
            scaleByDistance_nearValue: 1,
            label: {
              text: "123",
              font_size: 25,
              color: "red",
              outline: true,
              outlineColor: "#000000",
              pixelOffsetY: -25,
              scaleByDistance: true,
              scaleByDistance_far: 80000,
              scaleByDistance_farValue: 0.5,
              scaleByDistance_near: 1000,
              scaleByDistance_nearValue: 1,
              distanceDisplayCondition: true,
              distanceDisplayCondition_far: 80000,
              distanceDisplayCondition_near: 0,
            },
          },
        },
        popup: "xxx",
      });
      map.addLayer(staionPoints);
    });