|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381 |
- <template>
- <div>
- <!-- <p class="fuTitle">地块位置绘制</p>-->
- <div id="full-screen-acceptance" style="width: 100%;height:73vh;">
- <div :id=this.uuidMap style="width: 100%;height: 100%"></div>
- <div id='land-btn-wrap'>
- <!--<el-button :id=this.drawingPolygonMap style="background-color:#D0EEFF;color:#1E88C7" @click="" type="primary">画图</el-button>-->
- <!--<input id="drawRemove" type="button" class="ant-btn ant-btn-red" value="取消"/> -->
- <!--<el-button :id=this.drawingPolygonMap style="background-color:#D0EEFF;color:#1E88C7" type="primary">重置图层</el-button>-->
- <input :id="this.drawingPolygonMap" class="ant-btn ant-btn-red" type="button" value="画图"/>
- <input :id="this.drawingResetMap" type="button" class="ant-btn ant-btn-red" value="重置图层"/>
- </div>
- </div>
- <div id="info" style="display: none"></div>
- </div>
- </template>
-
- <script>
- import {getQueryLand} from "@/api/homesteadSurvey/zjdzd";
- import $ from "jquery";
-
- export default {
- components: {
- getQueryLand,
- },
- data() {
- return {
- closeMoule: null,
- uuidMap: this.guidProduct(),
- drawingPolygonMap: this.guidProduct(),
- drawingResetMap: this.guidProduct(),
- };
- },
- props: ['theGeom','message'],
- // created() {
- // // setTimeout(() => {
- // // this.drawingPaceCountryLine();
- // // }, 100);
- // },
- methods: {
- //地图加载
- formSubmit(){
- //父组件监听的名字必须是formSubmit
- // 子组件调用父组件的方法并传参
- if(this.closeMoule =="" || this.closeMoule == null){
- this.$emit('formSubmit', null);
- }else{
- this.$emit('formSubmit', JSON.stringify(this.closeMoule));
- }
- },
- guidProduct(){
- return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
- var r = Math.random() * 16 | 0,
- v = c == 'x' ? r : (r & 0x3 | 0x8);
- return v.toString(16);
- });
- },
- //地图查看
- drawingPaceCountryLine() {
- //加载地图编辑
- var that = this;
- var map;
- //var hc_land;
- var draw; // global so we can remove it later
- var vector_drawing;
- if (that.message != null && that.message != ""
- && that.message != undefined) {
- document.getElementById(that.uuidMap).innerHTML = '';
- var hc_land;
- var hc_landFuther;
- var draw; // global so we can remove it later
- var vector_drawing;
- var projection = new ol.proj.Projection({
- //地图投影类型
- code: "EPSG:3857",
- units: "degrees",
- //extent:extent
- });
-
- var aerial = new ol.layer.Tile({
- source: new ol.source.XYZ({
- url: "http://t0.tianditu.gov.cn/img_w/wmts?" +
- "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
- "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=cc4aba6e967096098249efa069733067",
- }),
- isGroup: true,
- name: "卫星影像图",
- });
-
- var yingxzi = new ol.layer.Tile({
- source: new ol.source.XYZ({
- url: "https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067",
- }),
- isGroup: true,
- name: "天地图文字标注--卫星影像图",
- });
- //加载地图
- map = new ol.Map({
- controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]), //隐藏放大缩小按钮
- layers: [aerial, yingxzi],
- projection: projection,
- target: that.uuidMap,
- view: new ol.View({
- //center: ol.proj.fromLonLat([115.452752, 31.789033]),
- zoom: 15,
- minZoom: 5, //地图缩小限制
- maxZoom: 18.3, //地图放大限制
- }),
- });
- //图层查询定位开始 ---------start
- if(this.message.substring(0,1) =="{"){
- // var theGeomMap =this.message.replace("Point", "MultiPolygon");
- // var pointLeft = theGeomMap.replace("[", "[[[[");
- // var pointRight = pointLeft.replace("]", "]]]]");
- hc_land = new ol.layer.Vector({
- title: "add Layer",
- source: new ol.source.Vector({
- projection: projection,
- features: new ol.format.GeoJSON().readFeatures("{\n" +
- " \"type\": \"Feature\",\n" +
- " \"geometry\":" + this.message + "}"),
- }),
- style: new ol.style.Style({
- fill: new ol.style.Fill({
- //矢量图层填充颜色,以及透明度
- color: "rgba(204, 255, 204,0.3)",
- }),
- stroke: new ol.style.Stroke({
- //边界样式
- color: "#47c68f",
- width: 3,
- }),
- }),
- });
- map.addLayer(hc_land);
- var maxXMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxX;
- var maxYMap = hc_land.values_.source.featuresRtree_.rbush_.data.maxY;
- var minXMap = hc_land.values_.source.featuresRtree_.rbush_.data.minX;
- var minYMap = hc_land.values_.source.featuresRtree_.rbush_.data.minY;
- //定位查询位置
- var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置
- map.getView().animate({
- // 只设置需要的属性即可
- center: center, // 中心点
- zoom: 17.9, // 缩放级别
- rotation: undefined, // 缩放完成view视图旋转弧度
- duration: 1000, // 缩放持续时间,默认不需要设置
- });
- }
- // if(this.message.substring(0,1) =="["){
- // var zbNew = JSON.stringify({"type": "MultiPolygon", "coordinates": [[[this.message.replaceAll("\"","")]]]});
- // var leftJoin = zbNew.replace("\"[","[");
- // var rightJoin = leftJoin.replace("\"]","]");
- // hc_landFuther = new ol.layer.Vector({
- // title: "add Layer",
- // source: new ol.source.Vector({
- // projection: projection,
- // features: new ol.format.GeoJSON().readFeatures("{\n" +
- // " \"type\": \"Feature\",\n" +
- // " \"geometry\":" + rightJoin + "}"),
- // }),
- // style: new ol.style.Style({
- // fill: new ol.style.Fill({
- // //矢量图层填充颜色,以及透明度
- // color: "rgba(204, 255, 204,0.3)",
- // }),
- // stroke: new ol.style.Stroke({
- // //边界样式
- // color: "#47c68f",
- // width: 3,
- // }),
- // }),
- // });
- // map.addLayer(hc_landFuther);
- // var maxXMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.maxX;
- // var maxYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.maxY;
- // var minXMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minX;
- // var minYMap = hc_landFuther.values_.source.featuresRtree_.rbush_.data.minY;
- // //定位查询位置
- // var center = ol.extent.getCenter([maxXMap, maxYMap, minXMap, minYMap]); //获取边界区域的中心位置
- // map.getView().animate({
- // // 只设置需要的属性即可
- // center: center, // 中心点
- // zoom: 17.9, // 缩放级别
- // rotation: undefined, // 缩放完成view视图旋转弧度
- // duration: 1000, // 缩放持续时间,默认不需要设置
- // });
- // }
- //图层查询定位结束 ---------end
- //开始绘制地图
- $("#"+this.drawingPolygonMap).click(function () {
- map.removeLayer(hc_land);
- //map.removeLayer(hc_landFuther);
- map.removeLayer(vector_drawing);
- //that.closeMoule = null;
- map.removeInteraction(draw);
- //var source = new ol.source.Vector({wrapX: false});
- vector_drawing = new ol.layer.Vector({
- source: new ol.source.Vector(),
- });
- map.addLayer(vector_drawing);
-
- function addInteraction() {
- draw = new ol.interaction.Draw({
- source: vector_drawing.getSource(),
- type: "Polygon"
- });
- draw.on('drawend', function (evt) {
- var feature = evt.feature;
- var geometry = feature.getGeometry();
- var coordinate = geometry.getCoordinates();
- that.closeMoule = coordinate;
- that.formSubmit();
- });
- map.addInteraction(draw);
- }
-
- addInteraction();
- });
- //清除画图鼠标点击事件
- // $("#drawRemove").click(function () {
- // //map.addLayer(hc_land);
- // map.removeInteraction(draw);
- // //map.removeLayer(vector_drawing);
- // });
- //还原之前图层
- $("#"+this.drawingResetMap).click(function () {
- if(that.closeMoule !=null) {
- map.removeLayer(vector_drawing);
- //map.removeLayer(hc_landFuther);
- map.removeInteraction(draw);
- map.addLayer(hc_land);
- //map.addLayer(hc_landFuther);
- // that.closeMoule = null;
- that.formSubmit();
- }
- });
- } else{
- //this.closeMoule = null;
- document.getElementById(that.uuidMap).innerHTML = '';
- var projection = new ol.proj.Projection({
- //地图投影类型
- code: "EPSG:3857",
- units: "degrees",
- //extent:extent
- });
-
- var aerial = new ol.layer.Tile({
- source: new ol.source.XYZ({
- url: "http://t0.tianditu.gov.cn/img_w/wmts?" +
- "SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles" +
- "&TILEMATRIX={z}&TILEROW={y}&TILECOL={x}&tk=cc4aba6e967096098249efa069733067",
- }),
- isGroup: true,
- name: "卫星影像图",
- });
-
- var yingxzi = new ol.layer.Tile({
- source: new ol.source.XYZ({
- url: "https://t0.tianditu.gov.cn/DataServer?T=cia_w&x={x}&y={y}&l={z}&tk=cc4aba6e967096098249efa069733067",
- }),
- isGroup: true,
- name: "天地图文字标注--卫星影像图",
- });
- //获取坐标是否存在
- var Zb;
- getQueryLand().then((response) => {
- if (response.code == 200) {
- let InsertCode = response.data;
- if (InsertCode != null) {
- var lat = InsertCode.lat;
- var lng = InsertCode.lng;
- if(lat !=null && lng !=null && lat !="" && lng !=""){
- Zb = [lng,lat];
- }else {
- Zb =[115.452752, 31.789033];
- }
- //加载地图
- map = new ol.Map({
- controls: ol.control.defaults({attribution: false, zoom: false, rotate: false}).extend([]), //隐藏放大缩小按钮
- layers: [aerial, yingxzi],
- projection: projection,
- logo: 'false',
- target: that.uuidMap,
- view: new ol.View({
- center: ol.proj.fromLonLat(Zb),
- //center: ol.proj.fromLonLat([115.452752, 31.789033]),
- zoom: 16.9,
- minZoom: 5, //地图缩小限制
- maxZoom: 18, //地图放大限制
- }),
- });
- }
- }
- });
-
- //图层查询定位结束 ---------end
- //开始绘制地图
- $("#"+this.drawingPolygonMap).click(function () {
- //that.closeMoule = null;
- map.removeInteraction(draw);
- //var source = new ol.source.Vector({wrapX: false});
- vector_drawing = new ol.layer.Vector({
- source: new ol.source.Vector(),
- });
- map.addLayer(vector_drawing);
-
- function addInteraction() {
- draw = new ol.interaction.Draw({
- source: vector_drawing.getSource(),
- type: "Polygon"
- });
- draw.on('drawend', function (evt) {
- var feature = evt.feature;
- var geometry = feature.getGeometry();
- var coordinate = geometry.getCoordinates();
- that.closeMoule = coordinate;
- that.formSubmit();
- });
- map.addInteraction(draw);
- }
-
- addInteraction();
-
- });
- //清除画图鼠标点击事件
- // $("#drawRemove").click(function () {
- // //map.addLayer(hc_land);
- // map.removeInteraction(draw);
- // //map.removeLayer(vector_drawing);
- // });
- //还原之前图层
- $("#"+this.drawingResetMap).click(function () {
- map.removeInteraction(draw);
- map.removeLayer(vector_drawing);
- //that.closeMoule = null;
- that.formSubmit();
- });
- }
- },
- },
- watch: {},
- };
- </script>
-
- <style scoped>
- #that.message {
- width: 100%;
- height: 100%;
- }
- .fuTitle {
- border-top: 1px solid #e9e9e9;
- text-align: center;
- padding: 10px 0px 0px 0px;
- font-size: 18px;
- color: #999;
- }
- .ant-btn-red {
- position: relative;
- display: inline-block;
- background: #D0EEFF;
- border: 1px solid #99D3F5;
- border-radius: 4px;
- padding: 4px 12px;
- overflow: hidden;
- color: #1E88C7;
- text-decoration: none;
- text-indent: 0;
- line-height: 30px;
- font-size: 28px;
- margin: 5px 0 5px;
- }
- #land-btn-wrap{
- position: relative;
- width: 25%;
- left: 75%;
- bottom: 100%;
- z-index: 2000;
- padding-top: 5%;
- }
- </style>
|