vuejs - 使用d3 ,一种非常著名的图片地图渲染组件

访问量: 151

参考:

https://marshal.ohtly.com/2018/09/03/Drow-an-China-Map-With-D3-js/

package.json: 

$ npm install d3

在main.js中:

// 引入d3
import * as d3 from 'd3'
Vue.prototype.$d3 = d3

记得在src/static 目录下,增加 china_map.json , 地址:  https://github.com/yezongyang/china-geojson

对应的vue页面:

<div id='map_by_grid'>

      init_china_map (selector){
        let width = 550
        let height = 420
        let d3 = this.$d3
        console.info('== in mounted',  d3)
        console.info('== in mounted, this.$d3',  this.$d3)
        let svg = d3.select(selector).append("svg")
            .attr("width", width)
            .attr("height", height)
            .append("g")
            .attr("transform", "translate(0,0)")

        let projection = d3.geoMercator()
            .center([104, 38])
            .scale(500)
            .translate([width / 2, height / 2])

        let path = d3.geoPath()
            .projection(projection)

        d3.json("static/china_map.json").then((geojson) => {
            svg.append("path")
                .attr("d", path(geojson))
                .attr('fill', 'Lavender')
                .attr("stroke", "DarkGrey")
                .attr("stroke-width", 1)
        })

调用:

init_china_map("#map_by_grid")

订阅/RSS Feed

Subscribe

分类/category