Some tips about map visuliazation
Preparing env
Originally, I’m considering using Flask as backend, but i’m not developing a web app, and I do not have a ip and server to hold my service. I’m actually working on a desktop service. The dedicated user is not public (I do not need to consider the account, session things for different user). The goal of that project is just provide a GUI to let user input something, store in the local file in an organized way, index/search the data as needed, and draw out the searched results.
Final thought, using pyqt as the backend and using d3 for rendering map specified by geo json file.
Associated web knowledge
In html, using svg tag to specify the position of the map
the js file can be included in the header of body section of the html. the js file is separated functions to be executed each time we need to render resutls.
pyqt webengine can be viewed as a browser, but it is not flexible as actual browser(no interactive debug consol for js), the good thing is to debug the html well through general browser, when it is ready, then embed it into the pyat.
svg properties
append(“g”) group several elements together
A trick part to vis multiple feature blocks sometimes. Originally, I set .attr("fill", "white") but it turns out that for each filter, this fill is applied to the whole object once. The result can not be shown properly. Even if I use style("opacity",0.1), the feature blog that is vised firstly has been covered by multiple layers and the results are getting blur, the newly rendered feature reagion is clear. I stucked there for a long time and the issue is solved after I set attr("fill","none").
// select all SVG path elements in document order
d3.selectAll(“path”);
TODO, the coresponding relationship between the svg tag and the svg variable in js
TODO => in js
TODO, the fill for the path did not fill the inner region of the map in multiPolygon, it seems that it will fill background each time for each province. Some province is clear, some are not, the province drawn eariler are clear, so I set fill as empty
TODO draw the circle and polygon separately can put fill the region correctly.
d3 api
d3. select means to select specific html tag.
geojson how to create projection
project the geo coordinates into the 2d coordinates.
Interactive tool for choosing geo region
Sometimes, we want to interactively selecting a specific region on the map, here is a good tool to help us to do that:
Interactive geo based API tool:
https://www.birdtheme.org/useful/v3tool.html
References
good explanation about d3, geo and assocaited background knowledge, good explanatino of d3.geoPath().projection
