Support for Web, Android, and iOS maps solutions

Transfer from original source to Web, Android, iOS map solution

Tool CHAIN GIS Toolset

1. Opengeo Suite
   Contains PostGIS, GeoServer, Geowebcache, Openlayers, and QGIS

Map preparation

1. 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/

2. DraftSight
   Editing CAD Files

3. SketchUp generates 3D views from CAD Files

Map Service

1. 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.

2. Geowebcache
   Cache map tiles for improved performance. is built into the latest version of GeoServer.

3. Tilestream
   Publish the. mbtile file as a map service

Offline Map Packaging

1. 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/

2. Mbutil
   Decompose. mbtile files into normal pictures and JSON files

Map view

1. 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/

2. Mapbox IOS SDK
   Display a TMS or. mbtile map on an iOS device, based on Route-me

3. Mapbox Android SDK
   Display a TMS or. mbtile map on an Android device, based on osmdroid
   Routine://depot/research/mapstudy/tstmapbox/

4. Osmdroid
   Display TMS or. Mbtile Maps on Android devices
   Routine://depot/research/mapstudy/tstosmdroid/

5. Osmbonuspack
   Added features such as POI display for osmdroid
   Routine://depot/research/mapstudy/tstosmbonuspack/

6. Leaflet
   Displays the TMS map (Javascript) in the browser.

7. Openlayers
   Displays TMS, WMS Maps (JAVASCRIPT) in the browser. Powerful and complex than leaflet.

8. Indoor.js
   Indoor toolset, based on Opensteetmap,tilemill,leaflet. is not yet stable.

9. 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