Transfer from original source to Web, Android, iOS map solution
Tool CHAIN GIS Toolset
- Opengeo Suite
Contains PostGIS, GeoServer, Geowebcache, Openlayers, and QGIS
Map preparation
QGIS
Import, export, edit. SHP,POSTGIS,GEOTIFF,GEOJSON,DXF and other GIS files, to the normal picture registration to geographical coordinates
Tutorial: http://www.qgistutorials.com/en/
DraftSight
Editing CAD Files
SketchUp generates 3D views from CAD Files
Map Service
GeoServer
The map service is published. Use as a war into Tomcat or jetty. A variety of GIS data such as Geotiff,.shp,postgis can be published as maps. Browse through Openlayer or Qgis.
Geowebcache
Cache map tiles for improved performance. is built into the latest version of GeoServer.
Tilestream
Publish the. mbtile file as a map service
Offline Map Packaging
Tilemill
Beautify and package files such as Geotiff,geojson,csv,shp,postgis. Mbtile tile Map File, SQLite file containing map information.
Tutorial: https://www.mapbox.com/tilemill/docs/crashcourse/introduction/
Mbutil
Decompose. mbtile files into normal pictures and JSON files
Map view
Mapbox.js
Displays the TMS map (Javascript) in the browser. Based on leaflet. Can be used in conjunction with Tilesteam. example:https://www.mapbox.com/mapbox.js/example/v1.0.0/
Mapbox IOS SDK
Display a TMS or. mbtile map on an iOS device, based on Route-me
Mapbox Android SDK
Display a TMS or. mbtile map on an Android device, based on osmdroid
Routine://depot/research/mapstudy/tstmapbox/
Osmdroid
Display TMS or. Mbtile Maps on Android devices
Routine://depot/research/mapstudy/tstosmdroid/
Osmbonuspack
Added features such as POI display for osmdroid
Routine://depot/research/mapstudy/tstosmbonuspack/
Leaflet
Displays the TMS map (Javascript) in the browser.
Openlayers
Displays TMS, WMS Maps (JAVASCRIPT) in the browser. Powerful and complex than leaflet.
Indoor.js
Indoor toolset, based on Opensteetmap,tilemill,leaflet. is not yet stable.
D3.js
JavaScript Data Display Tool
Tool chain Diagram
Offline map making examples
Assuming the input is DWG, the Wakahara graph is a bitmap (jpg/png) and jumps directly to the 5th step
Import dwg in SketchUp. Create polygons with make Faces plugin (YouTube)
Stretch to 3D model in SketchUp
Export, if rendered better with render
Open the Qgis, raster, registration tool. The first icon on the left opens a basemap. Click on the yellow gear. Set the output to Base.tif. The target space Reference system is epsg:3857. Tick "load into Qgis when done"
At the point of the figure 2 points. Enter the point coordinate value in the popup box. Enter the pixel coordinates.
Click the second icon to complete the registration.
Add a vector layer description beacon with a type of "point", a new attribute Ccode, and an integer type (Beacon content code). New property name, type is a string.
Click the yellow Pencil to edit mode, then click the * icon, click on the map to increase the location of the beacon. Add 3 points, ID and Ccode are three-to-one respectively. Click the small yellow pencil again to exit edit mode.
Add a vector layer description beacon, type "polygon", new property name, type String.
Click the yellow Pencil to edit mode, then click the * icon to hook up the fence area on the map. and named separately.
Right-side bitmap layer, save as GeoTiff
Right-click vector layers. Save As Geojson
Open Tilemill,project-->new Project
Layers-->add Layer, select the Base.tif,srs you just exported, select 900913. "Save & Style". Click the magnifying glass on the layer #base to zoom to the appropriate size.
Delete the contries layer and the corresponding MSS. Change the background-color to be consistent with the Basemap
"+ Add Layer" Add 2 geojson files just exported
Select the left Finger ==>teaser. The following layer is selected as Hotarea. Fill in {{{name}}} in the contents box above
Save later. You can see the hot zone effect. When the mouse is moved to the hot zone. The corresponding name is displayed.
Set polygon-opacity,line-opacity and marker-opacity to 0. Click Export Mbtiles. Enlarge the image to zoom level 16 and place the center sign in the middle of the chart. shift+ Drag the mouse box to select the map area. Click Export as file. Exported example.mbtiles files can be found in ~/documents/mapbox/export
Start the map service. Perform Tilestream--tiles=/users/fangjian/documents/mapbox/export in terminal and then visit http://localhost:8888/to see that the map is in effect. Visit Http://localhost:8888/v2/example.json to download Tilejson. Visit http://localhost:8888/v2/example.mbtiles to download the Mbtiles file. If you only make offline maps, you can skip this step.
Unpack Example.mbtiles as normal images and JSON files. In the directory where the. Mbtiles is located. Run Mb-util Example.mbtile Example
The picture file was solved in the example directory.
Copy Metadata.json to Tile.json to Example.json format. Change center and bounds to arrays (if only offline files can be skipped)
Reference Metadata.json Modifying the https://www.mapbox.com/mapbox.js/example/v1.0.0/example
<script>var map = l.mapbox.map (' map '); var stamenlayer = L.tilelayer ('./{z}/{x}/{y}.png ', { ' Map tiles by <a href= ' http:/ Dreamvoc.com ">DREAMVOC</A>." , minzoom:+, maxzoom:+}). AddTo (map); Map.setview ([-0.0047,0.0075], +) ; </script>
Copy Ccode.geojson and Hotarea.geojson to the current directory. Edit the contents of the file as Var ccode={... var hotarea={...map.featurelayer.setgeojson (ccode); then add the following code
<script src= "Ccode.geojson" ></script><script src= "Hotarea.geojson" ></script><script >Map.featureLayer.setGeoJSON (ccode); </script><script>L.geojson (Hotarea). AddTo (map); </script>
Join the Hot Zone reference article http://leafletjs.com/examples/choropleth.html.
Support for Web, Android, and iOS maps solutions