地图需要的参数 展示的宽 高 geojson文件数据
json数据可以通过
阿里地图数据
下载
const width = 1920;
const height = 1080;
const geoJson = {};
const dom = d3.select('#app');
const projection = d3.geoEquirectangular()
.fitExtent([
[0, 0],
[width, height]
], geoJson)
.translate([width / 2, height / 2]);
const path = d3.geoPath().projection(projection);
const features = geoJson.features;
const color = d3.scaleLinear()
.domain([0, features.length])
.range(["brown", "steelblue"]);
const svg = dom.append('svg').attr('width', width).attr('height', height);
const main = svg.append('g');
main.selectAll('path')
.data(features)
.enter()
.append('path')
.attr('d', path)
.attr('fill', (d, i) => {
return color(i);
.attr('stroke', 'rgba(255, 255, 255, 1')
.attr('stroke-width', 1)
.on('click', (d, i) => {
console.log(d)
geojson2svg
给定svg视口大小并映射范围,将geojson转换为svg字符串。 geojson2svg可以用于客户端(在浏览器中)或服务器端(与NodeJs一起使用)。
检查, 比例尺和示例,以证明将geojson转换为地图非常容易。
在node.js中使用或与browserify一起使用
npm install geojson2svg
要以html页面标准方式包括在内,请下载文件dist / geojson2svg.min.js
< script type =" text/javascript " src =" path/to/geojson2svg.min.js " > </ script >
这将创建一个全局变量'geojson2svg'
geojson2svg也可以在上并且可以像下面这样包含:
< script type =" text/javascr
cat example.geo.json | npx geojson-to-svg-cli > example.svg
或全局安装并运行它:
npm install -g geojson-to-svg-cli
cat example.geo.json | geojson-to-svg-cli > example.svg
Usage:
geojson-to-svg [-p mercator]
Options:
--projection -p Which projection to use. Default: mercator
Refer to npmjs.com/projections for a l
1.必要性
1.地图资源一般是只有省、市、县级别的 geojson 文件,而我们可能需要更细粒度的地图来展示(如:街道、社区)
2.数据来源不统一(全国、省使用的是百度的加密地图;市、县使用的是高德地图),就有可能在地图合并时,边界不重合,所以在必要时也需要对已有地图进行微调。
2.资源准备
1.http://geojson.io 可以预览及简单编辑 geojson 文件的网站
2.https://www.npmjs.com/package/svg2geojson 将 svg斜体样式 转换成 geojs
首先需要站在巨人的肩膀上,下载几个依赖。
svg2genjson 依靠这个可以将svg转为可使用的genjson。尽量用 yarn 来安装依赖,npm 会有问题(你的node.js版本在11以下或者gulp版本>4就没问题)
可以在package.json中加这个代码解决
// 锁定版本
"resolutions": {
"graceful-fs": "4.2.2"..
#SVG到JSON一种将SVG字符串转换为JSON数据并可选地呈现统计信息的方法。
#Usage创建新实例,提供svg字符串,还可以选择传入options 。
var svg_json = new SVGToJSON ( svg [ , options ] ) ;
#API ## Object.json SVGToJSON()返回一个对象。 OBJ.json是主要的JSON数据。 它是所有SVG标签的数组。
var svg_json = new SVGToJSON ( svg ) ;
svg_json = {
json : [ ... ]
## Object.json [I]中的每个标签Object.json有四个值。
var first_tag = svg_json . json [ 0 ] ;
first_tag = {
attrs : {
const { parse , stringify } = require ( 'svgson' )
// ----------------------------
// Convert SVG to JSON AST
// ----------------------------
parse ( `
<line xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed xss=removed>
</line