zoukankan      html  css  js  c++  java
  • maptalks 开发GIS地图(26)maptalks.three.19

    1. 自定义高架,每个高架路线为经纬度数组,

    其中包括经度、纬度、高度。

    2. 调用addLine函数添加对象。

     1  function addLine(lnglats, name, width = 8) {
     2             const lineString = new maptalks.LineString(lnglats);
     3             const altitudes = lnglats.map(lnglat => {
     4                 return lnglat[2] / 10;
     5             });
     6             lineString.setProperties({ altitudes });
     7             const line = new Bridge(lineString, { width }, material, threeLayer);
     8             line.setToolTip(name, {
     9                 showTimeout: 0,
    10                 eventsPropagation: true,
    11                 dx: 10
    12             });
    13 
    14 
    15             const { coordinates, height } = line.getOptions();
    16             const alts = coordinates.map(c => {
    17                 return c[2];
    18             })
    19             const pLine = new maptalks.LineString(coordinates);
    20             pLine.setProperties({
    21                 altitudes: alts
    22             });
    23             const edgeLine = new Line(pLine, { altitude: -0.05, offset: -0.05 }, edgeLineMaterial, threeLayer);
    24             const edgeLine1 = new Line(pLine, { altitude: height + 0.05, offset: height + 0.05 }, edgeLineMaterial, threeLayer);
    25 
    26             const centerLine = new Line(lineString, { altitude: 1.1, offset: 1.1 }, linematerial, threeLayer);
    27 
    28             threeLayer.addMesh([line, centerLine, edgeLine, edgeLine1]);
    29             meshes.push(line);
    30 
    31             helperMeshes.push(centerLine, edgeLine, edgeLine1);
    32         }

    3. 其中的红黑效果,最后发现是通过不同的材质组合构成的。

     1    var material = new THREE.MeshBasicMaterial({ color: 'rgb(12,12,17)', transparent: true, wireframe: false });
     2         var highlightmaterial = new THREE.MeshBasicMaterial({ color: 'yellow', transparent: true });
     3 
     4         const material1 = new THREE.MeshLambertMaterial({
     5             color: '#000'
     6         });
     7         const highlightmaterial1 = new THREE.MeshLambertMaterial({
     8             color: 'red'
     9         });
    10 
    11         var edgeLineMaterial = new THREE.LineBasicMaterial({
    12             color: '#fff',
    13             transparent: true,
    14             opacity: 0.6
    15         });
    16 
    17         var linematerial = new THREE.LineDashedMaterial({
    18             color: '#fff',
    19             dashSize: 0.05,
    20             gapSize: 0.05
    21         });

    4. 页面显示

    5. 源码地址

    https://github.com/WhatGIS/maptalkMap/tree/main/threelayer/demo

     
  • 相关阅读:
    C++箴言:避免构造或析构函数中调用虚函数
    程序员面试题精选100题(32)-不能被继承的类
    面试题之数组统计
    面试题:找出数组中只出现一次的2个数(异或的巧妙应用)(出现3次)
    数组Magic Index
    ALAssetsLibrary学习总结
    设计模式
    android之LruCache源代码解析
    Mac OS X将CSV格式转换为Excel文档格式,Excel转CSV中文乱码问题
    Atitit.jquery 版本号新特性attilax总结
  • 原文地址:https://www.cnblogs.com/googlegis/p/14735209.html
Copyright © 2011-2022 走看看