Support for Web, Android, and iOS maps solutions

Source: Internet
Author: User
Tags postgis

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.