maptalks

陌影ml

已于 2024-06-13 13:58:52 修改

阅读量459

点赞数 10

文章标签：前端

于 2024-01-22 14:03:53 首次发布

本文链接：https://blog.csdn.net/qq_38274119/article/details/135405291

版权

文章介绍了如何使用JavaScript在地图应用中创建3D模型，包括设置样式、楼宇高亮功能、取消高亮以及火星坐标系（GCJ-02）与百度坐标系（BD-09）和WGS84之间的坐标转换方法。

摘要由CSDN通过智能技术生成

let arr = layer.getGeometries();
marker.setSymbol({});
marker.updateSymbol({});

marker标记、文字、线、面中所有样式属性集合

在这里插入图片描述

创建白模

/**创建楼宇图层 */
export function createBuildLayer(geojson:any, group:any) {
  let style = {
    style: [
      {
        renderPlugin: {
          type: "lit",
          dataConfig: {
            type: "3d-extrusion",
            altitudeProperty: "height",
            minHeightProperty: "min_height",
            altitudeScale: 1,
            defaultAltitude: 10,
            topThickness: 0,
            top: true,
            side: true,
          },
          sceneConfig: {},
        },
        symbol: {
          material: {
            baseColorFactor: [1, 255, 100, 0.8],
            roughnessFactor: 1,
            metallicFactor: 1,
          },
          polygonFill: {
            type: "categorical",
            property: "status",
            stops: [["active", "#003BD150"]],
            default: "#fff",
          },
        },
      },
    ],
  };

  let layer = new ispace.GeoJSONVectorTileLayer('build-layer',{
    data: geojson,
    style: style
  }).addTo(group);

  return layer
}

楼宇高亮

const getbuildInfo = ()=>{
  // 获取企业所在楼宇id
  let id = activeCompany.value.owning_build;
  // 获取楼宇图层数据
  let groupLayer = window.ispaceMap.getLayer('group-layer');
  let buildLayer = groupLayer && groupLayer.getLayer('build-layer');
  let buildData = buildLayer && buildLayer.getData();
  let centerPoint = null;
  // 楼宇高亮
  if(!('features' in buildData)) return 
  buildData.features.forEach((el:any)=>{
    delete el.properties.status
    if(el.properties.lyId==id){
      el.properties.status = 'active';
      centerPoint = getGeometryCenter(el)
    }
  })
  buildLayer.setData(buildData);
  let center = buildLayer.getExtent().getCenter();
  // 获取infoWindow弹窗, 赋值, 打开弹窗
  // window.infoWindow.hide()
  parkStore.infoFlag = false;
  parkStore.infoData = activeCompany.value;
  parkStore.infoFlag = true;
  // centerPoint && window.infoWindow.show(centerPoint)
  // 跳转
  window.ispaceMap.animateTo(
    {
      center: center,
      zoom: 18,
    },
    {
      easing: 'linear',
      duration: 1000,
    },
  )
}

取消高亮

/**取消模型高亮 */
function removeLight(){
  var layer=window.ispaceMap.getLayer('group-layer')
  var buildLayer=layer.getLayer('build-layer')
  var data=buildLayer.getData()
  data.features.forEach((item:any)=>{
      if(item.properties.status=='active')
      delete item.properties.status
  })
  buildLayer.setData(data);
}

模型贴图

style: [
      {
        filter: ["any", ["==", "$layer", "building"],
          ["==", "$type", "Polygon"]
        ],
        renderPlugin: {
          type: "lit",
          dataConfig: {
            type: "3d-extrusion",
            altitudeProperty: "height",
            minHeightProperty: "min_height",
            altitudeScale: 1,
            defaultAltitude: 10,
            topThickness: 2,
            top: false,
            side: true
          }
        },
        symbol: {
          bloom: false,
          ssr: false,
          polygonOpacity: 0.9,
          material: {
            baseColorTexture: url + "map/side_01.jpg",
            baseColorFactor: [1, 1, 1, 1],
            hsv: [0, 0.446, -0.158],
            baseColorIntensity: 1.318,
            contrast: 1.414,
            outputSRGB: 1,
            metallicRoughnessTexture: url + "map/side_02.jpg",
            roughnessFactor: 0.7,
            metallicFactor: 1,
            normalTexture: url + "map/side_03.jpg",
            uvScale: [0.5, 0.5],
            uvOffset: [0.35, 0],
            normalMapFactor: 0.69,
            normalMapFlipY: 0,
            bumpTexture: url + "map/side_04.jpg",
            occlusionTexture: url + "map/side_06.jpg"
          },
          polygonFill: {
            type: "categorical",
            property: "status",
            stops: [["active", "yellow"]],
            default: "#f5f5f5",
          },
        }
      },
      {
        filter: ["any", ["==", "$layer", "building"],
          ["==", "$type", "Polygon"]
        ],
        renderPlugin: {
          type: "lit",
          dataConfig: {
            type: "3d-extrusion",
            altitudeProperty: "height",
            minHeightProperty: "min_height",
            altitudeScale: 1,
            defaultAltitude: 10,
            topThickness: 2,
            top: true,
            side: false
          },
          sceneConfig: {
            animation: null,
            animationDuration: 800
          }
        },
        symbol: {
          polygonOpacity: 0.95,
          material: {
            baseColorTexture: url + "map/top.png",
            baseColorFactor: [0.5, 0.5, 0.5, 1],
            hsv: [0, 0, 0.15],
            baseColorIntensity: 0.84,
            contrast: 3.564,
            outputSRGB: 1,
            roughnessFactor: 0.11,
            metallicFactor: 0.67,
            uvScale: [3, 3],
            uvOffset: [0.2, 0.35],
            uvRotation: 0.8028514559173915,
            emissiveTexture: url + "map/top.png",
            emissiveFactor: [0, 0, 0],
            emitColorFactor: 0.27,
            emitMultiplicative: 0,
            albedoPBRFactor: 1,
            outputLinear: 0,
            clearCoatF0: 0.04,
            emitColor: [0, 0, 0]
          },
          polygonFill: {
            type: "categorical",
            property: "status",
            stops: [["active", "yellow"]],
            default: "#979797",
          },
        }
      },
    ]

火星坐标系 (GCJ-02)的转换与WGS84坐标系以及百度坐标系 (BD-09)互转

(function (root, factory) {
    if (typeof define === 'function' && define.amd) {
        // AMD. Register as an anonymous module.
        define([], factory);
    } else if (typeof module === 'object' && module.exports) {
        // Node. Does not work with strict CommonJS, but
        // only CommonJS-like environments that support module.exports,
        // like Node.
        module.exports = factory();
    } else {
        // Browser globals (root is window)
        root.coordtransform = factory();
    }
}(this, function () {
    //定义一些常量
    var x_PI = 3.14159265358979324 * 3000.0 / 180.0;
    var PI = 3.1415926535897932384626;
    var a = 6378245.0;
    var ee = 0.00669342162296594323;
    /**
     * 百度坐标系 (BD-09) 与 火星坐标系 (GCJ-02)的转换
     * 即 百度 转 谷歌、高德
     * @param bd_lon
     * @param bd_lat
     * @returns {*[]}
     */
    var bd09togcj02 = function bd09togcj02(bd_lon, bd_lat) {
        // var bd_lon = +bd_lon;
        // var bd_lat = +bd_lat;
        var x = bd_lon - 0.0065;
        var y = bd_lat - 0.006;
        var z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * x_PI);
        var theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * x_PI);
        var gg_lng = z * Math.cos(theta);
        var gg_lat = z * Math.sin(theta);
        return [gg_lng, gg_lat]
    };
  
    /**
     * 火星坐标系 (GCJ-02) 与百度坐标系 (BD-09) 的转换
     * 即谷歌、高德 转 百度
     * @param lng
     * @param lat
     * @returns {*[]}
     */
    var gcj02tobd09 = function gcj02tobd09(lng, lat) {
        // var lat = +lat;
        // var lng = +lng;
        var z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * x_PI);
        var theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * x_PI);
        var bd_lng = z * Math.cos(theta) + 0.0065;
        var bd_lat = z * Math.sin(theta) + 0.006;
        return [bd_lng, bd_lat]
    };
  
    /**
     * WGS84转GCj02
     * @param lng
     * @param lat
     * @returns {*[]}
     */
    var wgs84togcj02 = function wgs84togcj02(lng, lat) {
        // var lat = +lat;
        // var lng = +lng;
        if (out_of_china(lng, lat)) {
            return [lng, lat]
        } else {
            var dlat = transformlat(lng - 105.0, lat - 35.0);
            var dlng = transformlng(lng - 105.0, lat - 35.0);
            var radlat = lat / 180.0 * PI;
            var magic = Math.sin(radlat);
            magic = 1 - ee * magic * magic;
            var sqrtmagic = Math.sqrt(magic);
            dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);
            dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);
            var mglat = lat + dlat;
            var mglng = lng + dlng;
            return [mglng, mglat]
        }
    };
  
    /**
     * GCJ02 转换为 WGS84
     * @param lng
     * @param lat
     * @returns {*[]}
     */
    var gcj02towgs84 = function gcj02towgs84(lng, lat) {
        // var lat = +lat;
        // var lng = +lng;
        if (out_of_china(lng, lat)) {
            return [lng, lat]
        } else {
            var dlat = transformlat(lng - 105.0, lat - 35.0);
            var dlng = transformlng(lng - 105.0, lat - 35.0);
            var radlat = lat / 180.0 * PI;
            var magic = Math.sin(radlat);
            magic = 1 - ee * magic * magic;
            var sqrtmagic = Math.sqrt(magic);
            dlat = (dlat * 180.0) / ((a * (1 - ee)) / (magic * sqrtmagic) * PI);
            dlng = (dlng * 180.0) / (a / sqrtmagic * Math.cos(radlat) * PI);
            var mglat = lat + dlat;
            var mglng = lng + dlng;
            return [lng * 2 - mglng, lat * 2 - mglat]
        }
    };
  
    var transformlat = function transformlat(lng, lat) {
        // var lat = +lat;
        // var lng = +lng;
        var ret = -100.0 + 2.0 * lng + 3.0 * lat + 0.2 * lat * lat + 0.1 * lng * lat + 0.2 * Math.sqrt(Math.abs(lng));
        ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
        ret += (20.0 * Math.sin(lat * PI) + 40.0 * Math.sin(lat / 3.0 * PI)) * 2.0 / 3.0;
        ret += (160.0 * Math.sin(lat / 12.0 * PI) + 320 * Math.sin(lat * PI / 30.0)) * 2.0 / 3.0;
        return ret
    };
  
    var transformlng = function transformlng(lng, lat) {
        // var lat = +lat;
        // var lng = +lng;
        var ret = 300.0 + lng + 2.0 * lat + 0.1 * lng * lng + 0.1 * lng * lat + 0.1 * Math.sqrt(Math.abs(lng));
        ret += (20.0 * Math.sin(6.0 * lng * PI) + 20.0 * Math.sin(2.0 * lng * PI)) * 2.0 / 3.0;
        ret += (20.0 * Math.sin(lng * PI) + 40.0 * Math.sin(lng / 3.0 * PI)) * 2.0 / 3.0;
        ret += (150.0 * Math.sin(lng / 12.0 * PI) + 300.0 * Math.sin(lng / 30.0 * PI)) * 2.0 / 3.0;
        return ret
    };
  
    /**
     * 判断是否在国内，不在国内则不做偏移
     * @param lng
     * @param lat
     * @returns {boolean}
     */
    var out_of_china = function out_of_china(lng, lat) {
        // var lat = +lat;
        // var lng = +lng;
        // 纬度3.86~53.55,经度73.66~135.05
        return !(lng > 73.66 && lng < 135.05 && lat > 3.86 && lat < 53.55);
    };
  
    return {
        bd09togcj02: bd09togcj02,
        gcj02tobd09: gcj02tobd09,
        wgs84togcj02: wgs84togcj02,
        gcj02towgs84: gcj02towgs84
    }
}));