maps 相关问题

我的纽约 d3 地图将无法加载。有人可以帮忙吗？这是我的代码：身体 { 字体：12px 无衬线； } 小路 { 圣...</desc> <question vote="1"> <p>我的纽约 d3 地图将无法加载。有人可以帮忙吗？</p> <p>这是我的代码：</p> <pre><code><!DOCTYPE html> <meta charset="utf-8"> <style> body { font: 12px sans-serif; } path { stroke-width: 1.75px; stroke: #531b93; fill: #919191; cursor: pointer; } path:hover, path.highlighted { fill: #0096ff; } div.tooltip { position: absolute; background-color: white; border: 1px solid black; color: black; font-weight: bold; padding: 4px 8px; display: none; } </style> <body> <script src="http://d3js.org/d3.v3.min.js"></script> <script> //Map dimensions (in pixels) var width = 600, height = 600; //Map projection var projection = d3.geo.mercator() .scale(58722.369041340586) .center([-73.97768078496284,40.705833704252484]) //projection center .translate([width/2,height/2]) //translate to center the map in view //Generate paths based on projection var path = d3.geo.path() .projection(projection); //Create an SVG var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); //Group for the map features var features = svg.append("g") .attr("class","features"); //Create zoom/pan listener //Change [1,Infinity] to adjust the min/max zoom scale var zoom = d3.behavior.zoom() .scaleExtent([1, Infinity]) .on("zoom",zoomed); svg.call(zoom); //Create a tooltip, hidden at the start var tooltip = d3.select("body").append("div").attr("class","tooltip"); d3.json("NYC_MapInfos.geojson",function(error,geodata) { if (error) return console.log(error); //unknown error, check the console //Create a path for each map feature in the data features.selectAll("path") .data(geodata.features) .enter() .append("path") .attr("d",path) .on("mouseover",showTooltip) .on("mousemove",moveTooltip) .on("mouseout",hideTooltip) .on("click",clicked); }); // Add optional onClick events for features here // d.properties contains the attributes (e.g. d.properties.name, d.properties.population) function clicked(d,i) { } //Update map on zoom/pan function zoomed() { features.attr("transform", "translate(" + zoom.translate() + ")scale(" + zoom.scale() + ")") .selectAll("path").style("stroke-width", 1.75 / zoom.scale() + "px" ); } //Position of the tooltip relative to the cursor var tooltipOffset = {x: 5, y: -25}; //Create a tooltip, hidden at the start function showTooltip(d) { moveTooltip(); tooltip.style("display","block") .text(d.properties.PO_NAME); } //Move the tooltip to track the mouse function moveTooltip() { tooltip.style("top",(d3.event.pageY+tooltipOffset.y)+"px") .style("left",(d3.event.pageX+tooltipOffset.x)+"px"); } //Create a tooltip, hidden at the start function hideTooltip() { tooltip.style("display","none"); } </script> </code></pre> <p>这是 geojson 文件： <a href="http://data.beta.nyc//dataset/3bf5fb73-edb5-4b05-bb29-7c95f4a727fc/resource/6df127b1-6d04-4bb7-b983-07402a2c3f90/download/f4129d9aa6dd4281bc98d0f701629b76nyczipcodetabulationareas.geojson" rel="nofollow">http://data.beta.nyc//dataset/3bf5fb73-edb5-4b05-bb29-7c95f4a727fc/resource/6df127b1-6d04-4bb7 -b983-07402a2c3f90/下载/f4129d9aa6dd4281bc98d0f701629b76nyczipcodetabulationareas.geojson</a></p> </question> <answer tick="true" vote="0"> <p>您可以尝试使用 <a href="https://github.com/gagan-bansal/geojson2svg" rel="nofollow noreferrer">geojson2svg</a> 模块使用 geojson 数据创建 SVG 地图。由于这只是简单的 JavaScript，因此您将拥有更多控制权。这是你的例子</p> <p>您的 html 页面 (index.html):</p> <pre><code><html> <head> <link rel="stylesheet" href="./map.css"/> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/geojson2svg/1.0.3/geojson2svg.min.js"></script> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js"></script> <script type="text/javascript" src="https://cdn.rawgit.com/geosquare/reproject-spherical-mercator/v0.1.3/dist/reproject-spherical-mercator.min.js"></script> <script type="text/javascript" src="https://cdn.rawgit.com/geosquare/geojson-bbox/master/dist/geojson-bbox.min.js"></script> </head> <body> <h2>Example of New York postal code map created with geojson2svg</h2> <div id="mapArea" style="width:600px;height:600px;"> <svg id="map" xmlns="http://www.w3.org/2000/svg" width="600" height="600" x="0" y="0" > </svg> <div class="tooltip" ></div> </div> <script type="text/javascript" src="./main.js"></script> </body> </code></pre> <p>Javascript代码（main.js）：</p> <pre><code>var dataURI = "http://data.beta.nyc//dataset/3bf5fb73-edb5-4b05-bb29-7c95f4a727fc/resource/6df127b1-6d04-4bb7-b983-07402a2c3f90/download/f4129d9aa6dd4281bc98d0f701629b76nyczipcodetabulationareas.geojson"; $.get(dataURI,drawGeoJSON); $('#map').on('mouseover','path',function(ev) { console.log(ev.target.feature.properties.postalCode); var tooltip = document.querySelector('.tooltip'); tooltip.style.top = ev.pageY - 30; tooltip.style.left = ev.pageX + 5; tooltip.style.display = 'block'; tooltip.innerHTML = ev.target.feature.properties.PO_NAME; }); $('#map').on('mouseout','path',function(ev) { var tooltip = document.querySelector('.tooltip'); tooltip.style.display = 'none'; }); function drawGeoJSON(geojson) { // covert wgs84 data to Web Mercator projection var geojsonMerc = reproject(geojson); // reproject: https://github.com/geosquare/reproject-spherical-mercator var extent = bbox(geojsonMerc); // bbox: https://github.com/geosquare/geojson-bbox var mapExtent = { left: extent[0], bottom: extent[1], right: extent[2], top: extent[3] }; var svgMap = document.getElementById('map'); // geojson2svg: https://github.com/gagan-bansal/geojson2svg var convertor = geojson2svg( { viewportSize: {width:600,height:600}, mapExtent: mapExtent, attributes: { 'vector-effect':'non-scaling-stroke' }, explode: false } ); geojsonMerc.features.forEach(function(f) { var svgStr = convertor.convert(f,{attributes: {id: 'pc-'+f.properties.OBJECTID}}); var svg = parseSVG(svgStr); svgMap.appendChild(parseSVG(svgStr)); var svgEle = svgMap.querySelector('#' + 'pc-'+f.properties.OBJECTID); svgEle.feature = f; }); } //parseSVG from http://stackoverflow.com/questions/3642035/jquerys-append-not-working-with-svg-element function parseSVG(s) { var div= document.createElementNS('http://www.w3.org/1999/xhtml', 'div'); div.innerHTML= '<svg xmlns="http://www.w3.org/2000/svg">'+s+'</svg>'; var frag= document.createDocumentFragment(); while (div.firstChild.firstChild) frag.appendChild(div.firstChild.firstChild); return frag; } </code></pre> <p>和CSS（map.css）：</p> <pre><code>body { font: 12px sans-serif; } path { stroke-width: 1px; stroke: #531b93; fill: #919191; cursor: pointer; } path:hover, path.highlighted { fill: #0096ff; } div.tooltip { position: absolute; background-color: white; border: 1px solid black; color: black; font-weight: bold; padding: 4px 8px; display: none; } </code></pre> <p>如需提前使用，请查看<a href="https://maps-on-blackboard.github.io/tag/geojson2svg/" rel="nofollow noreferrer">此博客</a></p> </answer> </body></html>

javascript d3.js maps geojson topojson

回答 0 投票 0

传单地图未完全加载，当我打开检查元素时它将完全加载

下面是调用onclick事件的函数函数drawMapFromWms(latt,longt){ document.getElementById('hrymap').innerHTML = ""; document.getElementById('hrymap').innerH...

javascript user-interface leaflet maps inspect

回答 4 投票 0

Google 导航 SDK Android 在第一个路径点停止多个目的地路线

我编写了这段代码，它应该将用户带到所有路径点然后结束路线，但它在到达第一个点时结束。问题视频： https://youtube.com/shorts/MiCmPkNRTkI 正如你可以...

android kotlin google-maps navigation maps

回答 1 投票 0

在Python中使用Bing Maps API密钥绘制多边形字符串时增加缩放级别时颜色反转

我想增加由使用 matplotlib 库在 Bing 地图上绘制的多边形组成的绘图的缩放级别。我正在使用以下代码：导入请求从 PIL 导入图像从 io 导入 BytesIO