gisq-ol-mobile-offline/README.md

## Project setup ``` npm install ```

# default

## Project setup
```
npm install
```

### Compiles and hot-reloads for development
```
npm run serve
```

### Compiles and minifies for production
```
npm run build
```

### Run your tests
```
npm run test
```

### Lints and fixes files
```
npm run lint
```

### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

### publish
```
npm publish --registry http://registry.npmjs.org
````
### DEMO
```

<template>
	<div id="map" ref="map" class="map"></div>
</template>

<script>
	<template>
		<div id="map" ref="map" class="map"></div>
	</template>
	
	<script>
		import 'ol/ol.css';
		import {
			transform
		} from 'ol/proj'
		import OlMap from 'ol/Map'
		import OSM from 'ol/source/OSM'
		import vectorSource from 'ol/source/Vector'
		import TileLayer from 'ol/layer/Tile'
		import VectorLayer from 'ol/layer/Vector'
		import GeoJSON from 'ol/format/GeoJSON'
		import View from 'ol/View';
		import shpjs from 'shpjs';
		import {
			gisqOlMobileProj,
			GisqOfflineShpLayer,
			GisqOfflineMbTilesLayer,
			gisqOlMobileStyle,
			GisqOfflineGeoJsonLayer
		} from "gisq-ol-mobile-offline"
		export default {
			name: 'HelloWorld',
			components: {
	
			},
			data() {
				return {
	
				}
			},
			mounted() {
	
				var plusReady = function(callback) {
					if (window.plus) {
						alert(1);
						callback();
					} else {
						document.addEventListener('plusready', callback);
					}
				};
				plusReady(this.initMap)
				//this.initMap();
			},
			methods: {
				initMap() {
					var localMbTilesPath = "/sdcard/gisqmap/cr.mbtiles";
					localMbTilesPath = "/sdcard/gisqmap/A3857.sqlite";
					var localShpPath = "/sdcard/gisqmap/shp/xzc";
					var localGeoJsonSqlPath = "/sdcard/gisqmap/geojson/xhq_dk.sqlite";
					var gisqShpLayer = new GisqOfflineShpLayer({
						path: localShpPath,
						featureName: "XZQ",
						projection: gisqOlMobileProj.proj4528.proj,
					});
					var mblayers = new GisqOfflineMbTilesLayer({
						path: localMbTilesPath,
						projection: gisqOlMobileProj.proj3857.proj
					});
					var geoJsonTile=new GisqOfflineGeoJsonLayer({
						path: localGeoJsonSqlPath,
						dataProjection: gisqOlMobileProj.proj3857.proj,
						featureProjection: gisqOlMobileProj.proj3857.proj,
					});
					var map = new OlMap({
						target: 'map',
						layers: [
							/* new TileLayer({
						source: new OSM()
					}) */
							mblayers.getLayer(), gisqShpLayer.getLayer(),geoJsonTile.getVectorTileLayer()
						],
						view: new View({
							center: transform([120, 30], 'EPSG:4326', 'EPSG:3857'),
							//resolutions:res4490,//4490等非4326,3857的底图 需要带上resolutions
							//projection:prj4490,//4490等非4326,3857的底图 需要带上prj4490 同时配合resolutions
							zoom: 9,
							minZoom: 1,
							maxZoom: 19
						})
					});
				}
			}
		}
	</script>
	
	<!-- Add "scoped" attribute to limit CSS to this component only -->
	<style>
		.map {
			width: 100%;
			height: 100%;
		}
	</style>
	

```