Scatter addition based on three

[liangyuan1]

Environment

• Version used:2.44.0
• Browser Name and version:128.0.6613.138
• Operating System and version (desktop or mobile):desktop

Context

I want to add an image point based on the original method of Three.js (the map coordinate system is 4326), but it is not displayed on the map. I would like to ask how to convert the coordinates

Code

const marker = new THREE.Sprite(
new THREE.SpriteMaterial({
map: new THREE.TextureLoader().load('/1.png'), // 替换为你的图片路径
scaleToWIdth: true
})
)
marker.scale.set(100, 100, 100) // 根据需要调整scale大小
marker.position.set(113.249257, 28.408089, 0) // 设置marker点在场景中的位置
scene.add(marker)

[jailln]

Hi,
To convert coordinates between coordinate systems you can use the Coordinates class.
Are you using a GlobeView or a PlanarView?
Can you provide a jsfiddle with your code or a minimal reproduction so I wan check what the problem might be?

[liangyuan1]

const marker = new THREE.Sprite(
new THREE.SpriteMaterial({
map: new THREE.TextureLoader().load('/1.png'), // 替换为你的图片路径
scaleToWIdth: true
})
)
marker.scale.set(100, 100, 100) // 根据需要调整scale大小
marker.position.set(113.249257, 28.408089, 0) // 设置marker点在场景中的位置
scene.add(marker)

use : GlobeView

js code

/* global itowns,document,GuiTools, debug, window */
var placement = {
// coord: new itowns.Coordinates('EPSG:4326', 2.351323, 48.856712),
// range: 25000000
coord: new itowns.Coordinates('EPSG:4326', 113.249257, 28.408089),
range: 250000
};

  // iTowns namespace defined here
  var viewerDiv = document.getElementById('viewerDiv');
  var view = new itowns.GlobeView(viewerDiv, placement);
  // 自定义的
  var orthoSource1 = new itowns.TDWMTSSource({
    // ?https://cors-anywhere.herokuapp.com/
    // url: 'http://t0.tianditu.gov.cn/img_w/wmts?tk=6e3de5b9cfca24b0f43d7c431acf56b9',
    // &service=wmts&request=GetTile&version=1.0.0&LAYER=img&tileMatrixSet=w&TileMatrix={TileMatrix}&TileRow={TileRow}&TileCol={TileCol}&style=default&format=tiles
    url: 'https://t0.tianditu.gov.cn/img_w/wmts?',
    // tk=6e3de5b9cfca24b0f43d7c431acf56b9,
    crs: 'EPSG:3857',
    // name: 'ORTHOIMAGERY.ORTHOPHOTOS',
    name: 'img',
    tileMatrixSet: 'w',
    format: 'tiles',
    style: 'default',
    tileMatrixSetID: 'GoogleMapsCompatible',
    // LAYER: 'img',
    tk: 'c4e3a9d54b4a79e885fff9da0fca712a'
  });
  var orthoLayer1 = new itowns.ColorLayer('Ortho1', {
    source: orthoSource1
  });
  view.addLayer(orthoLayer1);

  var orthoSource2 = new itowns.TDWMTSSource({
    url: 'https://t0.tianditu.gov.cn/cva_w/wmts?',
    crs: 'EPSG:3857',
    name: 'cva',
    tileMatrixSet: 'w',
    format: 'tiles',
    style: 'default',
    tileMatrixSetID: 'GoogleMapsCompatible',
    tk: 'c4e3a9d54b4a79e885fff9da0fca712a'
  });
  var orthoLayer2 = new itowns.ColorLayer('orthoLayer2', {
    source: orthoSource2
  });
  view.addLayer(orthoLayer2);

  // 添加marker点
  const marker = new itowns.THREE.Sprite(
    new itowns.THREE.SpriteMaterial({
      map: new itowns.THREE.TextureLoader().load('/data/1.png'), // 替换为你的图片路径
      scaleToWIdth: true
    })
  );
  marker.scale.set(100, 100, 100); // 根据需要调整scale大小

  // 将marker添加到场景中
  view.scene.add(marker);

[jailln]

Hi,
The globe view is in the EPSG:4978 coordinate reference system. You can add 2D Layers (color layers) in EPSG:4326 or EPSG:3857. However, if you manually add a Threejs object to the scene, you need to position it in the EPSG:4978 crs. You can use the Coordinates class for converting coordinates between crs (e.g. between EPSG:4326 and EPSG:4978). I updated the "marker" part of your code as such:

// 添加marker点
let markerPosCarto = new itowns.Coordinates('EPSG:4326', 113.249257, 28.408089, 0);
const marker = new itowns.THREE.Sprite(
    new itowns.THREE.SpriteMaterial({
        map: new itowns.THREE.TextureLoader().load('./images/cross.png'), // used one of itowns image
    })
);
markerPosCarto.z += 5000; // You can add altitude so your sprite is displayed above ground
const markerPosThree = markerPosCarto.as('EPSG:4978');
marker.position.copy(markerPosThree);
marker.scale.set(10000, 10000, 10000); // Set a big scale to be sure to see it
marker.updateMatrixWorld();

view.scene.add(marker);
view.notifyChange(); // iTowns render loop is async and triggered by view.notifyChange();

The result is the following:

I'll close the issue since it should answer your question, don't hesitate to re-open it if needed.