openlayers 相关问题

OpenLayers是一个开源的Javascript Web映射库，用于创建Web地图应用程序。

我正在创建一个开放层脚本以使用form url的URL显示Mapbox图块

mapbox openlayers

回答 0 投票 0

java.lang.runtimeException：java.lang.nullpoInterException with GeoServer，openlayer

地质器在投影EPSG中具有一层：4326。查询是成功（投影EPSG：3857）： http：//域：8080/geoserver/agroupr/wms？service = wfs＆request = getfeature＆version＆version = 1.1.0＆

java tomcat exception openlayers geoserver

回答 0 投票 0

反射本地 +开放层无法调用JS功能

import { useAssets } from "expo-asset"; import { useContext, useEffect, useRef, useState } from "react"; import { useWindowDimensions } from "react-native"; import WebView from "react-native-webview"; import { Context } from "../App"; const Page = () => { const [assets] = useAssets([require("../assets/index.html")]); const [htmlString, setHtmlString] = useState<string>(); const pageDimensions = useWindowDimensions(); const webViewRef = useRef<WebView | null>(null); const [add, setAdd, swch] = useContext(Context); useEffect(() => { if (assets) { fetch(assets[0].localUri || "") .then((res) => res.text()) .then((html) => setHtmlString(html)); } }, [assets]); useEffect(() => { if (webViewRef.current) { console.log(swch) const functionToCall = swch ? "showMiddlemarker();" : "hideMiddlemarker();"; webViewRef.current.injectJavaScript(`${functionToCall}; true;`); } }, [swch]); if (!htmlString) { return null; } return ( <WebView ref={(r) => (webViewRef.current = r)} javaScriptEnabled source={{ html: htmlString, }} style={{ width: pageDimensions.width, height: pageDimensions.height, }} scrollEnabled={false} overScrollMode="never" showsHorizontalScrollIndicator={false} showsVerticalScrollIndicator={false} scalesPageToFit={false} containerStyle={{ flex: 1 }} onLoad={() => { webViewRef.current?.injectJavaScript(` function showMiddlemarker() { console.log("Showing marker"); markerElement.style.display = "block"; } function hideMiddlemarker() { console.log("Hiding marker"); markerElement.style.display = "none"; } true; `); }} /> ); }; export default Page;

javascript reactjs react-native openlayers

回答 1 投票 0

如何在开放层中创建新的变焦按钮？

我创建了两个按钮（使用bootstrap）以缩放进出： <div class="btn-toolbar" id="buttontoolbar"> <div id="newSim", class="btn-group-vertical"> <button type="button" title="Zoom in", class="btn btn-default",id="olZoomOutLink"><img src="plus.svg"></button> <button type="button" title="Zoom out", class="btn btn-default", id="customZoomOut"><img src="minus.svg"></button> </div> </div> 我还关闭了打开层的默认缩放按钮： var map = new ol.Map({ controls: ol.control.defaults({ zoom: false, }) }) 现在我的问题是，如何使我的两个按钮用于缩放和缩放？ thanks！在HTML文件中创建HTML按钮后，您可以通过引用HTML的ID对每个控件添加一个控件。之后，请在地图上收听点击事件。 var zoomType; document.getElementById('customZoomOut').onclick = function() { zoomType="customZoomOut"; }; document.getElementById('olZoomOutLink').onclick = function() { zoomType="olZoomOutLink"; }; var map = new ol.Map({ target: 'map', layers: [new ol.layer.Tile({ source: new ol.source.OSM() })], view: new ol.View({ center: [0, 0], zoom: 2 }) }); map.on('click', function(evt) { if(zoomType=="olZoomOutLink"){ var view = map.getView(); var zoom = view.getZoom(); view.setZoom(zoom - 1); } if(zoomType=="customZoomOut"){ var view = map.getView(); var zoom = view.getZoom(); view.setZoom(zoom + 1); } }); <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">  <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script> <script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script> <div class="btn-toolbar" id="buttontoolbar"> <div id="newSim" , class="btn-group-vertical"> <button type="button" title="Zoom in" class="btn btn-default" id="olZoomOutLink"><img src="plus.svg"></button> <button type="button" title="Zoom out" class="btn btn-default" id="customZoomOut"><img src="minus.svg"></button> </div> </div> 添加了OL和动画的较新版本。默认按钮的行为是不同的。因此，这是一个没有setZoom()的解决方案。这有点通用，因此请调整到您的框架 <button onclick="zoomTo(+1)">+</button> <button onclick="zoomTo(-1)">-</button> 和此功能 zoomTo(amount){ const view = map.getView(); const zoom = view.getZoom(); view.animate({ zoom: zoom + amount}) } 定义映射时禁用正常控件：new Map({ ... controls: [] }) 您可以通过动态调整视图缩放级别来在OpenLaylayers中创建自定义缩放按钮。下面的功能平稳地将缩放缩放为in或out： Solution： function onZoom(value: number): void { const view = map.getView(); if (!view) return; const currentZoom = view.getZoom() ?? 0; const newZoom = view.getConstrainedZoom(currentZoom + value); // Cancel any ongoing zoom animations to prevent conflicts if (view.getAnimating()) { view.cancelAnimations(); } // Custom easing function for smooth zooming const easeIn = (t: number) => 1 - Math.pow(1 - t, 3); // Animate the zoom transition view.animate({ zoom: newZoom, duration: 250, // Adjust duration as needed easing: easeIn, }); } usage： <button onClick={() => onZoom(+1)}>Zoom In</button> <button onClick={() => onZoom(-1)}>Zoom Out</button>

twitter-bootstrap gis openlayers openlayers-3

回答 3 投票 0

openlayer linestrings以显示最大linestring上的标签文本

目前，我需要在线条（一组林格）几何形状上显示标签，但只需要在标签的最大段上显示标签。我试图将rulerObject的样式设置为 var

javascript angular7 openlayers openlayers-3

回答 2 投票 0

如何清除openlayers image wms源上图像缓存的正确方法？

wmsLayer.getSource().updateParams()

openlayers

回答 1 投票 0

如果显示群集，如何显示功能量在情况下，该点是集群的一部分（即它具有多个功能），我想显示功能数量。我曾经用vectorlayer这样做： const clustersource =新群集（...

openlayers