20

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

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

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

  1. SVG
  2. Canvas

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

3
  • @StrangerintheQ, неа, думаю что можно добавить ещё какие-то, было бы полезно)
    – Arthur
    3 мая 2019 в 11:58
  • @Arthur я готовлю ответ с использованием cesium, какие темы осветить? Там уже есть маркеры и кластеризация, думаю еще что добавить 10 мая 2019 в 14:23
  • @StrangerintheQ, привет, я рад, чем больше плюсов - тем больше охват данных тем аудиторией. Я думаю что можно попробовать много вариантов, главное чтобы это можно было эффективно применять на практике
    – Arthur
    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
    4 мая 2019 в 11:02
  • @Arthur запросить метки ближайшие? да есть kd-дерево, оно тут поможет, попозже добавлю еще один пример кода, чтобы этот не убивать 4 мая 2019 в 11:10
  • 1
    спасибо все кому интересна эта тема! Я пока позабросил эту тему, но самое мощное, что я смог найти это D3 на ней можно сделать очень много, но и сложность Работы с ней выше чем с другими аналогами(именно просто картами). Последнее, что использовал это amCharts простой вариант и очень функционален но при любой возможности буду разбираться с D3! 11 мая 2019 в 15:52
  • 1
    Вам спасибо огромное:) и всех с прошедшими/наступившими праздниками!:) 12 мая 2019 в 17:49
  • 1
    @StrangerintheQ, да вот не знаю, заметил что репутация помогает таким вопросам продвигатся и на момент подумал, а что было бы, если бы каждый пользователь так поступал, но в прочем это лишь моё желание, не основанное ни на чём, последняя причина заключается в том, что я больше не активный пользователь ruSO, поэтому нужно вернуть наработанную репутацию, больше пользы для сообщества, как мне кажется
    – Arthur
    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: фич у этого глобуса достаточно, буду дополнять этот пост иногда...

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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