Skip to content

蒋波涛 / super_mapboxgl_vue

Go to a project
Toggle navigation
Toggle navigation pinning
a544a113 by unknown
Options

20191217

1 parent 610f7763
Inline Side-by-side
Showing 6 changed files with 168 additions and 5 deletions
......@@ -211,6 +211,11 @@
"resolved": "https://registry.npmjs.org/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz",
"integrity": "sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q=="
},
"@openlayers/pepjs": {
"version": "0.5.3",
"resolved": "https://registry.npmjs.org/@openlayers/pepjs/-/pepjs-0.5.3.tgz",
"integrity": "sha512-Bgvi5c14BS0FJWyYWWFstNEnXsB30nK8Jt8hkAAdqr7E0gDdBBWVDglF3Ub19wTxvgJ/CVHyTY6VuCtnyRzglg=="
},
"@supermap/iclient-common": {
"version": "10.0.0",
"resolved": "https://registry.npmjs.org/@supermap/iclient-common/-/iclient-common-10.0.0.tgz",
......@@ -6304,8 +6309,7 @@
},
"js-yaml": {
"version": "3.7.0",
"resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-3.7.0.tgz",
"integrity": "sha1-XJZ93YN6m/3KXy3oQlOr6KHAO4A=",
"resolved": "",
"dev": true,
"requires": {
"argparse": "^1.0.7",
......@@ -7422,6 +7426,17 @@
"integrity": "sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==",
"dev": true
},
"ol": {
"version": "6.1.1",
"resolved": "https://registry.npmjs.org/ol/-/ol-6.1.1.tgz",
"integrity": "sha512-0dL3i3eJqgOpqIjDKEY3grkeQnjAYfV5L/JCxhOu4SxiaizRwFrFgeas6LILRoxKa03jhQFbut2r2bbgcLGQeA==",
"requires": {
"@openlayers/pepjs": "^0.5.3",
"pbf": "3.2.1",
"pixelworks": "1.1.0",
"rbush": "^3.0.1"
}
},
"omit.js": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/omit.js/-/omit.js-1.0.2.tgz",
......@@ -7793,6 +7808,11 @@
"pinkie": "^2.0.0"
}
},
"pixelworks": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/pixelworks/-/pixelworks-1.1.0.tgz",
"integrity": "sha1-Hwla1I3Ki/ihyCWOAJIDGkTyLKU="
},
"pkg-dir": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-2.0.0.tgz",
......@@ -10366,6 +10386,14 @@
"unpipe": "1.0.0"
}
},
"rbush": {
"version": "3.0.1",
"resolved": "https://registry.npmjs.org/rbush/-/rbush-3.0.1.tgz",
"integrity": "sha512-XRaVO0YecOpEuIvbhbpTrZgoiI6xBlz6hnlr6EHhd+0x9ase6EmeN+hdwwUaJvLcsFFQ8iWVF1GAK1yB0BWi0w==",
"requires": {
"quickselect": "^2.0.0"
}
},
"read-cache": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz",
......
......@@ -18,6 +18,7 @@
"jquery": "^3.4.1",
"mapbox-gl": "^1.6.0",
"mapbox-gl-compare": "^0.3.0",
"ol": "^6.1.1",
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
......
......@@ -2,7 +2,7 @@
* @Author: jiangbotao
* @Date: 2019-12-13 23:53:57
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-16 12:57:27
* @LastEditTime: 2019-12-17 19:54:02
* @FilePath: \supermapvue\src\components\menu\MyMenu.vue
-->
<template>
......@@ -47,6 +47,10 @@
<a-menu-item key="5_3"><router-link :to="'/theme_range'">分段渲染</router-link></a-menu-item>
<a-menu-item key="5_4"><router-link :to="'/theme_label'">注记图</router-link></a-menu-item>
</a-sub-menu>
<a-sub-menu key="sub6">
<span slot="title"><a-icon type="up-square" /><span>OpenLayers</span></span>
<a-menu-item key="6_1"><router-link :to="'/map_ol'">OL</router-link></a-menu-item>
</a-sub-menu>
</a-menu>
</template>
<style scoped>
......
<!--
* @Author: jiangbotao
* @Date: 2019-12-17 19:48:20
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-17 20:36:29
* @FilePath: \supermapvue\src\components\ol\OL.vue
-->
<template>
<div >
<div id="map"></div>
</div>
</template>
<script>
import "ol/ol.css";
import { Map, View } from "ol";
import { XYZ } from 'ol/source';
import VectorSource from "ol/source/Vector";
import Point from "ol/geom/Point";
import {Draw, Modify, Snap} from 'ol/interaction';
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
import {Circle as CircleStyle, Fill, Stroke, Style} from 'ol/style';
export default {
data() {
return {
map: null
};
},
mounted() {
var tdt_vec = new TileLayer({
source: new XYZ({
url: "http://t3.tianditu.com/DataServer?T=vec_w&x={x}&y={y}&l={z}&tk=394404c8b901574fdc4cdf8c18a98448"
})
});
var tdt_cva = new TileLayer({
source: new XYZ({
url: "http://t3.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=394404c8b901574fdc4cdf8c18a98448"
})
});
// 矢量绘制图层
var source = new VectorSource();
var vectorLayer = new VectorLayer({
source: source,
style: new Style({
fill: new Fill({
color: 'rgba(255, 0, 0, 0.2)'
}),
stroke: new Stroke({
color: '#ffcc33',
width: 2
}),
image: new CircleStyle({
radius: 7,
fill: new Fill({
color: '#ffcc33'
})
})
})
});
this.map = new Map({
target: "map",
layers: [
tdt_vec, tdt_cva, vectorLayer
],
view: new View({
projection: "EPSG:4326",
center: [120.79, 27.99],
zoom: 12,
minZoom: 10,
maxZoom: 18
})
});
var modify = new Modify({source: source});
this.map.addInteraction(modify);
modify.on('modifyend',function(e){
var features = e.features.getArray();
console.log(features);
});
var draw, snap; // global so we can remove them later
function addInteractions(map) {
draw = new Draw({
source: source,
type: 'Point'
});
draw.on('drawstart', function (e) {
source.clear(); // implicit remove of last feature.
});
draw.on('drawend', function(evt){
var feature = evt.feature;
var p = feature.getGeometry();
console.log(p.getCoordinates());
var coord = p.getCoordinates();
map.getView().animate({center: [coord[0], coord[1]]});
});
map.addInteraction(draw);
snap = new Snap({source: source});
map.addInteraction(snap);
}
/**
* Handle change event.
*/
// typeSelect.onchange = function(map) {
// map.removeInteraction(draw);
// map.removeInteraction(snap);
// addInteractions();
// };
addInteractions(this.map);
}
};
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#map {
position: absolute;
height: 100%;
width: 100%;
background-color: white
}
</style>
......@@ -2,7 +2,7 @@
* @Author: jiangbotao
* @Date: 2019-12-12 17:40:15
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-17 00:26:31
* @LastEditTime: 2019-12-17 20:35:13
* @FilePath: \supermapvue\src\main.js
*/
import Vue from 'vue'
......
......@@ -2,7 +2,7 @@
* @Author: jiangbotao
* @Date: 2019-12-12 17:40:15
* @LastEditors: jiangbotao
* @LastEditTime: 2019-12-15 18:08:19
* @LastEditTime: 2019-12-17 20:37:03
* @FilePath: \supermapvue\src\router\index.js
*/
import Vue from 'vue'
......@@ -116,6 +116,11 @@ export default new Router({
path: '/mvt_wzdemo',
name: 'Theme_wzdemo',
component: () => import('@/components/vt/Map_wzdemo')
},
{
path: '/map_ol',
name: 'Map_OL',
component: () => import('@/components/ol/OL')
}
]
})
......