20

Стоит задача:

  • Вращающийся 3d глобус, с отмеченными на нем метками в виде точек с подписями(например Москва, Англия и т.д.).
  • Они должны подгружаться из списка в файле cities.
  • При клике на него (Глобус) он должен трансформироваться в 2d карту с такими же метками, но именно в этой проекции при наведении на метку будет появляться подпись метки (в виде например количество населения и краткого списка архитектурных особенностей).
  • Так же при клике на метку или же на имя города чтоб перенаправляло на нужную страницу.

С помощью чего это лучше делать?

  1. SVG
  2. Canvas

Ни с Canvas, ни с SVG ранее не работал. Начал изучать canvas но столкнулся с тем что он не сможет обеспечить все что мне нужно. Примеров с глобусом нашел великое множество но нормальной документации не нашел (на нее тоже пните пожалуйста).

3
  • @StrangerintheQ, неа, думаю что можно добавить ещё какие-то, было бы полезно)
    – Arthur
    Commented 3 мая 2019 в 11:58
  • @Arthur я готовлю ответ с использованием cesium, какие темы осветить? Там уже есть маркеры и кластеризация, думаю еще что добавить Commented 10 мая 2019 в 14:23
  • @StrangerintheQ, привет, я рад, чем больше плюсов - тем больше охват данных тем аудиторией. Я думаю что можно попробовать много вариантов, главное чтобы это можно было эффективно применять на практике
    – Arthur
    Commented 10 мая 2019 в 16:37

4 ответа 4

37

Есть много open source глобусов/карт для WEB, сделанных разными компаниями для разных целей. Перечислю те, с которыми приходилось работать, а вы уж выбирайте:


  1. Cesium

Очень большой по количеству исходного кода и абстракций глобус, он больше ориентирован на realtime rendering. Очень много чего умеет из коробки, но без знаний компьютерной графики с ним может оказаться сложновато. Часто используется и можно найти много примеров про него. Хорошо утилизирует ресурсы процессора и видеокарты, в следствие чего его производительность на высоте.

введите сюда описание изображения

<script src="https://cesiumjs.org/releases/1.36/Build/Cesium/Cesium.js"></script>
<link rel="stylesheet" href="https://cesiumjs.org/Cesium/Apps/Sandcastle/templates/bucket.css">
<div id="cesiumContainer" class="fullSize"></div>
<button style="position:absolute">2d/3d</button>
<script>
var extent = Cesium.Rectangle.fromDegrees(20.3,50,40.3,70);
Cesium.Camera.DEFAULT_VIEW_RECTANGLE = extent;
Cesium.Camera.DEFAULT_VIEW_FACTOR = 0;
var viewer = new Cesium.CesiumWidget('cesiumContainer',{
    imageryProvider : Cesium.createOpenStreetMapImageryProvider({
        url: 'https://a.tile.openstreetmap.org/'
    }),
});
var scene = viewer.scene;
var billboards = scene.primitives.add(new Cesium.BillboardCollection());
var canvas = document.createElement('canvas');
canvas.width = 16;
canvas.height = 16;
var ctx = canvas.getContext('2d');
ctx.beginPath();
ctx.arc(5, 5, 5, 0, Cesium.Math.TWO_PI, true);
ctx.closePath();
ctx.fillStyle = 'red';
ctx.fill();
billboards.add({
  image: canvas,
  position: Cesium.Cartesian3.fromDegrees(30.3,60)
});
var labels = new Cesium.LabelCollection();
labels.add({
    position: Cesium.Cartesian3.fromDegrees(30.3,60),
    text: 'Saint-Petersburg',
    font: '15px Helvetica',
    fillColor: new Cesium.Color(0, 0, 0),
});
scene.primitives.add(labels);
let is2d;
document.querySelector('button').onclick = () => {
  scene.mode = (is2d = !is2d) ? Cesium.SceneMode.SCENE2D : Cesium.SceneMode.SCENE3D;
}
</script>


  1. Web World Wind

Тоже глобус, намного проще внутри, помедленнее работает, чем Cesium, меньше реализованных фишек, легче поддаётся пониманию и кастомизации. Работает в один поток, вычисления на видеокарте не ускоряет, почти не использует шейдеры.

ww

let c = document.getElementById('canvasOne');
c.width = window.innerWidth;
c.height = window.innerHeight;
var wwd = new WorldWind.WorldWindow("canvasOne");
wwd.addLayer(new WorldWind.AtmosphereLayer());
wwd.addLayer(new WorldWind.BingAerialWithLabelsLayer())
var markers = new WorldWind.RenderableLayer("Markers")
wwd.addLayer(markers);
var attributes = new WorldWind.PlacemarkAttributes();
var position = new WorldWind.Location(60, 30)
var placemark = new WorldWind.Placemark(position, /*eyeDistanceScaling*/true, attributes);
attributes.imageOffset = new WorldWind.Offset(
    WorldWind.OFFSET_FRACTION, 0.3,
    WorldWind.OFFSET_FRACTION, 0.0);
attributes.labelAttributes.color = WorldWind.Color.YELLOW;
attributes.labelAttributes.offset = new WorldWind.Offset(
            WorldWind.OFFSET_FRACTION, 0.5,
            WorldWind.OFFSET_FRACTION, 1.0);
placemark.label = "Saint-Petersburg";
placemark.altitudeMode = WorldWind.CLAMP_TO_GROUND;
placemark.eyeDistanceScalingThreshold = 2500000;
attributes.imageSource = WorldWind.configuration.baseUrl + "images/pushpins/plain-red.png";
markers.addRenderable(placemark);;
body {
  margin:0;
  overflow:hidden;
}
<script src="https://files.worldwind.arc.nasa.gov/artifactory/web/0.9.0/worldwind.min.js" type="text/javascript"></script>
<canvas id="canvasOne" width="750" height="750" style="background: black;"></canvas>


  1. D3.js

Очень мощная штука, больше подходит для SVG, но и по-другому можно отрендерить, содержит математику для множества географических проекций и их расширения, отлично подходит для создания 2D карт и карт во всяких экстравагантных проекциях, отличных от mercator/wgs84, которые используются почти во всех других картографических движках.

введите сюда описание изображения

var width = 750, height = 500;
var options = [
  {name: "Aitoff", projection: d3.geoAitoff()},
  {name: "Albers", projection: d3.geoAlbers().scale(145).parallels([20, 50])},
  {name: "August", projection: d3.geoAugust().scale(60)},
  {name: "Baker", projection: d3.geoBaker().scale(100)},
  {name: "Boggs", projection: d3.geoBoggs()},
  {name: "Bonne", projection: d3.geoBonne().scale(120)},
  {name: "Bromley", projection: d3.geoBromley()},
  {name: "Collignon", projection: d3.geoCollignon().scale(93)},
  {name: "Craster Parabolic", projection: d3.geoCraster()},
  {name: "Eckert I", projection: d3.geoEckert1().scale(165)},
  {name: "Eckert II", projection: d3.geoEckert2().scale(165)},
  {name: "Eckert III", projection: d3.geoEckert3().scale(180)},
  {name: "Eckert IV", projection: d3.geoEckert4().scale(180)},
  {name: "Eckert V", projection: d3.geoEckert5().scale(170)},
  {name: "Eckert VI", projection: d3.geoEckert6().scale(170)},
  {name: "Eisenlohr", projection: d3.geoEisenlohr().scale(60)},
  {name: "Equirectangular (Plate Carrée)", projection: d3.geoEquirectangular()},
  {name: "Hammer", projection: d3.geoHammer().scale(165)},
  {name: "Hill", projection: d3.geoHill()},
  {name: "Goode Homolosine", projection: d3.geoHomolosine()},
  {name: "Kavrayskiy VII", projection: d3.geoKavrayskiy7()},
  {name: "Lambert cylindrical equal-area", projection: d3.geoCylindricalEqualArea()},
  {name: "Lagrange", projection: d3.geoLagrange().scale(120)},
  {name: "Larrivée", projection: d3.geoLarrivee().scale(95)},
  {name: "Laskowski", projection: d3.geoLaskowski().scale(120)},
  {name: "Loximuthal", projection: d3.geoLoximuthal()},
  // {name: "Mercator", projection: d3.geoMercator().scale(490 / 2 / Math.PI)},
  {name: "Miller", projection: d3.geoMiller().scale(100)},
  {name: "McBryde–Thomas Flat-Polar Parabolic", projection: d3.geoMtFlatPolarParabolic()},
  {name: "McBryde–Thomas Flat-Polar Quartic", projection: d3.geoMtFlatPolarQuartic()},
  {name: "McBryde–Thomas Flat-Polar Sinusoidal", projection: d3.geoMtFlatPolarSinusoidal()},
  {name: "Mollweide", projection: d3.geoMollweide().scale(165)},
  {name: "Natural Earth", projection: d3.geoNaturalEarth()},
  {name: "Nell–Hammer", projection: d3.geoNellHammer()},
  {name: "Polyconic", projection: d3.geoPolyconic().scale(100)},
  {name: "Robinson", projection: d3.geoRobinson()},
  {name: "Sinusoidal", projection: d3.geoSinusoidal()},
  {name: "Sinu-Mollweide", projection: d3.geoSinuMollweide()},
  {name: "van der Grinten", projection: d3.geoVanDerGrinten().scale(75)},
  {name: "van der Grinten IV", projection: d3.geoVanDerGrinten4().scale(120)},
  {name: "Wagner IV", projection: d3.geoWagner4()},
  {name: "Wagner VI", projection: d3.geoWagner6()},
  {name: "Wagner VII", projection: d3.geoWagner7()},
  {name: "Winkel Tripel", projection: d3.geoWinkel3()}
];
options.forEach(function(o) {
  o.projection.rotate([0, 0]).center([0, 0]);
});

var i = 0,
    n = options.length - 1;
var projection = options[i].projection;
var path = d3.geoPath(projection);
var graticule = d3.geoGraticule();
var svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);
svg.append("defs").append("path")
    .datum({type: "Sphere"})
    .attr("id", "sphere")
    .attr("d", path);
svg.append("use")
    .attr("class", "stroke")
    .attr("xlink:href", "#sphere");
svg.append("use")
    .attr("class", "fill")
    .attr("xlink:href", "#sphere");
svg.append("path")
    .datum(graticule)
    .attr("class", "graticule")
    .attr("d", path);
    
d3.json("https://unpkg.com/[email protected]/world/110m.json").then(function(world) {
  svg.insert("path", ".graticule")
      .datum(topojson.feature(world, world.objects.land))
      .attr("class", "land")
      .attr("d", path);
});

var menu = d3.select("#projection-menu")
    .on("change", change);
menu.selectAll("option")
    .data(options)
  .enter().append("option")
    .text(function(d) { return d.name; });
update(options[0])
function loop() {
  var j = Math.floor(Math.random() * n);
  menu.property("selectedIndex", i = j + (j >= i));
  update(options[i]);
}
function change() {
  clearInterval(interval);
  update(options[this.selectedIndex]);
}
function update(option) {
  svg.selectAll("path").interrupt().transition()
      .duration(1000).ease(d3.easeLinear)
      .attrTween("d", projectionTween(projection, projection = option.projection))
  d3.timeout(loop, 1000)
}
function projectionTween(projection0, projection1) {
  return function(d) {
    var t = 0;
    var projection = d3.geoProjection(project)
        .scale(1)
        .translate([width / 2, height / 2]);
    var path = d3.geoPath(projection);
    function project(λ, φ) {
      λ *= 180 / Math.PI, φ *= 180 / Math.PI;
      var p0 = projection0([λ, φ]), p1 = projection1([λ, φ]);
      return [(1 - t) * p0[0] + t * p1[0], (1 - t) * -p0[1] + t * -p1[1]];
    }
    return function(_) {
      t = _;
      return path(d);
    };
  };
}
body {
  background: #fcfcfa;
  height: 500px;
  position: relative;
  width: 960px;
}
#projection-menu {
  position: absolute;
  right: 10px;
  top: 10px;
}
.stroke {
  fill: none;
  stroke: #000;
  stroke-width: 3px;
}
.fill {
  fill: #fff;
}
.graticule {
  fill: none;
  stroke: #777;
  stroke-width: .5px;
  stroke-opacity: .5;
}
.land {
  fill: #222;
}
.boundary {
  fill: none;
  stroke: #fff;
  stroke-width: .5px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<select id="projection-menu"></select>
<script src="//d3js.org/d3-geo-projection.v1.min.js"></script>
<script src="//d3js.org/topojson.v2.min.js"></script>


  1. Mapbox-gl-js

Особенность этой прекрасной штуки - реалтайм рендеринг векторных тайлов в 2D и 3D режиме(в 3D не глобус, а плоская карта под углом, как columbusview в cesium), но с растровыми источниками данных оно тоже работать умеет. Проекцию толком поменять нельзя.

mapbox

mapboxgl.accessToken = 'pk.eyJ1Ijoib3dlbmxhbWIiLCJhIjoiY2lleWljcnF4MDBiOXQ0bHR0anRvamtucSJ9.t3YnHHqvQZ8Y0MTCNy0NNw';

this.map = new mapboxgl.Map({
    container: 'map', 
    style: 'mapbox://styles/mapbox/streets-v9',
    center: [30.3, 60], 
    zoom: 11 // starting zoom
});

// Add zoom and rotation controls to the map.
var nav = new mapboxgl.NavigationControl();
map.addControl(nav, 'top-right');
body { 
  margin: 0; 
  padding: 0; 
}

#map { 
  position: absolute; 
  top: 0; 
  bottom: 0; 
  width: 100%; 
}
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css' rel='stylesheet' /><div id='map'></div>


  1. Leaflet

Маленькая да удаленькая библиотека для 2D карт. Не использует на прямую видеокарту, и весит очень скромно, при этом имеет большое коммьюнити и множество всяких разных расширений. Хорошо подходит для мобильных карт и слабых компьютеров. Поддерживает различные проекции.

leaflet

var osmUrl = 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
      
var osmLayer = new L.TileLayer(osmUrl, {
    maxZoom: 18
});

var baseMaps = {"OpenStreetMap": osmLayer};

var map = new L.Map('map', {
    center: new L.LatLng(60, 30.3),
    zoom: 12,
    layers: [osmLayer]
});
body {
    margin: 0;
    overflow: hidden;
}

#map {
    position: fixed;
    width: 100%;
    height: 100%;
}
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"/>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<div id="map"></div>


  1. Openlayers

Отличная альтернатива leaflet, больше исходного кода, больше фич, больше порог вхождения, много примеров, нормальная поддержка различных проекций. 2D.

ol

new ol.Map({
	layers: [new ol.layer.Tile({
        source: new ol.source.OSM()
    })],
	target: 'map',
	view: new ol.View({
		center: ol.proj.fromLonLat([30.3, 60]),
		zoom: 12
	})
});
body {
    overflow: hidden;
    margin: 0;
}

#map {
    position: absolute;
    height: 100%;
    width: 100%;
}
<script src="https://cdn.rawgit.com/openlayers/openlayers.github.io/master/en/v5.2.0/build/ol.js"></script>
<div id="map"></div>

1
11
+1000

Прилагаю Вашему вниманию расширенную версию использования WebWorldWind

Что тут представлено:

  1. Глобус и плоская карта в проекции меркатора.
  2. Звезды, данные взять из json.
  3. Какой-никакой рендеринг атмосферы.
  4. Информация о городах взята из json, нанесены маркеры на карту и добавлены события на клики к ним.
  5. Прикручен анализ того, что под мышкой + по клику фетчим инфу из википедии

введите сюда описание изображения

<script src="https://files.worldwind.arc.nasa.gov/artifactory/web/0.9.0/worldwind.min.js" type="text/javascript"></script>
<canvas id="canvas"></canvas>
<div>
  <button onclick="switchGlobe()">2d/3d</button>
  <span id="mouseover"></span>
  <span style="float:right;padding-right:15px">use right mouse drag to pan </span>
</div>
<div id="popup"></div>

<script>
  // всплывающее окошко
  var popup = document.querySelector('#popup');
  popup.onclick = () => popup.classList.remove('visible')
  
  // инициализируем жвижок, ему нужен идентификатор каныв, на которой он рисует
  var wwd = new WorldWind.WorldWindow("canvas");
  
  wwd.addLayer(new WorldWind.StarFieldLayer());  // добавляем слой со звездами 
  wwd.addLayer(new WorldWind.AtmosphereLayer()); // добавляем слой с атмосферой
  wwd.addLayer(new WorldWind.BingAerialWithLabelsLayer());  // добавляем слой с тайлами от Bing
  
  var markers = new WorldWind.RenderableLayer("Markers"); // создаем пустой слой для маркеров
  wwd.addLayer(markers); // добавляем его

  // получаем большой файл с описанием городов и отдираем из них каждый пятисотый =)
  // и добавляем маркеры для них на слой с маркерами
  fetch('https://raw.githubusercontent.com/lutangar/cities.json/master/cities.json')
    .then(r => r.json())
    .then(r => r.forEach((c, i) => i % 500 === 0 &&
      markers.addRenderable(placemark(+c.lat, +c.lng, c.name)))) 

  // аттрибуты маркера
  var attributes = new WorldWind.PlacemarkAttributes();
  attributes.imageOffset = new WorldWind.Offset(
    WorldWind.OFFSET_FRACTION, 0.3,  
    WorldWind.OFFSET_FRACTION, 0.0); 
  attributes.labelAttributes.color = WorldWind.Color.YELLOW;
  attributes.labelAttributes.offset = new WorldWind.Offset(
    WorldWind.OFFSET_FRACTION, 0.5,
    WorldWind.OFFSET_FRACTION, 1.0);
    
  // изображение маркера, тут может быть любая картинка
  attributes.imageSource = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36px' height='56px' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1'  viewBox='0 0 365 560' enable-background='new 0 0 365 560' xml:space='preserve'%3E%3Cg%3E%3Cpath stroke='white' stroke-width='20' fill='%2300AEEF' d='M182.9,551.7c0,0.1,0.2,0.3,0.2,0.3S358.3,283,358.3,194.6c0-130.1-88.8-186.7-175.4-186.9 C96.3,7.9,7.5,64.5,7.5,194.6c0,88.4,175.3,357.4,175.3,357.4S182.9,551.7,182.9,551.7z M122.2,187.2c0-33.6,27.2-60.8,60.8-60.8 c33.6,0,60.8,27.2,60.8,60.8S216.5,248,182.9,248C149.4,248,122.2,220.8,122.2,187.2z'/%3E%3C/g%3E%3C/svg%3E";

  // переключение представлений
  function switchGlobe() {
    if (!wwd.flatGlobe) {
      wwd.flatGlobe = new WorldWind.Globe2D(); // создаем и запоминаем 2d глобус
      // устанавливаем ему проекцию меркатора (тут возможны другие проекции)
      wwd.flatGlobe.projection = new WorldWind.ProjectionMercator(); 
      wwd.globe3d = wwd.globe;//  запоминаем 3d глобус (текущий)
    }
    // переключаем по клику представления туда и обратно
    wwd.globe = (wwd.is2d = !wwd.is2d) ? wwd.flatGlobe : wwd.globe3d;
    wwd.redraw();  // нужно позвать перерисовку после переключения
  }

  // функция создает новый маркер
  function placemark(lat, lon, name) {
    // местоположение
    var position = new WorldWind.Location(lat, lon); 
    var placemark = new WorldWind.Placemark(position, true, attributes);
    placemark.label = name; // подпись
    // режим обработки высоты (прибить к поверхности)
    placemark.altitudeMode = WorldWind.CLAMP_TO_GROUND; 
    // дистанция с которой начинается масштабирование при отдалении
    placemark.eyeDistanceScalingThreshold = 2500000; 
    return placemark;
  }

  // слушатель движения мыши
  wwd.addEventListener("mousemove", function(e) {
    var x = e.clientX,
      y = e.clientY;
    var pickList = wwd.pick(wwd.canvasCoordinates(x, y));
    var o = pickList.objects.find(o => !o.isTerrain);
    document.querySelector('canvas').style.cursor = o ? "pointer" : "default";
    document.querySelector('#mouseover').innerHTML = o ? o.userObject.label : '';
  });

  // обработчик кликов
  new WorldWind.ClickRecognizer(wwd, function(recognizer) {
    var x = recognizer.clientX,
      y = recognizer.clientY;
    var pickList = wwd.pick(wwd.canvasCoordinates(x, y));
    var o = pickList.objects.find(o => !o.isTerrain);
    if (!o)
      return;
    fetch("https://en.wikipedia.org/w/api.php?&origin=*&action=opensearch&search=" + o.userObject.label + "&limit=1").then(function(resp) {
      return resp.json()
    }).then(function(data) {
      popup.innerHTML += `<br><iframe src="${data.pop()}"></iframe>`;
    });
    popup.innerHTML = o.userObject.label + "<span id='close'>×</span>";
    popup.classList.add('visible');
  });
</script>

<style>
  div span,
  div p {
    color: white;
  }

  body {
    margin: 0;
    overflow: hidden;
  }

  canvas {
    background: black;
    width: 100vw;
    height: 100vh;
  }

  div {
    width: 100vw;
    position: absolute;
    top: 0;
    padding: 5px;
    background-color: rgba(0, 0, 0, 0.5)
  }

  #popup {
    width: 80vw;
    opacity: 0;
    color: white;
    transition: 300ms;
    pointer-events: none;
    height: 80vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
  }

  #popup.visible {
    opacity: 1;
    pointer-events: all
  }

  #popup iframe {
    width: 100%;
    height: calc(100% - 30px);
    border: 0
  }

  #close {
    float: right;
    padding-right: 5px;
    cursor: pointer;
    font-size: 20px;
    transition: 300ms
  }

  #close:hover {
    color: red
  }
</style>


Вариация предыдущего сниппета, тут все города сложены в kd-дерево, и ищутся в нем ближайшие к месту клика с радиусом в один градус, затем наносятся на карту...

<script src="https://files.worldwind.arc.nasa.gov/artifactory/web/0.9.0/worldwind.min.js" type="text/javascript"></script>
<script src="https://unpkg.com/[email protected]/kdbush.min.js"></script>
<canvas id="canvas"></canvas>
<div>
  <button onclick="switchGlobe()">2d/3d</button>
  <span id="mouseover"></span>
  <span style="float:right;padding-right:15px">use right mouse drag to pan </span>
</div>
<div id="popup"></div>

<script>
  // всплывающее окошко
  var popup = document.querySelector('#popup');
  popup.onclick = () => popup.classList.remove('visible')
  
  // инициализируем жвижок, ему нужен идентификатор каныв, на которой он рисует
  var wwd = new WorldWind.WorldWindow("canvas");
  // добавляем слой со звездами 
  wwd.addLayer(new WorldWind.StarFieldLayer());  
  // добавляем слой с атмосферой
  wwd.addLayer(new WorldWind.AtmosphereLayer());
  // добавляем слой с тайлами от Bing
  wwd.addLayer(new WorldWind.BingAerialWithLabelsLayer());  
  
  // создаем пустой слой для маркеров
  var markers = new WorldWind.RenderableLayer("Markers"); 
  wwd.addLayer(markers); // добавляем его

  var index,all;  
    
  // получаем большой файл с описанием городов и отдираем из них каждый пятисотый =)
  // и добавляем маркеры для них на слой с маркерами
  fetch('https://raw.githubusercontent.com/lutangar/cities.json/master/cities.json')
    .then(r => r.json())
    .then(r => index = new KDBush(all=r, p => +p.lat, p => +p.lng))
  


  // аттрибуты маркера
  var attributes = createPlacemarkAttributes();

  // переключение представлений
  function switchGlobe() {
    if (!wwd.flatGlobe) {
      wwd.flatGlobe = new WorldWind.Globe2D(); // создаем и запоминаем 2d глобус
      // устанавливаем ему проекцию меркатора (тут возможны другие проекции)
      wwd.flatGlobe.projection = new WorldWind.ProjectionMercator(); 
        //  запоминаем 3d глобус (текущий)
      wwd.globe3d = wwd.globe;
    }
    // переключаем по клику представления туда и обратно
    wwd.globe = (wwd.is2d = !wwd.is2d) ? wwd.flatGlobe : wwd.globe3d;
    wwd.redraw();  // нужно позвать перерисовку после переключения
  }

  // функция создает новый маркер
  function placemark(lat, lon, name) {
    // местоположение
    var position = new WorldWind.Location(lat, lon); 
    var placemark = new WorldWind.Placemark(position, true, attributes);
    placemark.label = name; // подпись
    // режим обработки высоты (прибить к поверхности)
    placemark.altitudeMode = WorldWind.CLAMP_TO_GROUND; 
    // дистанция с которой начинается масштабирование при отдалении
    placemark.eyeDistanceScalingThreshold = 2500000; 
    return placemark;
  }

  // слушатель движения мыши
  wwd.addEventListener("mousemove", function(e) {
    var x = e.clientX,
      y = e.clientY;
    var pickList = wwd.pick(wwd.canvasCoordinates(x, y));
    var o = pickList.objects.find(o => !o.isTerrain);
    document.querySelector('canvas').style.cursor = o ? "pointer" : "default";
    document.querySelector('#mouseover').innerHTML = o ? o.userObject.label : '';
  });

  // обработчик кликов
  new WorldWind.ClickRecognizer(wwd, function(recognizer) {
    var x = recognizer.clientX,
      y = recognizer.clientY;
    var pickList = wwd.pick(wwd.canvasCoordinates(x, y));
    var o = pickList.objects.find(o => !o.isTerrain);
    if (!o){
        let terrain = pickList.objects.find(o => o.isTerrain).position
        markers.removeAllRenderables();
        let pts = index.within(terrain.latitude, terrain.longitude, 1)
             .map(i => all[i])
             .forEach(c=>  markers.addRenderable(placemark(+c.lat, +c.lng, c.name)));
        
            
        return;
    }
      
    fetch("https://en.wikipedia.org/w/api.php?&origin=*&action=opensearch&search=" + o.userObject.label + "&limit=1").then(function(resp) {
      return resp.json()
    }).then(function(data) {
      popup.innerHTML += `<br><iframe src="${data.pop()}"></iframe>`;
    });
    popup.innerHTML = o.userObject.label + "<span id='close'>×</span>";
    popup.classList.add('visible');
  });
    
    function createPlacemarkAttributes(){
          // аттрибуты маркера
  var attributes = new WorldWind.PlacemarkAttributes();
  attributes.imageOffset = new WorldWind.Offset(
    WorldWind.OFFSET_FRACTION, 0.3,  
    WorldWind.OFFSET_FRACTION, 0.0); 
  attributes.labelAttributes.color = WorldWind.Color.YELLOW;
  attributes.labelAttributes.offset = new WorldWind.Offset(
    WorldWind.OFFSET_FRACTION, 0.5,
    WorldWind.OFFSET_FRACTION, 1.0);
    
  // изображение маркера, тут может быть любая картинка
  attributes.imageSource = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10px' height='10px' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1'  viewBox='0 0 100 100' enable-background='new 0 0 100 100' xml:space='preserve'%3E%3Cg%3E%3Ccircle stroke='white' stroke-width='10' fill='%2300AEEF' cx='50' cy='50' r='40' /%3E%3C/g%3E%3C/svg%3E";
        return attributes;
    }
</script>

<style>
  div span,
  div p {
    color: white;
  }

  body {
    margin: 0;
    overflow: hidden;
  }

  canvas {
    background: black;
    width: 100vw;
    height: 100vh;
  }

  div {
    width: 100vw;
    position: absolute;
    top: 0;
    padding: 5px;
    background-color: rgba(0, 0, 0, 0.5)
  }

  #popup {
    width: 80vw;
    opacity: 0;
    color: white;
    transition: 300ms;
    pointer-events: none;
    height: 80vh;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%)
  }

  #popup.visible {
    opacity: 1;
    pointer-events: all
  }

  #popup iframe {
    width: 100%;
    height: calc(100% - 30px);
    border: 0
  }

  #close {
    float: right;
    padding-right: 5px;
    cursor: pointer;
    font-size: 20px;
    transition: 300ms
  }

  #close:hover {
    color: red
  }
</style>

23
  • А можно ли фетчить инфо о стране без меток(маркеров), допустим если кликнули в любую точку на карте или глобусе? Было бы наверно ещё круче)
    – Arthur
    Commented 4 мая 2019 в 11:02
  • @Arthur запросить метки ближайшие? да есть kd-дерево, оно тут поможет, попозже добавлю еще один пример кода, чтобы этот не убивать Commented 4 мая 2019 в 11:10
  • 1
    спасибо все кому интересна эта тема! Я пока позабросил эту тему, но самое мощное, что я смог найти это D3 на ней можно сделать очень много, но и сложность Работы с ней выше чем с другими аналогами(именно просто картами). Последнее, что использовал это amCharts простой вариант и очень функционален но при любой возможности буду разбираться с D3! Commented 11 мая 2019 в 15:52
  • 1
    Вам спасибо огромное:) и всех с прошедшими/наступившими праздниками!:) Commented 12 мая 2019 в 17:49
  • 1
    @StrangerintheQ, да вот не знаю, заметил что репутация помогает таким вопросам продвигатся и на момент подумал, а что было бы, если бы каждый пользователь так поступал, но в прочем это лишь моё желание, не основанное ни на чём, последняя причина заключается в том, что я больше не активный пользователь ruSO, поэтому нужно вернуть наработанную репутацию, больше пользы для сообщества, как мне кажется
    – Arthur
    Commented 3 июн. 2019 в 18:54
6

Если нужен именно глобус а не карта, то можно использовать такую связку: Leaflet + WebGL Earth 2.0, которая расширяет базовые возможности Leaflet и добавляет 3D
введите сюда описание изображения

Плюсом такого решения является то, что при таком подходе доступны все инструменты Leaflet. К примеру для работы с метками, их кластеризация, обработка кликов, отображение атрибутивной информации.
введите сюда описание изображения Плюс появляется возможность показа в 3D. Поддерживает различные стили от MapBox:
введите сюда описание изображения

Также есть возможность создавать собственные стили.
Данные могут быть получены с серверов MapBox или с собственных гео-серверов, а также из файлов GeoJson или csv.
Ссылки:
GitHub WebGL Earth 2.0 https://github.com/webglearth/webglearth
Документация и API WebGL Earth 2.0 http://www.webglearth.org
Пример WebGL Earth 2.0 https://www.webglearth.com
Документация API и примеры Leaflet https://leafletjs.com

2
+500

Отдельный пост посвященны Cesium.

Тут нанесен topojson с границами субъектов федерации РФ, и города с кластеризацией.

введите сюда описание изображения

var cities = 'https://raw.githubusercontent.com/lutangar/cities.json/master/cities.json';

var russia = 'https://raw.githubusercontent.com/logvik/d3_russian_map/master/map_assets/russia_mercator.json';

setInitialView(50, 60);
var imagery = Cesium.createDefaultImageryProviderViewModels().slice(3);
var viewer = new Cesium.Viewer("cesiumContainer", {
    timeline: false, animation: false, geocoder: false,
    imageryProviderViewModels: imagery
});
let ds = new Cesium.CustomDataSource('billboards');
viewer.dataSources.add(ds);
clusteringSupport(ds);
var canvas = createCityImage();



viewer.dataSources.add(Cesium.GeoJsonDataSource.load(russia, {
  stroke: Cesium.Color.RED,
  fill: Cesium.Color.TRANSPARENT,
  strokeWidth: 5,
  markerSymbol: '?'
}));

fetch(cities).then(r => r.json())
    .then(r => r
          .filter((c, i) => c.country === "RU")
         // .filter((c, i) => i % 100 === 0)
                .forEach(addCity))

addMouseover();
////
var pickedObject;

window.addEventListener('click', function() {
    pickedObject&&console.log(pickedObject.id._name)
})

function addMouseover() {
    new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas)
        .setInputAction(function(movement) {
            pickedObject = viewer.scene.pick(movement.endPosition);
        }, Cesium.ScreenSpaceEventType.MOUSE_MOVE);
}

function setInitialView(lon, lat) {
    Cesium.Camera.DEFAULT_VIEW_RECTANGLE = 
        Cesium.Rectangle.fromDegrees(lon-10, lat-10, lon+10, lat+10);
    Cesium.Camera.DEFAULT_VIEW_FACTOR = 0;
}

function addCity(city) {
    var pos = Cesium.Cartesian3.fromDegrees(+city.lng, +city.lat);
    ds.entities.add({
        name : city.name,
        position: pos,
        description: `<a target="_blank" href='${"https://en.wikipedia.org/w/api.php?&origin=*&action=opensearch&search=" + city.name + "&limit=1"}'>${city.name}</a>`,
        billboard: {
            image: canvas 
        },
        label : {
            text : city.name,
            font : '14pt monospace',
            style: Cesium.LabelStyle.FILL_AND_OUTLINE,
            outlineWidth : 2,
            verticalOrigin : Cesium.VerticalOrigin.BOTTOM,
            pixelOffset : new Cesium.Cartesian2(0, -9)
        }
    })
}
              
function clusteringSupport(ds) {
    
    ds.clustering.enabled = true;
    ds.clustering.pixelRange = 35;
    
    var pinBuilder = new Cesium.PinBuilder();
    var amounts = [2000, 1000, 500, 100, 50, 10, 9, 8, 7, 6, 5, 4, 3, 2].map(i => ({
        i: i, image: pinBuilder.fromText(i + (i>9 ? "+" : ""),                   
        Cesium.Color[i>100?'RED':i>10?'BLUE':'GREEN'], 38).toDataURL()
    }));

    ds.clustering.clusterEvent.addEventListener(function(clusteredEntities, cluster) {
        
        cluster.label.show = false;
        cluster.billboard.show = true;
        cluster.billboard.id = cluster.label.id;
        cluster.billboard.verticalOrigin = Cesium.VerticalOrigin.BOTTOM;
        
        for (var i=0; i<amounts.length; i++) {
            if (clusteredEntities.length >= amounts[i].i) {
                cluster.billboard.image = amounts[i].image; 
                break;
            }       
        }
    });
}

function createCityImage(){
    var canvas = document.createElement("canvas");
    canvas.width = 16;
    canvas.height = 16;
    var ctx = canvas.getContext("2d");
    ctx.beginPath();
    ctx.arc(5, 5, 5, 0, Cesium.Math.TWO_PI, true);
    ctx.closePath();
    ctx.fillStyle = "red";
    ctx.fill();
    return canvas;
}
.cesium-widget-credits{
  display:none !important; /* only for example on ru.so*/
}
<script src="https://cesiumjs.org/releases/1.36/Build/Cesium/Cesium.js"></script>
<link rel="stylesheet" href="https://cesiumjs.org/Cesium/Apps/Sandcastle/templates/bucket.css">
<div id="cesiumContainer" class="fullSize"></div>

PS: фич у этого глобуса достаточно, буду дополнять этот пост иногда...

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.